如何旋转3D点？

Question

我目前正在用js开发3d渲染器。

我想渲染多维数据集-效果很好-但我想做的是每个多维数据集的旋转。

因此，我得到了一个立方体的某个顶点，我想围绕其自身旋转每个立方体的x / y / z（俯仰，滚动，偏航）。

这是3D旋转功能：

let rotate3d = (points = [0,0,0], pitch = 0, roll = 0, yaw = 0) => {
    let cosa = Math.cos(yaw),
        sina = Math.sin(yaw);
    let cosb = Math.cos(pitch),
        sinb = Math.sin(pitch);
    let cosc = Math.cos(roll),
        sinc = Math.sin(roll);
    let Axx = cosa*cosb,
        Axy = cosa*sinb*sinc - sina*cosc,
        Axz = cosa*sinb*cosc + sina*sinc;
    let Ayx = sina*cosb,
        Ayy = sina*sinb*sinc + cosa*cosc,
        Ayz = sina*sinb*cosc - cosa*sinc;
    let Azx = -sinb,
        Azy = cosb*sinc,
        Azz = cosb*cosc;
    let px = points[0];
    let py = points[1];
    let pz = points[2];
    points[0] = Axx*px + Axy*py + Axz*pz;
    points[1] = Ayx*px + Ayy*py + Ayz*pz;
    points[2] = Azx*px + Azy*py + Azz*pz;
    return points;
  }

这是我的渲染器例程的摘录：

 for (let vert of cube.vertex) { let x = vert[0] - camera.position[0], y = vert[1] - camera.position[1], z = vert[2] - camera.position[2]; if (cube.rotation) { cube.rotation += Math.PI * 0.02; let p = rotate(vert.slice(0), cube.r, 0, 0) x = p[0] - camera.position[0] y = p[1] - camera.position[1] z = p[2] - camera.position[2] } # ... draw polygons (cube) by converting 3d coordinates to 2d coordinates. } 

---

见gif 1

因此 ：如果以[0，-1，0]生成立方体，则程序将绕y轴（顺时针）旋转该立方体。 但是将生成物更改为[1，-1，0]可使多维数据集绕同一个点（原点）旋转，但空间为1。我想在生成物上旋转多维数据集！

见gif 2

编辑 ：这是生成多维数据集例程：

spawn(p) {
    this.position = p;
    const vertex = [[-1,-1,-1], [1,-1,-1], [1,1,-1], [-1,1,-1], [-1,-1,1], [1,-1,1], [1,1,1], [-1,1,1]];
    this.vertex = []
    for (let vert of vertex) {
      let position = []
      for (let i=0; i<vert.length; i++) position.push(vert[i]/2 + this.position[i])
      this.vertex.push(position)
    }
}

---

所以我的问题是：如何编辑旋转功能以在要旋转立方体的地方添加原点？

Answer 1

指定旋转点的最简单方法是：

1. 平移（移动）对象，以使旋转点位于原点（0,0,0）
2. 轮换所需金额
3. 与步骤1中的翻译相反。

在（伪）代码中：

var translationVector = originPoint.minus(rotationPoint);
myObject.translate(translationVector);
myObject.rotate(eulerX, eulerY, eulerZ);
myObject.translate(-translationVector);