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

【问题标题】：THREE.JS | How to find out XYZ rotations between two vectors?三.JS |如何找出两个向量之间的 XYZ 旋转？
【发布时间】：2019-03-29 09:16:19
【问题描述】：

这里有三个.js 菜鸟。

我有一个网格，我想通过选择其中一个面来旋转它。基本上，我想单击一个面，然后对网格应用旋转，以便我单击的面面对网格当前所在的平面。

这是我的问题的可视化：

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

我想知道我需要在每个轴上分别旋转多少网格才能实现我的目标。

提前感谢您，如果您需要更多信息，请询问我！

【问题讨论】：

我看到您的 x、y、z 世界轴不符合 Three.js 标准。这是你的问题的要求吗？因为它会大大改变targetVector(0, 0, -1)的意义
@Marquizzo 我的 XYZ 轴不是传统的，不幸的是我必须保持这样。下面的解决方案还能用吗？
嗯......这完全是一个不同的问题。我相信它已经被问到了：stackoverflow.com/questions/8272297/…

标签： vector three.js

【解决方案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"
//]

【讨论】：