title: Three.js basics – Can't find variable – GLTFLoader animation
body: <p>I’ve got very basic knowledge of JS. Following three.js docs <a href="https://threejs.org/docs/#manual/en/introduction/Loading-3D-models" rel="nofollow noreferrer">Loading 3D models</a> I have succesfully rendered 3D object and centered it:</p>
  <pre><code>const loader = new GLTFLoader();
  
  loader.load( 'Duck.gltf', function ( duck ) {
      
      const model = duck.scene
      const box = new THREE.Box3().setFromObject( model );
      const center = new THREE.Vector3();
      box.getCenter( center );
      model.position.sub( center ); // center the model
      scene.add( model );
  
  }, undefined, function ( error ) {
  
      console.error( error );
  
  } );
  </code></pre>
  <p>I would like to animate it now, begining with simple rotation:</p>
  <pre><code>/**
   * Animate
   */
  
  const clock = new THREE.Clock()
  
  const tick = () =&gt;
  {
  
      const elapsedTime = clock.getElapsedTime()
  
      // Update objects
      model.rotation.y = .5 * elapsedTime
  
      // Update Orbital Controls
      // controls.update()
  
      // Render
      renderer.render(scene, camera)
  
      // Call tick again on the next frame
      window.requestAnimationFrame(tick)
  }
  
  tick()
  </code></pre>
  <p>But the problem is console returns:</p>
  <pre><code>ReferenceError: Can't find variable: model
  </code></pre>