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;

Three.js - 在平面上更新纹理

1 个答案: