Question

I have a loop where I create a multiple Mesh with different geometry, because each mesh has one texture.

for( var i = 0; i < voxels.length; i++ ){
  texture = almacen.textPlaneTexture(voxel.texto,color,voxelSize);
  material = new THREE.MeshBasicMaterial({ map: texture });                       
  object = new THREE.Mesh(new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize, 1, 1, 1, new THREE.MeshBasicMaterial() ), material);
}

I have a performance problem, and I think that if I can create only one geometry, I’ll have better results. But I don’t know how can I create one geometry for each mesh and to have each mesh with a different texture.

Answer 1

Your meshes can all share a geometry like so:

var geometry = new THREE.CubeGeometry( 10, 10, 10 );

for( var i = 0; i < N; i++ ) {

    texture = new THREE.Texture( ... );

    material = new THREE.MeshBasicMaterial( { map: texture } );   

    mesh = new THREE.Mesh( geometry, material );

    scene.add( mesh );

}

Then, if you want to change a texture, you do something like this:

var texture = new THREE.Texture( ... );
texture.needsUpdate = true;

mesh.material.map = texture;

three.js r.52