SuperAPI AI 工具集

three

设计与创作

查看项目

更新于 10-15 18:28

技能介绍

用途:这是 FrameVideo 中的 Three.js/WebGL 适配模式,用于制作确定性的 3D 合成,例如 3D 产品展示、旋转与分解视图、3D 场景背景、GLTF 模型动画、相机推拉摇移与环绕运动、自定义 WebGL 着色器与后期效果。

主要能力:提供基于 fv-seek 事件的渲染契约——场景状态由 FrameVideo 时间驱动,而非墙上时钟。适配器在每次 seek 时设置 window.__fvThreeTime 并派发 CustomEvent("fv-seek", { detail: { time } })。渲染需监听该事件并在 event.detail.time 处渲染,避免使用 requestAnimationFrame 或 renderer.setAnimationLoop 作为渲染关键运动的来源。

使用方式:同步创建 canvas、scene、camera、renderer 与材质;用 renderer.setSize(1920, 1080, false) 固定输出尺寸并设定 pixelRatio(1);在 fv-seek 回调中按时间更新旋转、相机等状态并调用 renderer.render。对 GLTF 或授权动画片段,使用 mixer.setTime(time) 直接定位,多个 mixer 用同一时间 seek。模型、纹理和 HDRI 需在渲染关键 seek 前加载完成,不要在选择时拉取。编辑后运行 npx framevideo lint 与 npx framevideo validate 校验。

适用场景:确定性的 3D 物体、产品旋转、带种子数据的粒子、着色器画面和基于时间的相机运动。

限制:不适用于 2D 动画(宜用 gsap)、GPU 计算着色器(宜用 typegpu)、简单效果和文字动画。避免使用 Date.now()、performance.now() 或时钟增量更新状态,避免在自由运行的循环中做渲染关键工作,避免在渲染时加载远程资源,避免依赖设备像素比或依赖历史帧的后期处理,除非能从时间重建状态。