Three.js for HyperFrames

HyperFrames supports Three.js through its three runtime adapter. The adapter does not own your scene. It publishes HyperFrames time and dispatches a seek event so your composition can render the exact frame.

Contract

• Create the scene, camera, renderer, materials, and assets synchronously when possible.

• Render from HyperFrames time, not wall-clock time.

• Listen for the hf-seek event and render exactly that time.

• Load models, textures, and HDRIs before render-critical seeking. Do not fetch them at seek time.

• Avoid requestAnimationFrame or renderer.setAnimationLoop as the source of truth for render-critical motion.

The adapter sets window.__hfThreeTime and dispatches new CustomEvent("hf-seek", { detail: { time } }) on each seek.

Basic Pattern

<canvas id="three-layer"></canvas>

<script type="module">

  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/+esm";

  const canvas = document.getElementById("three-layer");

  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });

  // Match these to your composition's frame size.

  renderer.setSize(1920, 1080, false);

  renderer.setPixelRatio(1);

  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(35, 1920 / 1080, 0.1, 100);

  camera.position.set(0, 0, 6);

  const mesh = new THREE.Mesh(

    new THREE.IcosahedronGeometry(1.4, 4),

    new THREE.MeshStandardMaterial({ color: 0x64d2ff, roughness: 0.38 }),

  );

  scene.add(mesh);

  scene.add(new THREE.HemisphereLight(0xffffff, 0x223344, 2));

  function renderAt(time) {

    mesh.rotation.y = time * 0.7;

    mesh.rotation.x = Math.sin(time * 0.6) * 0.16;

    renderer.render(scene, camera);

  }

  window.addEventListener("hf-seek", (event) => {

    renderAt(event.detail.time);

  });

  renderAt(window.__hfThreeTime || 0);

</script>

#three-layer {

  width: 100%;

  height: 100%;

  display: block;

}

AnimationMixer Pattern

For GLTF or authored clip animation, seek the mixer directly:

function renderAt(time) {

  mixer.setTime(time);

  renderer.render(scene, camera);

}

If several mixers exist, seek all of them from the same time.

Good Uses

• Deterministic 3D objects, product spins, particles with seeded data, and shader plates.

• Camera moves derived from time.

• GLTF animation clips when assets are local and loaded before validation completes.

Avoid

• Using Date.now(), performance.now(), or clock deltas to update scene state.

• Leaving render-critical work inside a free-running animation loop.

• Loading remote models or textures at render time.

• Device-pixel-ratio dependent output. Pin renderer size and pixel ratio for video renders.

• Post-processing passes that depend on previous frame history unless you can reconstruct state from time.

Validation

After editing a Three.js composition:

npx hyperframes lint

npx hyperframes validate

Credits And References

• HyperFrames adapter source: packages/core/src/runtime/adapters/three.ts.

• Three.js WebGLRenderer docs: https://threejs.org/docs/pages/WebGLRenderer.html

• Three.js AnimationMixer.setTime() docs: https://threejs.org/docs/pages/AnimationMixer.html