如何使用Three.js使對象垂直於面部？

Question

相關的密碼筆：

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

在我的游戲中，我有一個外星人樹的模型。 對於該樹的每個面，我都會生成一個金字塔（帶有4個面的CylinderGeometry ），並將其放置在面的中心。 然后我希望這個金字塔垂直於臉，這樣我就可以得到一棵有尖刺的樹。 我嘗試使用object.lookAt實現此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