1

I have a loop where I create a multiple Mesh with different geometry, because each mesh has one 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 );

But now I have this error in the javascript code Three.js

Uncaught TypeError: Cannot read property 'map' of undefined

In the function:

function bufferGuessUVType ( material ) {
}

Update:

Finally I have removed the merged solution and I can use an unique geometry for the all voxels. Altough I think that If I use merge meshes the app would have a better performance.

4

2 回答 2

2

对于 r53+，代码应该是这样的：

var geoCube = new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize);
var geometry = new THREE.Geometry();
var materials = [];

for( var i = 0; i < voxels.length; i++ ){

  for ( var j = 0; j < geoCube.faces.length; j ++ ) {
    geoCube.faces[ j ].materialIndex = i;
  }

  var object = new THREE.Mesh( geoCube );
  // here I assume you'll me positioning the object.
  THREE.GeometryUtils.merge( geometry, object );

  var voxel = voxels[i];
  var texture = almacen.textPlaneTexture(voxel.texto,voxel.color,voxelSize);
  materials.push( new THREE.MeshBasicMaterial( { map: texture } ) );

}

// Add geometry to scene

var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();

scene.add( mesh );
于 2012-12-17T12:10:31.467 回答
0

一些方法期望材料阵列位于网格面材料中。例如：

function getBufferMaterial( object, geometryGroup ) {

    return object.material instanceof THREE.MeshFaceMaterial
        ? object.material.materials[ geometryGroup.materialIndex ]
        : object.material;

};

可以通过在几何体和网格面材质中引用材质阵列来处理此问题。所以创建网格的线看起来像：

mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(geometry.materials) );

并在处理体素的循环中：

geometry.materials.push( new THREE.MeshBasicMaterial({ map: texture }));

几何体中的每个面也需要分配一个materialIndex，否则会出错。如果您知道每个体素有多少个面，循环遍历 geometry.faces[] 并分配一个 materialIndex 可能是一个好方法。

于 2012-12-17T06:05:55.653 回答