title: Play a GLTF animation? three.js
body: <p>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:</p>
  
  <pre><code>  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
  </code></pre>
  
  <p>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:</p>
  
  <pre><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) =&gt; {
                      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);
  
  }
  </code></pre>
  
  <p>Thank you for any help
  you can get the model I am using from here:
  <a href="https://ui-unicorn.co.uk/model-key.zip" rel="noreferrer">https://ui-unicorn.co.uk/model-key.zip</a></p>