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

Question

相关代码笔:

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

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

如果我添加

columnGeometry.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 );

三.js r.91