title: Putting three.js animation inside of div
body: <p>This is three.js animation code example:</p>
  
  <pre><code>&lt;script defer="defer"&gt;
    var angularSpeed = 0.2; 
    var lastTime = 0;
    function animate(){
      var time = (new Date()).getTime();
      var timeDiff = time - lastTime;
      var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
      plane.rotation.z += angleChange;
      lastTime = time;
      renderer.render(scene, camera);
      requestAnimationFrame(function(){
          animate();
      });
    }
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.y = -450;
    camera.position.z = 400;
    camera.rotation.x = 45 * (Math.PI / 180);
    var scene = new THREE.Scene();
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshNormalMaterial());
    plane.overdraw = true;
    scene.add(plane);
    animate();
   &lt;/script&gt;
  </code></pre>
  
  <p>I would like to bind this animation code to some specific div via div id. So, animation would be displayed inside of div. That would allow me to easily manipulate animation location with css. I was having in mind something like this:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>javascript:  </p>
  
  <pre><code>var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  // do stuff here
  </code></pre>
  
  <p>But I haven't found a way to do something like this with three.js. As you can see in code example, there is no canvas element that I can refer to. Any ideas?</p>