Three.js - 更新飞机上的纹理

Question

我正在尝试制作地形编辑器。所以，我有与它多种材料，这是我初始化像这样一个平面：

var materials = []; 
var grasstexture = THREE.ImageUtils.loadTexture('Img/grass.png', {}, function() { }); 
var rocktexture = THREE.ImageUtils.loadTexture('Img/rock.png', {}, function() { }); 
materials.push(new THREE.MeshPhongMaterial({color: 0xffffff, map: grasstexture})); 
materials.push(new THREE.MeshPhongMaterial({color: 0xffffff, map: rocktexture})); 
// Plane 

this.geometry.materials = materials; 
for(var i = 0; i < this.geometry.faces.length; i++) 
{ 
    this.geometry.faces[i].materialIndex = 0; 
} 

this.geometry.dynamic = true; 
this.mesh = new THREE.Mesh(this.geometry, new THREE.MeshFaceMaterial()); 
this.mesh.receiveShadow = true; 

结果是与两个纹理剥离方形的平面。

现在，我似乎无法在运行时更新每个顶点的materialIndex。我曾尝试：

face.materialIndex = 1; 

for(var i = 0; i < geo.materials.length; i++){ 
    geo.materials[i].needsUpdate = true; 
} 

for(var i = 0; i < this.geometry.faces.length; i++) 
{ 
    geo.faces[i].materialIndex = 0; 
} 

for(var i = 0; i < geo.materials.length; i++){ 
    geo.materials[i].needsUpdate = true; 
} 
this.mesh.needsUpdate = true; 
this.mesh.material.needsUpdate = true; 

geo.verticesNeedUpdate = true; 
geo.normalsNeedUpdate = true; 
geo.colorsNeedUpdate = true; 

geo.computeFaceNormals(); 
geo.computeVertexNormals(); 

geo.computeCentroids(); 
geo.computeTangents() ; 

和所有其他“materialIndex”和“needsUpdate”在three.js所变我能找到，但还是没有任何反应。我如何强制更新材料索引？

Answer 1

你不能。 materialIndex仅在第一个渲染中用于将几何分区分块，每个分块具有相同的材质。此外，您不能重新分区块。

但是，您可以做的是更改materials阵列中的材料。

materials[ 0 ] = new THREE.MeshBasicMaterial(); 

您不必这样做后，任何needsUpdate标志设置为true，无论是。

你可以做的另一件事是从一开始就给每个人脸上自己的材质，然后，例如，只是改变材质的纹理。

mesh.geometry.materials[ 0 ].map = texture; 
texture.needsUpdate = true;