Relevant codepen:
http://codepen.io/OpherV/pen/yNebep
In my game I have a model of an alien tree. For each face of this tree I generate a pyramid (CylinderGeometry with 4 faces), and position it at the center of the face. Then I wish for this pyramid to be perpendicular to the face, so that I'll get a tree with spikes. I've tried achieving this with object.lookAt and point it at the face normal, but weird things happen. For example:
在我的游戏中,我有一个外星树的模型。对于这棵树的每个面,我生成一个金字塔(具有4个面的CylinderGeometry),并将其定位在面的中心。然后我希望这个金字塔垂直于脸部,这样我就会得到一棵带有钉子的树。我已经尝试用object.lookAt实现这一点并将其指向正常的脸部,但奇怪的事情发生了。例如:
If I add
如果我加
cylinderGeometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
cylinderGeometry.applyMatrix(new THREE.Matrix4()。makeRotationX( - Math.PI / 2));
The shape in the middle works as expected, but the rest is still distorted 
中间的形状按预期工作,但其余部分仍然扭曲
What is the proper way to get my spiked tree?
得到刺树的正确方法是什么?
Bonus question
How would I go about merging these spikes to the original geometry after proper creation and orientation so that I don't have so many separate objects?
在正确创建和定位后,如何将这些尖峰合并到原始几何体中,以便我没有这么多单独的对象?
1 个解决方案
#1
You want to create cylinder and point it in a particular direction. One way to do that is to use the following pattern:
您想要创建圆柱体并将其指向特定方向。一种方法是使用以下模式:
Create the geometry.
创建几何体。
var cylinderGeometry = new THREE.CylinderGeometry( 1, 10, 25, 4, 1 );
Translate the geometry so the base sits at the origin.
平移几何体,使底座位于原点。
cylinderGeometry.translate( 0, 12.5, 0 );
Rotate the geometry so the top points in the direction of the positive-Z axis.
旋转几何体使顶部指向正Z轴方向。
cylinderGeometry.rotateX( Math.PI / 2 );
Create the mesh.
创建网格。
var cylinder = new THREE.Mesh( cylinderGeometry , characterSkinMaterial );
Objects in three.js are by default "looking" in the direction of their local positive-Z axis. (Except the camera, which looks down its negative-Z axis.)
默认情况下,three.js中的对象在其局部正Z轴的方向上“看”。 (相机除外,它的负Z轴向下看。)
Tell the cylinder to "look" in the direction you want. Since we have transformed the geometry, this will make the top of the cylinder point in the desired direction.
告诉气缸按照你想要的方向“看”。由于我们已经改变了几何形状,这将使圆柱点的顶部朝向所需方向。
cylinder.lookAt( face.normal );
Now place the cylinder wherever you want it.
现在将圆柱放在任何你想要的地方。
cylinder.position.copy( centerPoint );
obj.add( cylinder );
three.js r.91
#1
You want to create cylinder and point it in a particular direction. One way to do that is to use the following pattern:
您想要创建圆柱体并将其指向特定方向。一种方法是使用以下模式:
Create the geometry.
创建几何体。
var cylinderGeometry = new THREE.CylinderGeometry( 1, 10, 25, 4, 1 );
Translate the geometry so the base sits at the origin.
平移几何体,使底座位于原点。
cylinderGeometry.translate( 0, 12.5, 0 );
Rotate the geometry so the top points in the direction of the positive-Z axis.
旋转几何体使顶部指向正Z轴方向。
cylinderGeometry.rotateX( Math.PI / 2 );
Create the mesh.
创建网格。
var cylinder = new THREE.Mesh( cylinderGeometry , characterSkinMaterial );
Objects in three.js are by default "looking" in the direction of their local positive-Z axis. (Except the camera, which looks down its negative-Z axis.)
默认情况下,three.js中的对象在其局部正Z轴的方向上“看”。 (相机除外,它的负Z轴向下看。)
Tell the cylinder to "look" in the direction you want. Since we have transformed the geometry, this will make the top of the cylinder point in the desired direction.
告诉气缸按照你想要的方向“看”。由于我们已经改变了几何形状,这将使圆柱点的顶部朝向所需方向。
cylinder.lookAt( face.normal );
Now place the cylinder wherever you want it.
现在将圆柱放在任何你想要的地方。
cylinder.position.copy( centerPoint );
obj.add( cylinder );
three.js r.91