Javascript 如何围绕轴点旋转对象，如vanilla webgl中的THREE.js解决方案所述？

我想使用webgl围绕轴心点进行变换。灵感来源于Three.js和

创建将用作轴的对象：

网格位置y=10

var pivot=new THREE.Object3D； pivot.add网格

scene.addpivot

我试图将轴设置到某个点并旋转对象。以下是我执行这些操作的代码：

  let transforms = {};

  this.makeTransform = (name, transform) => {

    transforms[name] = modelMatrix(transform);

  };

  const modelMatrix = transform => {
    let matrix = transforms[transform.transform] || mat4.identity();

    return mat4.transform(matrix, transform);
  };


  const mvpMatrix = modelMatrix => {
    const { pos: camPos, target, up } = camera;
    const { fov, aspect, near, far } = camera;

    let camMatrix = mat4.lookAt(camPos, target, up);
    let viewMatrix = mat4.inverse(camMatrix);

    let projectionMatrix = mat4.perspective(fov, aspect, near, far);

    let viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);

    return mat4.multiply(viewProjectionMatrix, modelMatrix);
  };



  this.drawMesh = (name, transform) => {    
    const uMatrix = mvpMatrix(modelMatrix(transform));
    // set uMatrix as uniform and draw
  }

使用呈现代码：

r.makeTransform('root', {
  translate: [100, 0, 0]
});

r.drawMesh('sample', {
  transform: 'root',
  translate: [0.0, 0.0, 2.0],
  rotate: [0.0,
           Math.PI,
           0.0]
});

所以我没有场景图，但我制作了变换矩阵并将它们应用于对象。这里的示例网格应用了根变换。这将在x轴上平移对象，并且仍然围绕其原点旋转对象

但我无法使用上述方法围绕轴心点旋转对象

根据gman的回答，这是可行的：

默认情况下，THREE.js如何围绕对象的中心旋转？ 因为定义几何体中的顶点时，对象中心位于0,0原点

像

或

---

场景图只是表示矩阵层次结构的一种方法。这是一个简单的人类场景图

root
 └─base
    └─waist
       ├─chest
       │  ├─neck
       │  │  └─head
       │  ├─left arm
       │  │  └─left forearm
       │  │     └─left hand
       │  └─right arm
       │     └─right forearm
       │        └─right hand
       ├─left thigh
       │  └─left leg
       │     └─left foot
       └─right thigh
          └─right left
             └─right foot

所以要画右臂就要基于刻板的webgl矩阵数学了

projectionMatrix * viewMatrix * rootMatrix * baseMatrix
   * waistMatrix * chestMatrix * rightArmMatrix * rightForeArmMatrix
   * rightHandMatrix 

因此，看看你可以将任意三个.js场景图转换成简单的矩阵数学。如果是

scene.add(pivot);
pivot.add(mesh);

然后你的场景图看起来像

scene
 └─pivot
    └─mesh

所以你需要以

projectionMatrix * viewMatrix * sceneMatrix * pivotMatrix * meshMatrix

或者换个角度看

modelMatrix = sceneMatrix * pivotMatrix * meshMatrix

projectMatrix * viewMatrix * modelMatrix

scenegraph本身只是一种简化的方法，它以一种通用和灵活的方式组织矩阵，而不是硬编码所有的数学

注意：sceneMatrix通常是标识，因此可以省略它，但从技术上讲，three.js中的场景是场景图中的另一个节点，因此它本身表示一个矩阵

scene
 └─pivot
    └─mesh

projectionMatrix * viewMatrix * sceneMatrix * pivotMatrix * meshMatrix

modelMatrix = sceneMatrix * pivotMatrix * meshMatrix

projectMatrix * viewMatrix * modelMatrix