three.js - 在 THREE.js 中通过索引设置人脸的透明度

Question

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

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

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

Answer 1

实际上，您无法通过更改几何图形来实现这一点。因为透明度由 Material 控制。

但是有办法做到这一点。

首先，每张脸都有materialIndex ( Face manual )。

接下来，在three.js 场景中绘制的每个网格都有 Material 。还有THREE.MeshFaceMaterial型的特殊 Material ( MeshFaceMaterial manual )，它将 Material 数组作为参数。

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

所以你可以这样做:

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;

不要忘记更新网格中的几何图形:( How to update geometry in mesh question. )

另外，请注意，如果您有 materialIndex在你的脸大于 Material 数组的长度时，你会在 THREE.js 的深处得到尴尬的错误