Javascript 如何使用Three.js获取立方体测量的最近面？

出于这个问题的目的，我在这里运行了一个演示站点，其中包含我正在使用的代码：

我已尝试根据以下计算为

立方计量法

的表面上色：

• 计算

  矢量3

  作为摄影机位置和立方体面的顶点之间的差值
• 计算此向量与每个立方体面法线之间的点积

如果点积的符号是正的，我会把那个立方体的面涂成红色，把它的对面涂成蓝色。如果符号为负数，我将立方体面涂成绿色，对面的立方体面涂成黄色

通过验证面在渲染中的颜色，我可以验证我的计算是否告诉我哪些面索引表示最接近的面

以下是我在

render（）

函数中使用的相关代码（也可通过演示站点获得）：

for（var cube\u face\u idx=0；cube\u face\u idx0）{
cube.geometry.faces[cube\u face\u idx].materialIndex=0；//红色材质
cube.geometry.faces[（cube\u face\u idx+6）%12].materialIndex=1；//蓝色材质
}
否则{
cube.geometry.faces[cube\u face\u idx].materialIndex=2；//绿色材质
cube.geometry.faces[（cube\u face\u idx+6）%12].materialIndex=3；//黄色材质
}
}

我遇到的问题有：

旋转立方体时，我正在旋转摄影机，因此立方体面的颜色也应该更改，以便摄影机始终可以看到相对于摄影机新位置的相同立方体面颜色。但是，旋转立方体时，着色将跟随面

在立方体中，红色和蓝色面的颜色应相反。同样地在立方体中，绿色和黄色面的颜色应相反。但是，一些绿色和黄色面相邻。此外，红色和蓝色面是相邻的，而不是相对的。当立方体绕y轴逆时针旋转时，蓝色面与黄色面相对。这不应该发生

我的目标是计算立方体的三个最近的面，以便获得它们的顶点并绘制轴

我希望通过上面的计算来确定在任何给定的相机位置上哪些面最接近。但是，立方体旋转时，颜色会跟随面，因此我无法通过这种方法知道哪些面最接近

基于相邻面的着色模式，我认为我对立方体面的索引也是不正确的

---

如何修正计算步骤以解决这两个问题并正确识别离相机最近的面？

这应该可以帮助您：我看不出这有什么帮助，您能解释一下吗？您是否试图在渲染循环中更改

materialIndex

？我正在尝试计算离相机最近的面，使用材质索引作为视觉指示器。我很乐意使用任何有效的方法。您是否试图更改渲染循环中的

materialIndex

？

for (var cube_face_idx = 0; cube_face_idx < cube.geometry.faces.length; cube_face_idx++) {
    var face = cube.geometry.faces[cube_face_idx];
    var face_to_camera = new THREE.Vector3();
    face_to_camera.copy(camera.position);
    face_to_camera.sub(cube.geometry.vertices[face.a]);
    var dp = face.normal.dot(face_to_camera);
    if (dp > 0) {
        cube.geometry.faces[cube_face_idx].materialIndex = 0; // red material
        cube.geometry.faces[(cube_face_idx + 6) % 12].materialIndex = 1; // blue material
    }
    else {
        cube.geometry.faces[cube_face_idx].materialIndex = 2; // green material
        cube.geometry.faces[(cube_face_idx + 6) % 12].materialIndex = 3; // yellow material
    }
}