如何使用Three.js使对象垂直于面部？ [英] How do I make an object perpendicular to a face with Three.js?

问题描述

相关的代码笔：

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

在我的游戏中，我有一个外星人树的模型。
对于这棵树的每个面，我都会生成一个金字塔（ CylinderGeometry 有4个面），并将其放置在面的中心。然后，我希望这个金字塔垂直于脸，这样我就会得到一棵有穗的树。
我尝试使用 object.lookAt 实现这一目标，并将其指向正常状态，但是奇怪的事情会发生。例如：

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:

如果我添加

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?

奖金问题

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

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?

推荐答案

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

You want to create cylinder and point it in a particular direction. One way to do that is to use the following pattern:

创建几何。

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

旋转几何图形，使顶部指向Z轴正方向。

Rotate the geometry so the top points in the direction of the positive-Z axis.

cylinderGeometry.rotateX( Math.PI / 2 );

创建网格。

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

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

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

告诉圆柱体朝您想要的方向看。由于我们已经改变了几何形状，因此将使圆柱的顶部指向所需的方向。

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

three.js r.91

这篇关于如何使用Three.js使对象垂直于面部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！