如何使用 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屋！