title: Why three.js object is not rendering to my canvas?
body: <p><strong>Hello guys I'm trying to render this webgl object to my own canvas because i want to style it but it don't what I&quot;m doing wrong because it's not working. I can not figure out how to render a Three-js scene in a canvas. I tried</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var renderer = new THREE.WebGL1Renderer({
      canvas: canvas1Ref
  });</code></pre>
  </div>
  </div>
  </p>
  <p><strong>but i don't know why it's not working</strong></p>
  <p><strong>javascript code</strong></p>
  <pre><code>
  //scene
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      .01,
      1000
  );
  
  var canvas1Ref = document.getElementById(&quot;canvas1&quot;);
  //renderer
  var renderer = new THREE.WebGL1Renderer({
      canvas: canvas1Ref
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  //controls
  /*
  var controls = new THREE.OrbitControls(camera,renderer.domElement);
  controls.update();*/
  
  var loader = new GLTFLoader();
  
  //car
  var object;
  loader.load(&quot;3d-object/tented-car/scene.gltf&quot; , function(gltf){
      object = gltf.scene;
      scene.add(gltf.scene);
  });
  
  //bg
  scene.background = new THREE.Color(0x000000);
  
  //light 
  var light = new THREE.DirectionalLight(0xffffff, 1.7, 10);
  scene.add(light);
  
  light.shadow.mapSize.width = 512; // default
  light.shadow.mapSize.height = 512; // default
  light.shadow.camera.near = 5; // default
  light.shadow.camera.far = 500; // default
  
  
  camera.position.set(0,1,5);
  
  
  
  function animate(){
      requestAnimationFrame(animate);
      object.rotation.y += 0.004
      renderer.render(scene, camera);
  }
  
  animate();
  </code></pre>
  <p><strong>html code</strong></p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;3d model&lt;/title&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      
      &lt;h1&gt;hello world&lt;/h1&gt;
  
      &lt;canvas id=&quot;object1&quot;&gt;
  
      &lt;/canvas&gt;
  
  
  
  
      &lt;script src=&quot;modules/three.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;modules/OrbitControls.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;module&quot; src=&quot;modules/GLTFLoader.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;module&quot; src=&quot;object.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;```
  
  **Also I get this error**
  [Error][1]
  [1]: https://i.stack.imgur.com/fULSe.png
  
  
  **Thanks in advance**
  </code></pre>