javascript - 如何按照 vanilla webgl 中的 THREE.js 解决方案中所述绕枢轴点旋转对象？

Question

我想使用 webgl 围绕枢轴点进行变换。灵感来自 Three.js 和 this comment

Create a object that will act as pivot:

mesh.position.y = 10;

var pivot = new THREE.Object3D(); pivot.add( mesh );

scene.add( pivot );

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

  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]
});

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

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

基于 gman 的回答这有效:

r.makeTransform('root', {
  translate: [0, 0, 0],
  rotate: [0.0, u.PI, 0.0]
});

r.drawMesh('sample', {
  transform: 'root',
  translate: [100.0, 0.0, 0.0]
});

<小时/>

THREE.js 默认如何围绕对象中心旋转？

因为几何图形中的顶点被定义为使得对象中心位于 0,0 原点。

喜欢here

 var x = ix * segmentWidth - widthHalf;

或here

  for (let i = 0; i < vertices.length; i+=3) {
    vertices[i] -= widthHalf;
    vertices[i+1] -= heightHalf;
    vertices[i+2] -= depthHalf;
  }

Answer 1

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

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 

因此，您可以将任何 Three.js 场景图转换为简单的矩阵数学。如果是

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

然后你的场景图看起来像

scene
 └─pivot
    └─mesh

所以你需要结束

projectionMatrix * viewMatrix * sceneMatrix * pivotMatrix * meshMatrix

或者换个 Angular 看

modelMatrix = sceneMatrix * pivotMatrix * meshMatrix

projectMatrix * viewMatrix * modelMatrix

场景图本身只是一种以通用且灵活的方式轻松组织矩阵的方法，而不是对所有数学进行硬编码。

注意:sceneMatrix 通常是恒等，因此您可以将其省略，但从技术上讲， Three.js 中的场景是场景图中的另一个节点，因此它本身代表一个矩阵。