Work with the interface

Posted on by
0

Added buttons for creating primitives from the threejs library, the creation of which I plan to implement.

To do this, I created an array of objects with a description of my buttons, containing the text for the button, the type of geometry being created for transmission to TA_Enteties and a link to the icon:

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: ''}

	]

Through forEach I add them all to the buttonsDiv:

primitivesNamesForButtons.forEach(element => {

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

Added a display of material parameters in the options menu.

I made the Main menu hidden when I click on the arrow:

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);

Implemented the creation of a circle. At the same time, I ran into a problem. Threejs issued a warning in the console with each render:
three.js: 2533 THREE.Matrix3: .getInverse () can’t invert matrix, determinant is 0.
It turned out that it is impossible for the object to have a zero value (for example, height) or scale. In my case, the warning worked on creating a BoundingBox, since the circle is a flat object and the height is 0. I had to add a check:

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

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

}
0