具有一种几何形状和不同纹理的多个网格。错误答案

【问题标题】：Multiple mesh with one geometry and different textures. Error具有一种几何形状和不同纹理的多个网格。错误
【发布时间】：2012-11-02 08:37:00
【问题描述】：

我有一个循环，我创建了一个具有不同几何形状的多个网格，因为每个网格都有一个纹理：

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 );

但现在我在 javascript 代码 Three.js 中有这个错误

未捕获的类型错误：无法读取未定义的属性“地图”

在函数中：

function bufferGuessUVType ( material ) {
}

更新：

最后我删除了合并的解决方案，我可以为所有体素使用独特的几何形状。虽然我认为如果我使用合并网格，应用程序的性能会更好。

【问题讨论】：

标签： javascript geometry textures three.js mesh

【解决方案1】：

对于 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 );

【讨论】：

【解决方案2】：

一些方法期望材质数组位于网格面材质中。例如：

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 可能是一个好方法。

【讨论】：