如何创建自定义点而不是四元数的{0，0，0来创建Vector3

问题描述

在three.js场景中，我的LineLoop跨越了6个点，这些点作为平面位于图片上。 而且我想将其围绕向量A'B'（绿色圆形箭头）旋转。

我的指导线：

1. 计算点向量

let pointVector = new Vector3().fromArray([x,y,z])

1. 设置movemnet的向量

const move = new Vector3(xMove,yMove,zMove)

1. 设置旋转方向矢量

const zNormalVector = new THREE.Vector3(0,1)

1. 设置旋转角度

const zAngle = Math.PI/6

1. 使用向量和角度计算四元数

const zQuaternion = new Quaternion().setFromAxisAngle(zNormalVector,zAngle)

1. 将移动矢量添加到1中的每个点。

pointVector.add(move)

1. 将四元数应用于从1开始的每个点。

pointVector.applyQuaternion(zQuaternion)

使用“移动”操作一切正常，但是“旋转”操作使我感到困惑。

很明显，此算法的确切执行会导致沿红色箭头而不是绿色箭头旋转。

使用增加的坐标Y指定旋转矢量会导致这样一个事实，即旋转轴是倾斜的，不会移动，因此我在文档中找不到如何设置矢量的起点。

也许可以通过.worldToLocal和.localToWorld方法解决类似的问题，但是Vector3不是Object3D的实例

UPD 1 在docs中，我发现： 3D空间中的方向和长度。在three.js中，长度始终是从（0，0，0）到（x，y，z）的欧几里德距离（直线距离），方向也是从（0，0，0）到（ x，y，z）。

这意味着我的问题没有答案。但是我该如何像绿色箭头一样旋转对象？

解决方法

您想要的是平移旋转，即围绕不通过原点的轴的旋转。

有几种方法可以做到这一点，下面是一种简单的方法。设T为平移算子，R为旋转算子，T ^ -1为逆平移，即与T相同但方向相反。然后，您想要的转换是：

TranslatorRotation = T * R * T ^ -1

*是运算符的组成部分（或函数的组成部分），在矩阵语言中，它可以是“矩阵乘积”。

所以给定一个点x，绕平移轴的旋转是

x'= T * R * T ^ -1 * x

T和R的实现可以是任意的。 T可以是向量加法，R可以是四元数。