Recently, I created a 3D model of my hometown and I wanted to incorporate real-time data to adjust the height of the buildings. Initially, I loaded each building as an individual mesh and added it to the scene during setup.
var threeObjects = [];
var buildingMesh = new THREE.Mesh(geometry, material);
threeObjects.push(buildingMesh);
$.each(threeObjects, function(i, buildingMesh) {
buildingMesh.rotation.x += -3.1415*0.5;
buildingMesh.castShadow = true;
buildingMesh.receiveShadow = true;
scene.add(buildingMesh);
});
However, this process proved to be too slow given that my dataset includes approximately 10,000 buildings. To speed up the rendering, I decided to merge all the geometries into a single geometry and create a mesh from it before adding it to the scene.
singleGeometry.merge(buildingMesh.geometry, buildingMesh.matrix); //in a loop
var faceColorMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors } );
combinedMesh = new THREE.Mesh(singleGeometry, faceColorMaterial);
scene.add(combinedMesh);
In order to test my concept, I attempted to change the height of a building when clicked. Unfortunately, this functionality did not work as expected. While I was able to access faces and vertices by assigning a new ID, changing the height remained elusive to me.
In my original method, adjusting the scale along the z-axis would have been straightforward:
buildingMesh.scale.z=2;
But since I no longer have separate meshes, I'm unsure how to proceed.
If anyone has experience with Three.js and can offer guidance, I would greatly appreciate it!
Disclaimer: I am relatively new to Three.js, so please bear with me if my question seems basic. I hope for a helpful solution :)