three.js - THREE.js：如何在忽略材质颜色的情况下更改面的颜色？

Question

我正在尝试更改几何中单个面的颜色。

我用几何和材质初始化了我的网格，如下所示：

const geometry = new THREE.Geometry({
  // some options
});
const material = new THREE.MeshBasicMaterial({
  color: '0xff0000', // red
  side: THREE.DoubleSide,
  vertexColors: THREE.FaceColors,
  flatShading: true,
});

然后我使用鼠标坐标和raycaster的交点查找方法找到了我想要着色的目标面。

最后，我尝试在目标面上应用颜色：

targetFace.color.setHex(0x0000ff);
mesh.material.colorsNeedUpdate = true;

我希望目标脸的颜色从红色变为蓝色，但脸最终变成黑色。我做了一些谷歌搜索，发现脸部的颜色与最初在材质上设置的颜色“相乘”，最终混合了两种颜色。

我怎样才能避免这种情况并将脸部的颜色更改为我想要的确切颜色？

当前结果

预期结果

标签： three.js

Answer 1

你给材料两个相互矛盾的命令。现在你告诉材质渲染一个基色，color: 0xff0000但你也告诉 faceColor 是0x0000ff。当这两个值相乘时，你会得到黑色：

0xff0000 x 0x0000ff = 0x000000

// Broken down, it's the same as this:
1 x 0 = 0
0 x 0 = 0
0 x 1 = 0

您需要做的是将基色设置为0xffffff，然后将每个面颜色设置为您想要的值：

0xffffff X 0x0000ff = 0x0000ff // Blue
0xffffff X 0xff0000 = 0xff0000 // Red

或者更简单地说，如果您想完全避免颜色乘法，只需不要通过删除此行来声明基色：color: '0xff0000', // red. 然后，vertexColors: THREE.FaceColors,您可以为每个面分配颜色，而不必担心乘法。