在THREE.js中按索引设置面部透明度

Question

我设法使用以下方法设置网格面的颜色：

geometry.faces[i].color.setHex('0xff00ff');

是否具有将透明度设置为true并将不透明度设置为0.5的功能？我敢肯定有一个，只是不知道语法。

Answer 1

实际上，您无法通过更改几何来实现。因为透明度是由材料控制的。

但是有办法做到这一点。

首先，每张脸都有materialIndex（Face manual）。

接下来，在three.js场景中绘制的每个网格都有材质。还有一种特殊的材料类型THREE.MeshFaceMaterial（MeshFaceMaterial manual），它以材料数组作为参数。

绘制面时，Three.js渲染器将获取面的materialIndex并使用此材质数组中的相应材质，或者如果网格包含单个材质类型。

因此，您可以执行以下操作：

var opacMaterial = new THREE.MeshLambertMaterial({
  transparent:true, 
  opacity:0.7
});
var solidMaterial = new THREE.MeshLambertMaterial({
  transparent:false, 
  color:new THREE.Color(1,0,0)
});

var mesh = new THREE.Mesh(
  geometry, 
  new THREE.MultiMaterial([solidMaterial, opacMaterial])
 );

默认情况下，如果您的几何图形具有materialIndex == 0每个面，则将看到solidMaterial绘制。

如果要使其透明，请执行以下操作；

geometry.faces[i].materialIndex = 1;

不要忘记更新网格中的几何：（如何更新网格中的几何问题。）

另外，请注意，如果您materialIndex的脸部大于材料阵列的长度，则THREE.js的内部会出现尴尬的错误