CODEWITHSUNDEEP
shaderaframegltf
Kaan Tosunoğlu
Kaan Tosunoğlu

Reputation: 13

gltf animations are not playing with flat shader

I am using A-Frame 1.2.0. I have a gltf model on scene and I want to add flat shader this model.

 <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>

And my flat shader code is from here

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

Flat shader is working but after added flat shader, model animations are not working. Model stays in its static pose.

Any ideas what could be causing the problem ? I may be missing something, but i have no clue how to solve this.

Upvotes: 1

Views: 473

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

In a-frames version of threejs (modified 125) , You need to "tell" the material, that your model utilizes "skinning" for animations:

 material.skinning = true;

Since three r.129 this is no longer necessary

So, all you need is to change the Materials skinning property to true:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/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>

Cesium man model is from the Kronos Group glTF sample models repo

Upvotes: 2

Related Questions