I have been utilizing Three.js to showcase a variety of custom geometries in different positions and rotations. These geometries are static and do not change frequently, but users have the ability to manipulate them by adding, deleting, or altering the shape of each individual object.
So far, I have been successful with the following code snippet:
var Mat=new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: false, opacity: 0.5 , transparent:true} )
var Geo=new THREE.CubeGeometry( 20, 100, 20 )
var Mesh=new THREE.Mesh(Geo, Mat);
//Applying rotation
m = new THREE.Matrix4().set(0.3,-0.3,0,0,0.3,0.3,0,0,0,0,1,0)
Mesh.applyMatrix(m);
Mesh.updateMatrix();
Mesh.position.x=50;
Mesh.position.y=50;
Mesh.position.z=50;
octree.add(Mesh);
Mesh.updateMatrix();
scene.add( Mesh );
The above method works fine, though it encounters challenges when dealing with a large number of objects. As per:
By merging the objects, I have experienced significant speed improvements, enabling smooth operations even with 10,000+ objects. However, I am currently facing difficulties with setting up selections again.
Based on the aforementioned link, maintaining the mesh in an array or octree facilitates selection while retaining the speed advantages of merged objects. Although I already have an octree in place, using it for selection proves to be challenging as the selection objects seem to lose their position relative to the merged scene object(s). The selection objects appear at the origin, indicating that the octree may not retain the position, and possibly the rotation, of its objects. The snippet below illustrates this issue:
var TotalGeo = new THREE.Geometry();
//Adding Objects
var Mat=new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: false, opacity: 0.5 , transparent:true} )
var Geo=new THREE.CubeGeometry( 20, 100, 20 )
var Mesh=new THREE.Mesh(Geo, Mat);
//Applying rotation
m = new THREE.Matrix4().set(0.3,-0.3,0,0,0.3,0.3,0,0,0,0,1,0)
Mesh.applyMatrix(m);
Mesh.updateMatrix();
Mesh.position.x=50;
Mesh.position.y=50;
Mesh.position.z=50;
octree.add(Mesh);
Mesh.updateMatrix();
//scene.add( Mesh );
TotalGeo.merge( Mesh.geometry, Mesh.matrix );
//Adding merged geometry
var total = new THREE.Mesh(TotalGeo, Mat);
scene.add(total);
The manual adjustment of rotation and position remains crucial for the custom geometry. Any suggestions would be greatly appreciated! Thank you