I wrote a loop that generates multiple Mesh objects with various geometries, where each mesh corresponds to a specific texture:
var geoCube = new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize);
var geometry = new THREE.Geometry();
for( var i = 0; i < voxels.length; i++ ){
var voxel = voxels[i];
var object;
color = voxel.color;
texture = almacen.textPlaneTexture(voxel.texto,color,voxelSize);
//Return the texture with a color and a text for each face of the geometry
material = new THREE.MeshBasicMaterial({ map: texture });
object = new THREE.Mesh(geoCube, material);
THREE.GeometryUtils.merge( geometry, object );
}
//Add geometry merged at scene
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();
mesh.geometry.computeTangents();
scene.add( mesh );
However, I encountered an error in my Three.js JavaScript code:
Uncaught TypeError: Cannot read property 'map' of undefined
This issue arises in the following function:
function bufferGuessUVType ( material ) {
}
Update:
I have decided to abandon the merging approach and utilize a single geometry for all voxels instead. Even though I believe that utilizing merged meshes would enhance the app's performance.