Play a GLTF animation? three.js

Question

Hi I have been messing around with three.js for the past week or so, I am completely new to the lib so apologies for anything stupid I may say or ask. I have my code which throws no errors but it does have 1 warning:

  three.module.js:18314 THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(193,23-137): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values

I'm not sure if that is important or not but anyway! Everything is working fine the model shows but the problem is it doesn't play any animation what am I doing wrong? here is the code:

import * as THREE from './js/three.module.js';

import {
    RGBELoader
} from './js/RGBELoader.js';
import {
    OrbitControls
} from './js/OrbitControls.js';
import {
    GLTFLoader
} from './js/GLTFLoader.js';
import {
    RoughnessMipmapper
} from './js/RoughnessMipmapper.js';


var container, controls;
var camera, scene, renderergl, model, mixer, clock;

init();
animate();

function init() {

    container = document.createElement('div');
    container.className = "experience-div";
    $('body').prepend(container);


    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 0.6, 5.7);


    scene = new THREE.Scene();
    clock = new THREE.Clock();

    new RGBELoader()

        .load('royal_esplanade_1k.hdr', function(texture) {


            var envMap = pmremGenerator.fromEquirectangular(texture).texture;


            scene.environment = envMap;

            texture.dispose();
            pmremGenerator.dispose();

            render();


            var roughnessMipmapper = new RoughnessMipmapper(renderergl);
            let mixer;
            const loader = new GLTFLoader();
            loader.load('untitled.gltf', function(gltf) {
                const model = gltf.scene;
                scene.add(model);
                mixer = new THREE.AnimationMixer(model);
                gltf.animations.forEach((clip) => {
                    mixer.clipAction(clip).play();
                });
                gltf.scene.traverse(function(child) {

                    if (child.isMesh) {

                        roughnessMipmapper.generateMipmaps(child.material);

                    }

                });



                roughnessMipmapper.dispose();



            });


        });

    renderergl = new THREE.WebGLRenderer({
        antialias: true
    });
    renderergl.setPixelRatio(window.devicePixelRatio);
    renderergl.setSize(window.innerWidth, window.innerHeight);
    renderergl.toneMapping = THREE.ACESFilmicToneMapping;
    renderergl.toneMappingExposure = 0.8;
    renderergl.outputEncoding = THREE.sRGBEncoding;
    container.appendChild(renderergl.domElement);
    $('.experience-div canvas').attr('id', 'canvas');

    var pmremGenerator = new THREE.PMREMGenerator(renderergl);
    pmremGenerator.compileEquirectangularShader();

    controls = new OrbitControls(camera, renderergl.domElement);


    controls.enableKeys = false;
    controls.enableZoom = false;
    controls.enableDamping = true;
    controls.maxPolarAngle = 2.2;
    controls.minPolarAngle = 1.1;
    controls.dampingFactor = 0.1;
    controls.rotateSpeed = 0.2;
    controls.minDistance = 2;
    controls.maxDistance = 500;
    controls.update();


    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderergl.setSize(window.innerWidth, window.innerHeight);

    render();

}



function animate() {
    controls.update();
    requestAnimationFrame(animate);
    var delta = clock.getDelta();
    if (mixer) mixer.update(delta);
    render();

}


function render() {

    renderergl.render(scene, camera);

}

Thank you for any help you can get the model I am using from here: https://ui-unicorn.co.uk/model-key.zip

There seems to be something wrong with your model since no glTF viewer I have tried so far can playback your animations. Tested with sandbox.babylonjs.com and gltf-viewer.donmccurdy.com. Besides, glTF validator reports many issues with the model. BTW: The warning is unrelated to your issue. It's just a DirectX warning that will hopefully be suppressed in future browser version. — Mugen87
@Mugen87 updated model zip to one that works in the 2 viewers but still no luck with the animation playing with the code I am using but it does in both viewers — user3112634
I've taken the code from the official glTF example to create this live example. If just added the glb version of your asset and the animation related code. Seems to work without issues. — Mugen87
@Mugen87 can you make this an answer and ill mark it as correct please — user3112634

Mugen87 Mugen87 · Accepted Answer · 2020-03-16T12:46:53

Try it with this code instead:

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/RGBELoader.js';

var container, controls;
var camera, scene, renderer, mixer, clock;

init();
animate();

function init() {

  container = document.createElement( 'div' );
  document.body.appendChild( container );

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
  camera.position.set( - 2.8, 0.6, 3.7 );

  scene = new THREE.Scene();
  
  clock = new THREE.Clock();

  new RGBELoader()
    .setDataType( THREE.UnsignedByteType )
    .setPath( 'https://threejs.org/examples/textures/equirectangular/' )
    .load( 'royal_esplanade_1k.hdr', function ( texture ) {

      var envMap = pmremGenerator.fromEquirectangular( texture ).texture;

      scene.background = envMap;
      scene.environment = envMap;

      texture.dispose();
      pmremGenerator.dispose();

      // model

  
      var loader = new GLTFLoader();
      loader.load( 'https://cdn.glitch.com/378a8eca-f405-469a-b32e-b603069e5372%2Funtitled.glb?v=1584360698775', function ( gltf ) {

        scene.add( gltf.scene );

        mixer = new THREE.AnimationMixer( gltf.scene );
        
        gltf.animations.forEach( ( clip ) => {
          
            mixer.clipAction( clip ).play();
          
        } );

      } );

    } );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 0.8;
  renderer.outputEncoding = THREE.sRGBEncoding;
  container.appendChild( renderer.domElement );

  var pmremGenerator = new THREE.PMREMGenerator( renderer );
  pmremGenerator.compileEquirectangularShader();

  controls = new OrbitControls( camera, renderer.domElement );
  controls.minDistance = 2;
  controls.maxDistance = 10
  controls.target.set( 0, 0, - 0.2 );
  controls.update();

  window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {
  
  requestAnimationFrame( animate );
  
  var delta = clock.getDelta();
  
  if ( mixer ) mixer.update( delta );

  renderer.render( scene, camera );

}
</script>

three.js R114

Play a GLTF animation? three.js

1 Answers