如何使用Three.js使对象垂直于面？

Question

相关代码：

http://codepen.io/OpherV/pen/yNebep

在我的游戏中，我有一个外星树的模型。 对于这棵树的每个面，我生成一个金字塔（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中的对象在其局部正Z轴的方向上“看”。 （除了相机，它向下看其负Z轴。）

告诉气缸朝你想要的方向“看”。由于我们已经改变了几何形状，这将使圆柱点的顶部朝向所需的方向。

cylinder.lookAt( face.normal ); 

现在将圆柱放在任何你想要的地方。

cylinder.position.copy( centerPoint );              

obj.add( cylinder );

three.js r.91