Test Observable.js

Source: Observable Template for Three.js

renderer.domElement
// Continuously updates
{
  while (true) {
    cube.rotation.z += 0.01;
    renderer.render(scene, camera);
    yield null;
  }
}
height = 600
cube = {
  const material = new THREE.MeshNormalMaterial();
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const cube = new THREE.Mesh(geometry, material);
  return cube;
}
scene = {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x001b42);
  scene.add(cube);
  return scene;
}
camera = {
  const fov = 45;
  const aspect = width / height;
  const near = 1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(2, 2, -2)
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  return camera;
}
renderer = {
  const renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(width, height);
  renderer.setPixelRatio(devicePixelRatio);
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", () => renderer.render(scene, camera));
  invalidation.then(() => (controls.dispose(), renderer.dispose()));
  return renderer;
}
THREE = {
  const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
  await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
  return THREE;
}
Back to top