SuperAPI AI 工具集

web-three-r3f

前端与建站

查看项目

更新于 10-15 17:27

技能介绍

用途:该技能作为紧凑的路由器加领域检查清单,用于处理 Three.js、React Three Fiber(R3F)、Drei 相关开发任务,包括 Canvas/createRoot 生命周期、加载器、GLTF、useFrame、资源释放、SSR/客户端边界、DPR 以及浏览器验证。

主要能力:提供场景生命周期、资源加载与回退、释放与性能、交互与事件边界、3D 资产管线与压缩等参考文档;附带审计 CLI、审计报告模板、人工审查清单、起步示例与评测集。

使用方式:先检查目标仓库已安装的包、框架/运行时版本、设计令牌、无障碍策略与既有动效模式;按任务匹配条件再加载对应参考文档;编辑前对照目标仓库实际安装版本核实 API。审计命令:node scripts/audit.mjs doctor --root . --format json;node scripts/audit.mjs scan --root . --format markdown;node scripts/audit.mjs scan --root . --format json --output web-three-r3f-audit.json。脚本结果仅作线索,需对照当前代码核实。收尾时运行仓库的聚焦验证命令、相关审计 CLI,并对改动面做浏览器验证(可用 playwright-cli 读取 canvas 像素、调整尺寸、触发交互并截图/录像,捕获控制台与请求错误)。

适用场景:Web 端 Three.js/R3F 场景开发与审查。决策边界:类型化 WebGPU 管线用 typegpu;Expo/React Native 用 expo-motion;简单 DOM 变换用 CSS 3D;已可运行场景的电影感调色与美术指导路由到 r3f-scene-polish。

限制:需注意父容器高度未定义会导致画布空白;useFrame 内使用 React state 会引发帧循环协调;R3F 自动释放不覆盖所有图元或外部创建对象。浏览器验证工具为可选,缺失时需说明未验证项。具体收费、价格与平台信息暂未提供。