CODEWITHSUNDEEP
three.js
uhura
uhura

Reputation: 2683

Box rotation parallel to selected face

On Sphere face click add Box parallel to the face. To get (x, y, z) rotation angles, I'm using this method:

function getRotation(faceNormal){
    var planeVector1 = new THREE.Vector3(0,1,0);
    var matrix1 = new THREE.Matrix4();
    var quaternion = new THREE.Quaternion().setFromUnitVectors(planeVector1, faceNormal);
    var matrix = new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
    var a = new THREE.Euler( );
    a.setFromRotationMatrix ( matrix, 'XYZ' )
    return a.toVector3();
}

Result looks like this, boxes are parallel to the face but have different orientation: enter image description here

I want boxes to have same orientation and be parallel to the face as in image below, how can I achieve this:

enter image description here

Created fiddle example, just click on sphere to add box: jsfiddle

Upvotes: 1

Views: 299

Answers (1)

WestLangley
WestLangley

Reputation: 104843

Object3D.lookAt() is a handy method that will serve your purposes.

First create your mesh's geometry so it is "looking" by default in the direction of the positive-z axis. Then call mesh.lookAt(). For example:

square.lookAt( intersects[ 0 ].face.normal );
square.position.copy(intersects[ 0 ].point );

Note that in this case, we call lookAt() first, and translate the object second.

fiddle: https://jsfiddle.net/c12vdwbx/8/

three.js r.73

Upvotes: 3

Related Questions