threelisted

# 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 ```html <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