如何使用 Three.js 使物体垂直于面？

Question

相关代码笔：

在我的游戏中，我有一个外星树的模型。对于这棵树的每个面，我生成一个金字塔（CylinderGeometry，有 4 个面），并将其放置在面的中心。然后我希望这个金字塔垂直于面，这样我就能得到一棵带尖刺的树。我已经尝试用 object.lookAt 实现这一点并将其指向正常的面部，但奇怪的事情发生了。例如：

如果我加上

cylinderGeometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

中间的形状符合预期，但其余部分仍然变形

获得尖刺树的正确方法是什么？

加分题

在正确创建和定向后，我如何将这些尖峰合并到原始几何体中，这样我就没有那么多单独的对象？

Answer 1

您想创建圆柱体并将其指向特定方向。一种方法是使用以下模式：

创建几何图形。

var cylinderGeometry = new THREE.CylinderGeometry( 1, 10, 25, 4, 1 );

平移几何图形，使底部位于原点。

cylinderGeometry.translate( 0, 12.5, 0 );

旋转几何体，使顶点指向 Z 轴正方向。

cylinderGeometry.rotateX( Math.PI / 2 );

创建网格。

var cylinder = new THREE.Mesh( cylinderGeometry , characterSkinMaterial );

three.js 中的对象默认 "looking" 在其局部正 Z 轴方向。（除了相机，它向下看它的负 Z 轴。）

告诉圆柱体"look"你想要的方向。由于我们已经变换了几何体，这将使圆柱体的顶部指向所需的方向。

cylinder.lookAt( face.normal );

现在把圆柱体放在你想要的地方。

cylinder.position.copy( centerPoint );              

obj.add( cylinder );

three.js r.91

如何使用 Three.js 使物体垂直于面？

How do I make an object perpendicular to a face with Three.js?

javascript

3d

three.js