THREE.JS |Как узнать XYZ-повороты между двумя векторами?

Question

THREE.js Noob здесь.

У меня есть сетка, которую я хочу повернуть, выбрав одну из ее граней.По сути, я хочу щелкнуть по лицу и применить повороты к сетке так, чтобы лицо, по которому я щелкнул, было обращено к плоскости, на которой сейчас находится сетка.

Вот визуализация моей проблемы:

Я хочу щелкнуть гранью (желтый треугольник) и повернуть сетку так, чтобы желтый треугольник смотрел на плоскость, на которой сейчас находится сетка,У меня есть нормальный вектор лица (то есть myVector), и я хочу применить повороты так, чтобы нормальный вектор равнялся targetVector после.

Я хотел бы узнать, сколько у меня будетчтобы повернуть сетку по оси КАЖДОЙ отдельно для достижения моей цели.

Заранее спасибо и, пожалуйста, спросите меня, если вам нужна дополнительная информация!

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"
//]