用途:该条目提供 Helios 与 Three.js 集成的组合模式,目标是在制作 3D 动画或集成 WebGL 场景时,由 Helios 逐帧驱动渲染,保证渲染结果确定、时间同步准确。
主要能力:文档说明可通过关闭 React Three Fiber 的内部渲染循环(frameloop="never"),再在 Helios 的 subscribe 回调中用 advance() 手动推进场景状态,实现受控渲染;在原生 Three.js 中则在订阅回调内直接调用 renderer.render()。示例中的 Helios 实例通过 @helios-project/core 创建,可设置 fps、duration、width、height,并挂到 window 上供播放器或渲染器使用。场景组件仍可使用 useFrame,但只会在 advance() 被调用时触发。
使用方式:React Three Fiber 示例为创建 Helios 单例、在 Canvas 的 onCreated 中保存 R3F 状态、用 useEffect 订阅 Helios tick 并以 currentFrame/fps 计算秒数后调用 r3fState.advance(timeInSeconds)。原生 Three.js 示例为初始化 Helios 与 WebGLRenderer、场景、相机、物体,在 helios.subscribe 中按帧计算时间、更新物体旋转并调用 renderer.render()。
适用场景:需要帧级可控、可同步的 3D 动画与 WebGL 渲染流程,例如录制或逐帧渲染场景。
限制与注意:文档仅给出模式示例,未说明性能基准、兼容版本或完整 API;抗锯齿会增加性能开销;frameloop="never" 下静态阴影可能需要手动标记更新;GLTF 等资源建议用 waitUntilStable 或在渲染前确保加载完成,Helios 在 dom 模式下默认等待 window.load,canvas 模式依赖画布就绪。示例源码位于 examples/react-three-fiber/ 与 examples/threejs-canvas-animation/。