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

Deeps 发表于 Dev

深渊

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

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

刹车盘

好吧，有几件事：

您正在使用面法线来确定方向。但是当您手动设置几何体时，面法线尚未设置。所以在你推完所有的脸之后，你需要调用
```
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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。