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

以及Three. js中的所有其他 "materialIndex "和 "needsUpdate "变量 但还是没有结果 我如何强制更新材质指数？

Answer 1

你不能这样做。materialIndex 只有在第一次渲染时，才会将几何体分割成块，每个块有相同的材质。而且，你不能重新分割这些块。

然而，你可以做的是改变在 materials 数组。

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

您不需要设置任何 needsUpdate 旗帜 true 后，也可以这样做。

你可以做的另一个事情是，从一开始就给每个面都有自己的材质，然后，比如说，只需要改变一个材质的纹理。

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