THREE.JS |如何找出两个向量之间的XYZ旋转？

Question

THREE.js Noob在这里。

我想要通过选择其中一个面来旋转网格。基本上，我想单击一个面，然后对网格进行旋转，以使我单击的面面向网格当前所在的平面。

以下是我的问题的可视化结果：

我想单击一个面（黄色三角形）并旋转网格，以便黄色三角形面向网格当前所在的平面。我确实具有人脸的法线向量（即myVector），并且我想应用旋转，以便法线向量在之后等于targetVector。

我想找出要实现目标需要分别在EACH轴上旋转多少网格。

预先感谢您，如果您需要更多信息，请问我！

Answer 1

您需要使用THREE.Quaternion，应用矢量，然后通过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"
//]