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

Answer 1

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