How Do I Make An Object Perpendicular To A Face With Three.js?

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), a

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

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

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