更新three.js中的动画蒙皮网格的法线？

Question

我有一个简单的动画模型，整个蒙皮动画，现在给它一个ShaderMaterial，它显示了法线：

gl_FragColor = vec4(vNormal, 1.0);

https://codepen.io/marco_fugaro/pen/ZEEBjKz?editors=0010

问题在于法线不会随着模型的蒙皮更新，并且它们始终与对象的非动画位置保持不变（请参见VertexNormalsHelper）。

如何获取法线以进行更新，或者如何获取动画顶点的法线？

model.geometry.computeVertexNormals()不起作用

Answer 1

我最终得到了猴子的补丁MeshNormalMaterial顶点着色器，并删除了法线相对于相机的逻辑，这是最终代码：

import * as THREE from 'three'
import normalVert from 'three/src/renderers/shaders/ShaderLib/normal_vert.glsl'

// like MeshNormalMaterial, but the normals are relative to world not camera
const normalMaterialGlobalvert = normalVert.replace(
  '#include <defaultnormal_vertex>',
  THREE.ShaderChunk['defaultnormal_vertex'].replace(
    'transformedNormal = normalMatrix * transformedNormal;',
    // take into consideration only the model matrix
    'transformedNormal =  mat3(modelMatrix) * transformedNormal;'
  )
)

然后像这样使用它：

mesh.material = new THREE.ShaderMaterial({
  vertexShader: normalMaterialGlobalvert,
  fragmentShader: `
    varying vec3 vNormal;

    void main() {
      gl_FragColor = vec4(vNormal, 1.0);
    }
  `,
})

感谢gman为我指出正确的方向！