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.
}

See gif 1

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

See 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

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

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

在（伪）代码中：

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

如何旋转3D点？

1 个答案: