2

THREE.js Noob here.

I have a mesh that I want to rotate by selecting on one of its faces. Basically, I want to click on a face, and apply rotations to the mesh so that the face I clicked on faces the plane that the mesh is currently sitting on.

Here is a visualization of my problem:

enter image description here

I want to click on a face (the yellow triangle) and rotate the mesh so that the yellow triangle faces the plane that the mesh is currently sitting on. I do have normal vector of the face (i.e., myVector) and I want to apply rotations so that the normal vector would equal targetVector after.

I would like to find out how much I would have to rotate the mesh in EACH axis separately in order to achieve my goal.

Thank you in advance and please ask me if you require any more information!

mikemklee
  • 423
  • 7
  • 16
  • I see your x, y, z world axes don't follow the Three.js standard. Is that a requirement of your question? Because it would greatly change the significance of `targetVector(0, 0, -1)` – M - Oct 24 '18 at 22:15
  • @Marquizzo My XYZ axes are not conventional, and unfortunately I have to keep them like that. Would the solution below still work? – mikemklee Oct 25 '18 at 13:11
  • Hmm... that's a different question altogether. I believe it's already been asked: https://stackoverflow.com/questions/8272297/three-js-rotate-projection-so-that-the-y-axis-becomes-the-z-axis – M - Oct 25 '18 at 18:44

1 Answers1

4

You'll need to use a THREE.Quaternion, apply the vectors, and then read the resulting rotations through a THREE.Euler:

// Set starting and ending vectors
var myVector = new THREE.Vector3(0.1, 1.0, 0.1);
var targetVector = new THREE.Vector3(0, 0, -1);

// Normalize vectors to make sure they have a length of 1
myVector.normalize();
targetVector.normalize();

// Create a quaternion, and apply starting, then ending vectors
var quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors(myVector, targetVector);

// Quaternion now has rotation data within it. 
// We'll need to get it out with a THREE.Euler()
var euler = new THREE.Euler();
euler.setFromQuaternion(quaternion);
console.log(euler.toArray()); 

// Resulting euler will have x, y, z rotations in radians:
//[
//  0: -1.6704649792860586,
//  1: 0.09917726107940236,
//  2: 0.10956980436233299,
//  3: "XYZ"
//]
M -
  • 26,908
  • 11
  • 49
  • 81