Este es el ejemplo del código de animación three.js:

<script defer="defer">
  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();
 </script>

Me gustaría enlazar este código de animación a algún div específico a través de div id. Entonces, la animación se mostraría dentro de div. Eso me permitiría manipular fácilmente la ubicación de la animación con css. Estaba pensando en algo como esto:

html:

<canvas id="myCanvas" width="578" height="200"></canvas>

javascript:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do stuff here

Pero no he encontrado una manera de hacer algo como esto con three.js. Como puede ver en el ejemplo de código, no hay ningún elemento de lienzo al que pueda referirme. ¿Algunas ideas?