Поместить анимацию three.js в div

Это пример кода анимации 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>

Я хотел бы связать этот код анимации с каким-то конкретным div через div id. Таким образом, анимация будет отображаться внутри div. Это позволило бы мне легко манипулировать местоположением анимации с помощью CSS. Я имел в виду что-то вроде этого:

HTML:

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

JavaScript:

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

Но я не нашел способа сделать что-то подобное с помощью three.js. Как вы можете видеть в примере кода, нет элемента canvas, на который я мог бы сослаться. Есть идеи?

Ответы на вопрос(2)

Ваш ответ на вопрос