title: Issues Loading Multiple GLB models in Three JS
body: <p>So the scope of the project I'm working on is to have a simple character customizer. The gui will generate the different parts such as head, face, hands etc.</p>
  <p>I've used the following as a backbone for the project as I'm still fairly new to ThreeJS and a different stackoverflow topic pointed the person to this example for swapping out models.
  <a href="https://threejs.org/examples/?q=ld#webgl_loader_ldraw" rel="nofollow noreferrer">https://threejs.org/examples/?q=ld#webgl_loader_ldraw</a></p>
  <p>I've been able to get most everything working and stable but the issue I'm running into is that when I try to Load the .glb model the console states that there was an error loading.</p>
  <p>Any help or advice would be much appreciated.</p>
  <p>Here is the Code:</p>
  <pre><code>        import * as THREE from '../build/three.module.js';
          import { OrbitControls } from './jsm/controls/OrbitControls.js';
          import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
          import { GUI } from './jsm/libs/dat.gui.module.js';
          import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';
  
          let container    
          let camera, scene, renderer, controls, gui, guiData;
          let model;
  
          const FemaleModel = 'models/gltf/FemaleModel/';
          
  
              const Face = {
                  'Face 01': 'Female Head 01.glb',
                  'Face 02': 'Female Head 02.glb',
                  'Face 03': 'Female Head 03.glb',
              };
              const Hair = {
                  'Hair 01': 'Female Hair 01.glb',
                  'Hair 02': 'Female Hair 02.glb',
                  'Hair 03': 'Female Hair 03.glb',
              };
  
          init();
          
          render();
  
          function init() {
  
              container = document.createElement( 'div' );
                  document.body.appendChild( container );
  
                  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
                  camera.position.set( 150, 200, 250 );
  
                  //
  
                  renderer = new THREE.WebGLRenderer( { antialias: true } );
                  renderer.setPixelRatio( window.devicePixelRatio );
                  renderer.setSize( window.innerWidth, window.innerHeight );
                  renderer.toneMapping = THREE.ACESFilmicToneMapping;
                  container.appendChild( renderer.domElement );
  
                  // scene
  
                  const pmremGenerator = new THREE.PMREMGenerator( renderer );
  
                  scene = new THREE.Scene();
                  scene.background = new THREE.Color( 0xdeebed );
                  scene.environment = pmremGenerator.fromScene( new RoomEnvironment() ).texture;
  
                  controls = new OrbitControls( camera, renderer.domElement );
  
                  guiData = {
                      hairFileName: Hair[ 'Face 01' ],
                      faceFileName: Face[ 'Face 01' ],
                      
                  };
  
                  window.addEventListener( 'resize', onWindowResize );
  
                  reloadObject( true );
          }   
              
  
          function reloadObject( resetCamera ) {
  
                  if ( model ) {
  
                      scene.remove( model );
  
                  }
  
                  model = null;    
  
                  const loader = new GLTFLoader().setPath(FemaleModel)
  
                  loader.load(guiData.faceFileName, function ( ShowFace ) {
                          if ( ShowFace ) {
  
                              scene.remove( ShowFace );
  
                          }
                          model = ShowFace.scene;
  
                          
  
                          scene.add( model );
  
                          
  
  
                          createGUI();
                          
                          
              }, onError );
              
              
  
             
          }
          function createGUI() {
  
                  if ( gui ) {
  
                      gui.destroy();
  
                  }
  
              gui = new GUI();
  
              gui.add( guiData, 'faceFileName', Face ).name( 'Face' ).onFinishChange( function () {
  
                  reloadObject( true );
  
                  } );
              gui.add( guiData, 'hairFileName', Hair ).name( 'Hair' ).onFinishChange( function () {
  
                  reloadObject( true );
  
                  } );
  
              }
  
             
          function onWindowResize() {
  
              camera.aspect = window.innerWidth / window.innerHeight;
              camera.updateProjectionMatrix();
  
              renderer.setSize( window.innerWidth, window.innerHeight );
  
          }
  
          function onError() {
  
          const message = 'Error loading model';
          
          console.log( message );
  
          }
          
  
          function render() {
  
          renderer.render( scene, camera );
  
          }
      &lt;/script&gt;
  </code></pre>