# FBXLoader: Loaded two FBX models into scene, but only one can be animated

**URL:** <https://discourse.threejs.org/t/fbxloader-loaded-two-fbx-models-into-scene-but-only-one-can-be-animated/4498>\
**Category:** Questions\
**Tags:** fbx-loader, animation\
**Created:** [October 14, 2018, 4:37pm UTC](https://discourse.threejs.org/t/fbxloader-loaded-two-fbx-models-into-scene-but-only-one-can-be-animated/4498 "2018-10-14T16:37:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![liiijz](https://avatars.discourse-cdn.com/v4/letter/l/d9b06d/32.png) [@liiijz](https://discourse.threejs.org/u/liiijz)\
**Post date:** [October 14, 2018, 4:37pm UTC](https://discourse.threejs.org/t/fbxloader-loaded-two-fbx-models-into-scene-but-only-one-can-be-animated/4498/1 "2018-10-14T16:37:40Z")

</div>

two models loaded into scene, only one can be animated

---

<div class="post-metadata">

**Author:** ![liiijz](https://avatars.discourse-cdn.com/v4/letter/l/d9b06d/32.png) [@liiijz](https://discourse.threejs.org/u/liiijz)\
**Post date:** [October 15, 2018, 12:04am UTC](https://discourse.threejs.org/t/fbxloader-loaded-two-fbx-models-into-scene-but-only-one-can-be-animated/4498/4 "2018-10-15T00:04:21Z")

</div>

**The code just did some modifications on example**

```auto
if (WEBGL.isWebGLAvailable() === false) {

  document.body.appendChild(WEBGL.getWebGLErrorMessage());

}

var container, stats, controls;
var camera, scene, renderer, light;

var clock = new THREE.Clock();

var mixers = [];

init();
animate();

function loadModel(file) {
  var loader = new THREE.FBXLoader();
  loader.load(file, function (object) {
    object.mixer = new THREE.AnimationMixer(object);
    mixers.push(object.mixer);
    var action = object.mixer.clipAction(object.animations[0]);
    action.play();
    object.traverse(function (child) {
      if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
      }
    });
    scene.add(object);
  });
}

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

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.set(100, 200, 300);

  controls = new THREE.OrbitControls(camera);
  controls.target.set(0, 100, 0);
  controls.update();

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xa0a0a0);
  scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);

  light = new THREE.HemisphereLight(0xffffff, 0x444444);
  light.position.set(0, 200, 0);
  scene.add(light);

  light = new THREE.DirectionalLight(0xffffff);
  light.position.set(0, 200, 100);
  light.castShadow = true;
  light.shadow.camera.top = 180;
  light.shadow.camera.bottom = -100;
  light.shadow.camera.left = -120;
  light.shadow.camera.right = 120;
  scene.add(light);

  // scene.add( new THREE.CameraHelper( light.shadow.camera ) );

  // ground
  var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
  mesh.rotation.x = - Math.PI / 2;
  mesh.receiveShadow = true;
  scene.add(mesh);

  var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
  grid.material.opacity = 0.2;
  grid.material.transparent = true;
  scene.add(grid);

  // model
  loadModel('models/fbx/Samba Dancing.fbx');
  loadModel('models/fbx/Samba Dancing.fbx');

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  container.appendChild(renderer.domElement);

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

  // stats
  stats = new Stats();
  container.appendChild(stats.dom);

}

function onWindowResize() {

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

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

}

//

function animate() {

  requestAnimationFrame(animate);

  if (mixers.length > 0) {

    for (var i = 0; i < mixers.length; i++) {

      mixers[i].update(clock.getDelta());

    }

  }

  renderer.render(scene, camera);

  stats.update();

}

```

---

<div class="post-metadata">

**Author:** ![liiijz](https://avatars.discourse-cdn.com/v4/letter/l/d9b06d/32.png) [@liiijz](https://discourse.threejs.org/u/liiijz)\
**Post date:** [October 15, 2018, 12:10am UTC](https://discourse.threejs.org/t/fbxloader-loaded-two-fbx-models-into-scene-but-only-one-can-be-animated/4498/5 "2018-10-15T00:10:49Z")

</div>

![CA30AD00-AF33-4C65-9585-128A6B64B923](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/b/b8a74196cd6d1da825de7015ffd639536ce879d0.gif)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [October 15, 2018, 4:51am UTC](https://discourse.threejs.org/t/fbxloader-loaded-two-fbx-models-into-scene-but-only-one-can-be-animated/4498/6 "2018-10-15T04:51:41Z")

</div>

This snippet is incorrect:

```javascript
for (var i = 0; i < mixers.length; i++) {

  mixers[i].update(clock.getDelta());

}

```

[THREE.Clock](https://threejs.org/docs/#api/en/core/Clock)’s `getDelta()` method returns the time since the last time it was called, so calling it in a loop will give extremely small values for the second model. Instead, store the value in a variable before entering the loop.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [October 15, 2018, 8:55am UTC](https://discourse.threejs.org/t/fbxloader-loaded-two-fbx-models-into-scene-but-only-one-can-be-animated/4498/7 "2018-10-15T08:55:12Z")

</div>

> This snippet is incorrect:

Actually it’s like that in the example. I’ve been meaning to fix it for ages but it keeps slipping my mind 😅