gltf 动画不使用平面着色器播放

Question

我正在使用 A-Frame 1.2.0。我在场景中有一个 gltf 模型，我想为此模型添加平面着色器。

 <a-scene vr-mode-ui="enabled: false;"gltf-model="dracoDecoderPath: js/draco/; "renderer="colorManagement: true; alpha: true;">
      <a-entity id="camera-rig">
                <a-camera id="camera" position="0 1.65 0" pivot="0 0 0" cursor="fuse:false;"></a-camera>
      </a-entity>
      <a-assets timeout="10000">
                <a-asset-item id="CesiumMan" src="assets/models/CesiumMan.gltf" response-type="arraybuffer"></a-asset-item>
      </a-assets>
      <a-gltf-model src="#CesiumMan" flat-shader="true" position='0 0 0' animation-mixer="clip:*"></a-gltf-model>
</a-scene>

我的平面着色器代码来自

const FlatShader = {
    schema: {default: true} ,

  init() {
    this.el.addEventListener('object3dset', this.update.bind(this));
  },//init

  update() {
    const mesh = this.el.getObject3D('mesh');
    const { data } = this;
    if (!mesh) {
      return;
    }
    mesh.traverse(function(node) {
      if (node.isMesh && data) {
        const mat1 = new THREE.MeshBasicMaterial();
        node.material = mat1;
        node.material.needsUpdate = true;
      }
    });

  },//update

}; // FlatShader

export default FlatShader

平面着色器工作正常，但添加平面着色器后，模型动画不工作。模型保持静止姿势。

知道是什么导致了这个问题吗？我可能遗漏了一些东西，但我不知道如何解决这个问题。

Answer 1

在 a-frames 版本的 threejs（修改 125）中，您需要“告诉”material，您的模型使用“蒙皮”制作动画：

 material.skinning = true;

自三r.129this is no longer necessary

因此，您只需将材料 skinning 属性更改为 true:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // wait for the model to load
      this.el.addEventListener("model-loaded", evt => {
        // create new material - with it skinning flag raised
        const new_material = new THREE.MeshNormalMaterial({skinning: true});
        const mesh = this.el.getObject3D('mesh');

        // traverse the mesh and apply the material
        mesh.traverse(node => {
          if (!node.isMesh) return;
          node.material = new_material;
          node.material.needsUpdate = true;
        })
      })
    }
  })

</script>
<a-scene>
  <a-assets>
    <a-asset-item id="model" src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/20656ea38ce797a8dff0d2915b656aff75d32a71/2.0/CesiumMan/glTF-Binary/CesiumMan.glb"></a-asset-item>
  </a-assets>
    <a-entity position="1 0 -3" gltf-model="#model" animation-mixer="clip: *" foo></a-entity>
  <a-entity position="-1 0 -3" gltf-model="#model" animation-mixer="clip: *"></a-entity>
</a-scene>

铯人模型来自Kronos Group glTF sample models repo

gltf 动画不使用平面着色器播放

gltf animations are not playing with flat shader

shader

aframe

gltf