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

【问题标题】：THREE.js: How to change color of Face while ignoring Material color?THREE.js：如何在忽略材质颜色的情况下更改面的颜色？
【发布时间】：2019-01-10 06:24:39
【问题描述】：

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

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

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

【解决方案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,，您可以为每个面分配颜色，而无需担心乘法。

【讨论】：