Three.js for HyperFrames
HyperFrames 通过其 three 运行时适配器支持 Three.js。适配器不拥有您的场景。它会发布 HyperFrames 时间并触发一个 seek 事件，以便您的合成可以渲染出精确的帧。
合约
- 尽量同步创建场景、摄像机、渲染器、材质和资产。
- 基于 HyperFrames 时间渲染，而非墙钟时间。
- 监听
hf-seek事件并精确渲染该时间点。 - 在渲染关键性 seek 操作之前加载模型、纹理和 HDRIs。不要在 seek 时获取它们。
- 避免将
requestAnimationFrame或renderer.setAnimationLoop作为渲染关键运动的唯一时间源。
适配器设置 window.__hfThreeTime 并在每次 seek 时触发 new CustomEvent("hf-seek", { detail: { time } })。
基础模式
<canvas id="three-layer"></canvas>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
const canvas = document.getElementById("three-layer");
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
// 将这些值匹配到您的合成帧大小。
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 模式
对于 GLTF 或编写好的剪辑动画，直接 seek 混合器：
function renderAt(time) {
mixer.setTime(time);
renderer.render(scene, camera);
}
如果有多个混合器，都从同一个 time 进行 seek。
良好用途
- 确定性 3D 对象、产品旋转、带种子数据的粒子以及着色器面板。
- 从
time派生的摄像机运动。 - GLTF 动画剪辑（当资产为本地且在验证完成前已加载时）。
避免
- 使用
Date.now()、performance.now()或时钟增量来更新场景状态。 - 将渲染关键工作留在自由运行的动画循环中。
- 在渲染时加载远程模型或纹理。
- 设备像素比依赖的输出。固定渲染器大小和像素比以用于视频渲染。
- 依赖于上一帧历史的后处理通道，除非您能根据时间重建状态。
验证
编辑 Three.js 合成后：
npx hyperframes lint
npx hyperframes validate
致谢和参考
- HyperFrames 适配器源码：
packages/core/src/runtime/adapters/three.ts。 - Three.js
WebGLRenderer文档：https://threejs.org/docs/pages/WebGLRenderer.html - Three.js
AnimationMixer.setTime()文档：https://threejs.org/docs/pages/AnimationMixer.html