title: FBXLoader: I can't load more than one object
body: <p>I am just trying to follow examples and get myself putting my own models into a scene. However, when using the FBXLoader, I'm not sure what if what I'm doing is right. I can only get one FBX to load at a time. I'm not a coder first, so sorry if my code looks sloppy:</p>
  
  <p>I have an object called range_burners.fbx. It loads in fine by itself. I have a model called range_main.fbx that works just fine by itself. But both of them together, well the range_main.fbx always seems to take precedent.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!-- saved from url=(0022)http://127.0.0.1:1024/ --&gt;
  &lt;html lang="en"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;three.js webgl - FBX loader&lt;/title&gt;
  
          &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
          &lt;style&gt;
              body {
                  font-family: Monospace;
                  background-color: #000;
                  color: #fff;
                  margin: 0px;
                  overflow: hidden;
              }
              #info {
                  color: #fff;
                  position: absolute;
                  top: 10px;
                  width: 100%;
                  text-align: center;
                  z-index: 100;
                  display:block;
              }
              #info a {
                  color: #046;
                  font-weight: bold;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="info"&gt;
              &lt;a href="http://threejs.org/" target="_blank" rel="noopener"&gt;three.js&lt;/a&gt; - FBXLoader&lt;br&gt;
              Character and animation from &lt;a href="https://www.mixamo.com/" target="_blank" rel="noopener"&gt;Mixamo&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;script src="./index_files/three.js.download"&gt;&lt;/script&gt;
  
          &lt;script src="./index_files/inflate.min.js.download"&gt;&lt;/script&gt;
          &lt;script src="./index_files/FBXLoader.js.download"&gt;&lt;/script&gt;
  
          &lt;script src="./index_files/OrbitControls.js.download"&gt;&lt;/script&gt;
  
          &lt;script src="./index_files/Detector.js.download"&gt;&lt;/script&gt;
          &lt;script src="./index_files/stats.min.js.download"&gt;&lt;/script&gt;
  
          &lt;script&gt;
  
              if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  
              var container, stats, controls;
              var camera, scene, renderer, light;
  
              var clock = new THREE.Clock();
  
              var mixers = [];
  
              init();
              animate();
  
              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 );
  
                  var burners = new THREE.FBXLoader();
                  burners.load( '/fbx/range_burners.fbx', function ( object ) {
                      object.traverse( function ( child ) {
                          if( child.material ) {
                              child.material = new THREE.MeshStandardMaterial ( {
                                  color: 0x151515,
                                  metalness: 0.8,
                                  roughness: 0.6
  
                              } );
                          }
                      } )
                      object.position.set(0, 200, 0);
                      scene.add ( object );
                  } );
  
                  // model
                  var range = new THREE.FBXLoader();
                  range.load( '/fbx/range_main.fbx', function ( object2 ) {
                      object2.traverse( function ( child2 ) {
                          if( child2.material ) {
                              child2.material = new THREE.MeshStandardMaterial ( {
                                  color: 0xffffff,
                                  metalness: 0.8,
                                  roughness: 0.4
                              } );
                          }
                      } )
                      object2.position.set(-150, 0, 0);
                      scene.add ( object2 );
                  } );
  
                  //burners
  
  
  
  
                  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 &gt; 0 ) {
  
                      for ( var i = 0; i &lt; mixers.length; i ++ ) {
  
                          mixers[ i ].update( clock.getDelta() );
  
                      }
  
                  }
  
                  renderer.render( scene, camera );
  
                  stats.update();
  
              }
  
          &lt;/script&gt;&lt;div&gt;&lt;canvas width="1920" height="898" style="width: 1920px; height: 898px;"&gt;&lt;/canvas&gt;&lt;div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"&gt;&lt;canvas width="80" height="48" style="width: 80px; height: 48px; display: block;"&gt;&lt;/canvas&gt;&lt;canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"&gt;&lt;/canvas&gt;&lt;canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"&gt;&lt;/canvas&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;canvas width="928" height="898" style="width: 928px; height: 898px;"&gt;&lt;/canvas&gt;&lt;div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"&gt;&lt;canvas width="80" height="48" style="width: 80px; height: 48px; display: block;"&gt;&lt;/canvas&gt;&lt;canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"&gt;&lt;/canvas&gt;&lt;canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"&gt;&lt;/canvas&gt;&lt;/div&gt;&lt;/div&gt;
  
  
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>