SuperAPI AI 工具集

scaffold-3d-site

通用与其它

查看项目

更新于 10-16 03:03

技能介绍

用途:为 3D 网页项目创建干净、高性能的起始工程,先确认渲染器应用与质量预设两项选择,再执行搭建。

主要能力:提供 Vite SPA(默认,适合纯 3D 体验)或 Next.js(需要 SEO/SSR/营销页、3D 作为岛屿时)两种渲染器;质量预设分 lite(仅核心 3D)与 full(增加动效、后处理、物理),默认 full。

使用方式:第一步创建应用,Vite 用 npm create vite@latest my-3d-site -- --template react-ts,Next.js 用 npx create-next-app@latest my-3d-site --ts --app --eslint。第二步安装 3D 栈,核心为 npm i three @react-three/fiber @react-three/drei 与 npm i -D @types/three;full 预设追加 @react-three/postprocessing postprocessing、@react-three/rapier、gsap @studio-freight/lenis、zustand leva maath;资源工具为 npm i -D @gltf-transform/cli。第三步建立场景骨架目录(components、hooks、shaders、lib、assets/models、assets/textures),提供 Scene.tsx 与 Experience.tsx 示例,并将 Scene 全屏挂载。第四步运行 npm run dev 验证旋转、受光网格与轨道控制正常,并报告开发 URL 与构建结果。第五步交接后续自定义智能体:threejs-architect、r3f-engineer、shader-artist、motion-choreographer、asset-pipeline-engineer、webgl-perf-auditor。

适用场景:需要快速启动 3D/WebGL 网站、产品展示或交互式 3D 体验的开发者。

限制:需保持依赖版本最新,若包 API 变更应先查文档再搭建;资料未提供具体收费、平台兼容范围与性能保证等信息。