title: How to load gLTF in three.js
body: <p>I am trying to upload a gLTF file using three.js but it is not working for me. I've been getting errors that I fixed doing a little research but still I have a black screen. One of the fixes was to add this to my chrome target directory</p>
  
  <pre><code>‘path to your chrome installation\chrome.exe --allow-file-access-from-files’ 
  </code></pre>
  
  <p>and that fixed my problem but when I open the console I still get this
  <a href="https://i.stack.imgur.com/9AD76.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9AD76.png" alt="enter image description here"></a> </p>
  
  <p>Can someone help me? I am just trying to display the 'DamagedHelmet.gltf' file on the screen with three.js</p>
  
  <p>Sometimes the error comes back and this is what it looks like
  <a href="https://i.stack.imgur.com/FivB7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FivB7.png" alt="enter image description here"></a>
  JS code</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Three.js Crash Course&lt;/title&gt;
  
      &lt;style&gt;
  
          body{
  
              margin: 0;
  
          }
  
          canvas{
  
              width: 100%;
              height: 100%;
          }
  
      &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;script src="js/three.js"&gt;&lt;/script&gt;
          &lt;script src="js/OrbitControls.js"&gt;&lt;/script&gt;
          &lt;script src="js/GLTFLoader.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
  
          //To display anything we need three things: scene, camera, renderer.
  
               var scene = new THREE.Scene();
              var camera = new THREE.PerspectiveCamera(75/*POV*/, window.innerWidth / window.innerHeight/*aspect ratio so it takes on the size of the screen*/, 0.1, 1000);
  
              var renderer = new THREE.WebGLRenderer();//API for rendering/processing 2D and 3D to browsers
              renderer.setSize(window.innerWidth, innerHeight);//size you want it to render which is size of screen/area
              document.body.appendChild(renderer.domElement);//Add the renderer to the HTML document/canvas
  
              controls = new THREE.OrbitControls(camera, renderer.domElement);
              //-------create shape you need geometry, material/apperance and cube
  
              var loader = new THREE.GLTFLoader();
  
              loader.load(
      // resource URL
      'models/gltf/duck/gLTF/duck.gltf',
      // called when the resource is loaded
      function ( gltf ) {
  
          scene.add( gltf.scene );
          camera.position.z = 5;
          gltf.animations; // Array&lt;THREE.AnimationClip&gt;
          gltf.scene; // THREE.Scene
          gltf.scenes; // Array&lt;THREE.Scene&gt;
          gltf.cameras; // Array&lt;THREE.Camera&gt;
          gltf.asset; // Object
  
      },
      // called when loading is in progresses
      function ( xhr ) {
  
          console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  
      },
      // called when loading has errors
      function ( error ) {
  
          console.log( 'An error happened' );
  
      }
  );
  
  
              var animate = function(){
  
  
                  requestAnimationFrame(animate);
                  //cube.rotation.x +=0.01;
                  //cube.rotation.y +=0.01;
                  renderer.render(scene, camera);
              }
  
  
  
              animate();
          &lt;/script&gt;
      &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>