Skip to main content

timer

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.176.0/+esm",
        "xnew": "https://unpkg.com/xnew@5.0.x/dist/xnew.mjs",
        "xnew/addons/xthree": "https://unpkg.com/xnew@5.0.x/dist/addons/xthree.mjs"
      }
    }
  </script>
  <script type="module" src="./script.js"></script>
</head>

<body style="margin: 0; height: 100vh;">
  <div id="main" style="width: 100%; height: 100%;"></div>
</body>

</html>
script.js
import xnew from 'xnew';
import xthree from 'xnew/addons/xthree';
import * as THREE from 'three';

xnew('#main', Main);

function Main(self) {
  const screen = xnew(xnew.Screen, { width: 800, height: 400 });
  xthree.initialize({ canvas: screen.element });
  xthree.camera.position.set(0, 0, +100);
  xthree.scene.fog = new THREE.Fog(0xa0a0a0, 10, 300);

  xnew(Light);
  xnew.interval(() => {
    xnew(Cube);
  }, 50);
}

function Light(self) {
  const object = xthree.nest(new THREE.DirectionalLight(0xFFFFFF, 1));
  object.position.set(0, 0, 1);
}

function Cube(self) {
  const size = 10 * Math.random() + 5;

  const geometry = new THREE.BoxGeometry(size, size, size);
  const material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF * Math.random() });
  const object = xthree.nest(new THREE.Mesh(geometry, material));

  object.position.x = 100 * (Math.random() - 0.5);
  object.position.y = 100 * (Math.random() - 0.5);
  object.position.z = 100 * (Math.random() - 0.5);

  const velocity = {};
  velocity.x = Math.random() - 0.5;
  velocity.y = Math.random() - 0.5;
  velocity.z = Math.random() - 0.5;

  // finalize after 5000ms
  xnew.timeout(() => self.finalize(), 5000);

  self.on('update', () => {
    object.position.x += velocity.x;
    object.position.y += velocity.y;
    object.position.z += velocity.z;
    object.rotation.y += 0.01;
    object.rotation.x += 0.01;
  })
}