Работа с интерфейсом

Опубликовано автором
1+

Добавил кнопки создания примитивов из библиотеки threejs, создание которых я планирую реализовать.

Для этого я создал массив объектов с описанием моих кнопок, содержащим текст для кнопки, тип создаваемой геометрии для передaчи в TA_Enteties и ссылку на иконку: 

	let primitivesNamesForButtons = [

		{text:'Box', type: 'BoxBufferGeometry', imgLink: './ico/cubeico.PNG'},
		{text:'Sphere', type: 'SphereBufferGeometry', imgLink: './ico/sphereico.PNG'},
		{text:'Circle', type: 'CircleBufferGeometry', imgLink: ''},
		{text:'Cone', type: 'ConeBufferGeometry', imgLink: ''},
		{text:'Cylinder', type: 'CylinderBufferGeometry', imgLink: ''},
		{text:'Dodecahedron', type: 'DodecahedronBufferGeometry', imgLink: ''},
		{text:'Icosahedron', type: 'IcosahedronBufferGeometry', imgLink: ''},
		{text:'Octahedron', type: 'OctahedronBufferGeometry', imgLink: ''},
		{text:'Plane', type: 'PlaneBufferGeometry', imgLink: ''},
		{text:'Ring', type: 'RingBufferGeometry', imgLink: ''},
		{text:'Shape', type: 'ShapeBufferGeometry', imgLink: ''},
		{text:'Tetrahedron', type: 'TetrahedronBufferGeometry', imgLink: ''},
		{text:'Text', type: 'TextBufferGeometry', imgLink: ''},
		{text:'Torus', type: 'TorusBufferGeometry', imgLink: ''},
		{text:'TorusKnot', type: 'TorusKnotBufferGeometry', imgLink: ''},
		{text:'Tube', type: 'TubeBufferGeometry', imgLink: ''}

	]

Через forEach добавляю их все в buttonsDiv: 

primitivesNamesForButtons.forEach(element => {

		taUI.addElement(
			buttonsDiv,
			'button',
			element.text,
			element.imgLink,
			function () {
			taScene.mode.action = 'creationEntity';
			taScene.mode.entity = element.type;
			}
	
		);
		
});

Добавил в меню параметров отображение параметров материала.

Сделал Главное меню скрывающимся при нажатии на стрелочку: 

let hideButton = document.createElement( 'div');
hideButton.className = 'hideButton';
hideButton.id = 'hideButton';
hideButton.innerHTML = '&#9668';
mainToolbar.style.left = '0px';
hideButton.addEventListener( 'click', (e) => {			
	if (mainToolbar.style.left === '0px') {
		requestAnimationFrame(
			function moveAnim (){
				let pos = mainToolbar.style.left.replace('px','');
				pos -= 10;
				mainToolbar.style.left = pos + 'px';
				if (mainToolbar.style.left.replace('px','') > -250) {
				        hideButton.innerHTML = '&#9658';
					requestAnimationFrame(moveAnim);
				}

			}
		);

	}
	else {
		mainToolbar.style.left = '0px';
		hideButton.innerHTML = '&#9668';
	}


	}
)

mainToolbar.appendChild( hideButton);

Реализовал создание круга. При этом столкнулся с проблемой. Threejs выдавал в консоли предупреждение при каждом рендере:
three.js:2533 THREE.Matrix3: .getInverse() can’t invert matrix, determinant is 0.
Оказалось, что нельзя, чтобы была нулевая величина у объекта (например высота) или scale. В моем случае предупреждение сработало на создании BoundingBox, так как круг — плоский объект и высота равна 0. Пришлось добавить проверку: 

if ( box.box.min.z === 0) {

    box.box.min.z = -0.001;
    box.box.max.z = 0.001;

}
1+