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;

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

如何避免这种情况，并将脸部颜色更改为我想要的确切颜色？

当前结果

预期结果

Answer 1

You're giving the material two conflicting commands. Right now you're telling the material to render a base color with color: 0xff0000 but you're also telling the faceColor to be 0x0000ff. When these two values are multipled, you get black:

0xff0000 x 0x0000ff = 0x000000

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

What you need to do is set the base color to 0xffffff and then set each face color to the value you want:

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

Or more simply, if you want to avoid color multiplication altogether, just don't declare the base color by removing this line: color: '0xff0000', // red. With vertexColors: THREE.FaceColors, you can then just assign colors to each face without worrying about multiplication.