在按钮单击 Three.js 上旋转 3D 对象答案

【问题标题】：Rotate 3D object on button click Three.js在按钮单击 Three.js 上旋转 3D 对象
【发布时间】：2018-05-09 05:02:16
【问题描述】：

当用户单击左、右、前和后按钮时，我必须旋转立方体。当用户单击左侧时，立方体应旋转，使其左侧位于相机前面。它是一个类似建筑物的结构，用户希望从所有四个方向看到建筑物。

请查看示例小提琴（cmets 中给出的链接）

【问题讨论】：

最好展示您尝试过的内容和方式。
我试过这样的：jsfiddle.net/0z3z6y7w/79，不确定它是否正确。
旋转/设置相机而不是物体不是更好吗？

标签： jquery 3d three.js rotation

【解决方案1】：

好的，有几件事：

您正在使用面法线来确定方向。但是当您手动设置几何图形时，尚未设置面法线。所以推完所有面后，需要调用
```
geo.computeFaceNormals();
```
我不知道为什么，但您将每张脸添加了两次。可能，你想从两边看脸。为此，请在您的材料定义中指定 DoubleSide：
```
new THREE.MeshPhongMaterial({ color: 0x6a4bea, side: THREE.DoubleSide }),
```
您的方法导致建筑物侧面有 2 个不同的法线。例如，您有 2 个标记为 right 的面和普通的 (0,0,1) 标记和 2 个标记为 right 的面和普通的 (0,0,-1)，这并不能清楚地说明建筑物右侧墙的朝向。当然，如果手动设置人脸，则需要注意索引顺序，所以所有人脸都朝向“外面”。

现在，通过正确的法线，我们能够确定用户应该从哪里看建筑物的方向或位置。我没有旋转建筑物，而是重新定位了camera 和controls.target。

var vector = selectedFace.normal.clone();
var center = myMesh.geometry.boundingSphere.center.clone();

var camPos = new THREE.Vector3().addVectors(center, vector.setLength(50));

camera.position.copy(camPos);
controls.target.copy(center);

（距离也可以根据物体的大小动态确定。）

这是更新后的工作 JSFiddle：https://jsfiddle.net/0z3z6y7w/80/

【讨论】：

感谢@Brakebein，我制作了两个侧面，因为我必须为内侧和外侧赋予不同的纹理。我已经完成了 geo.computeFaceNormals();。第三点奏效了，但有一个问题。它不是发生在我的小提琴中，而是发生在我的工作代码中。当我单击任何按钮并执行您答案中的代码时，3D 模型会消失，当我将鼠标移到画布上时，它会再次出现，所需的一面在相机前面。为什么 3D 模型会延迟或消失？请提出建议。
好的，找到解决方案了。只需要在controls.target.copy(center)之后写controls.update();