Question

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

https://dl.dropboxusercontent.com/u/31495717/cubemaker/index.html

我试图根据以下计算为CubeGeometry的面部着色：

计算Vector3作为相机位置与立方体脸顶点之间的差异
计算此向量与每个立方体面正常之间的点积

如果点积的符号为正，我将该立方体的颜色设为红色，其相对的立方体为蓝色。如果符号为负，我将立方体面颜色为绿色，而相对立方体颜色为黄色。

通过验证渲染中面部的颜色，我可以验证我的计算告诉我哪些面部索引代表最接近的面。

以下是我在render()函数中使用的相关代码（也可通过演示网站获得）：

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
    }
}

我遇到的问题是：

当我旋转立方体时，我正在旋转相机，因此也应该更改立方体面的颜色，以便相机始终看到相对于相机新位置的相同立方体面颜色。然而，当立方体旋转时，着色跟随面部。
红色和蓝色面的着色应在立方体内相反。同样。绿色和黄色面的颜色应该在立方体内相反。但是，一些绿色和黄色的面孔相邻。另外，红色和蓝色的面是相邻的而不是相反的。当立方体围绕y轴逆时针旋转时，蓝色面与黄色面相对。这不应该发生。

我的目标是计算立方体的三个最近面，这样我就可以得到它们的顶点并绘制轴。

我希望通过上述计算来确定哪个面在任何给定的摄像机位置最接近。然而，当立方体旋转时，着色跟随面部，所以我不能从这种方法知道哪些面最接近。

基于相邻面上显示的着色图案，我认为我对立方体面的索引也是不正确的。

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

如何使用Three.js获得CubeGeometry的最近面？

0 个答案: