保持 vertexShader 的运动，尽管它的网格旋转

Question

我只是沿着 y 轴移动立方体的顶点。

它工作正常，但是当我开始旋转我的立方体时，运动停留在全局 y 轴上。有谁知道如何防止这种行为？意思是让我的顶点的旋转和移动分开？

https://codepen.io/michaelgrc/pen/JjrMVPm?editors=0010

void main()
{
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);

    float deplacement = sin(uTime) * 2.;
    modelPosition.y += deplacement;

    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectedPosition = projectionMatrix * viewPosition;

    gl_Position = projectedPosition;
}

Answer 1

矩阵运算不是Commutative。你实际做的是在应用 modelMatrix:

之后翻译模型

v' = translate * modelMatrix * v;

但是您必须先应用翻译：

v' = modelMatrix * translate * v;

例如：

void main()
{
    mat4 translate = mat4(1.0);
    translate[3].y = sin(uTime) * 2.0;
    vec4 modelPosition = modelMatrix * translate * vec4(position, 1.0);

    gl_Position = projectionMatrix * viewMatrix * modelPosition;
}

请注意，使用 Group 也可以实现同样的效果。必须将旋转应用到 Group 并将平移应用到 Group 中的 Mesh。

group = new THREE.Group();
group.add(mesh);

mesh.position.y = offset;
group.rotation.x = angle_x;
group.rotation.y = angle_y;

保持 vertexShader 的运动，尽管它的网格旋转

Keep movement of vertexShader despite of its mesh rotation

javascript

three.js

vertex-shader