如何使用three.js计算旋转度数并旋转到方向向量后的点？答案

【问题标题】：How to calculate the points after rotate degrees and rotate to direction vector by using three.js?如何使用three.js计算旋转度数并旋转到方向向量后的点？
【发布时间】：2020-06-08 17:35:37
【问题描述】：

如何使用three.js计算旋转角度后点A到H并旋转到方向向量（-42,51,11）？

提前谢谢你，请原谅我的英语不好。最好的问候。

const tree = [
    [   0,   0,   0],  // A
    [   2, 151,   2],  // B
    [ -62, 283,  63],  // C
    [  62, 296, -58],  // D 
    [-104, 334,  74],  // E
    [ -58, 338,  45],  // F
    [  67, 403, -55],  // G
    [ 105, 365, -86],  // H
  ]

【问题讨论】：

您需要定义一个旋转矩阵，然后将该矩阵应用于每个顶点。查看 Three.js 的源代码以获取有关如何执行此操作的示例。例如这里github.com/mrdoob/three.js/blob/dev/src/math/Matrix4.js#L651查看矩阵定义和github.com/mrdoob/three.js/blob/dev/src/math/Vector3.js#L274这里的顶点旋转你甚至可以直接使用Three.js来帮助你解决你的问题。
@Maarten Veerman 真诚感谢您的回答。您能否提供更多详细信息？

标签： javascript three.js rotation

【解决方案1】：

此代码将围绕定义为顶点[-42, 51, 11] 的轴对树中的所有向量进行 90 度旋转。因此旋转轴定义为从[0,0,0] 到[-42, 51, 11] 的一条线，因此点A 的旋转不会改变。

const tree = [
    [   0,   0,   0],  // A
    [   2, 151,   2],  // B
    [ -62, 283,  63],  // C
    [  62, 296, -58],  // D 
    [-104, 334,  74],  // E
    [ -58, 338,  45],  // F
    [  67, 403, -55],  // G
    [ 105, 365, -86],  // H
  ] 

// Define the rotation axis:
let axis = new THREE.Vector3(-42, 51, 11)

// Normalize the axis:
axis.normalize()

// Define the matrix:
let matrix = new THREE.Matrix4()

// Define the rotation in radians:
let radians = 90 * Math.PI / 180

// Rotate the matrix:
matrix.makeRotationAxis(axis, radians)

// Now apply the rotation to all vectors in the tree
let newTree = []
for(const vector of tree) {
  // Define the vector3:
  let vec = new THREE.Vector3(vector[0], vector[1], vector[2])
  vec.applyMatrix4(matrix)
  newTree.push(vec.toArray()) // toArray is optional, you may want to keep the original Vector3 object
}

// newTree now holds the rotated vectors
console.log(newTree)

查看https://codepen.io/mtveerman/pen/PoZZpvw 了解工作版本

【讨论】：

@MaartenVeerman 非常感谢您的回答。我很容易理解。