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;