网页加 3D 不再难：three.js 与 R3F 的 5 个必装 Skill
从第一个旋转的立方体到可交互的产品展示，每个环节都有现成 Skill 托底。
掘技出品 · 3D 开发
这些场景，你大概也遇到过
想给公司官网加个 3D 展示，three.js 文档看了一半就劝退了
小红书 · 前端摸鱼日记
React Three Fiber 装好了，Canvas 一开页面直接白屏，报错都看不懂
知乎 · 前端开发者
模型加载进来几百万个面，页面卡成 PPT，完全不知道怎么优化
即刻 · 创意 coding
这些散布在小红书 / 知乎 / 即刻 / X 上的真实心声,拼在一起就是大家做「three.js 与 React Three Fiber 3D 网页开发」时的日常痛点。
懒人方案 · 推荐
装一次掘技,让 Agent 自己找 Skill
你要做的「three.js 与 React Three Fiber 3D 网页开发」任务,对应的 Skill 觅游都有。但你不需要一个个找 —— 装了掘技(deep-skill-finder)后,Agent 接到任务会自动搜索觅游 50000+ Skill 库,把匹配当前任务的方法推荐给你。你只管说要做什么,匹配 Skill 的事交给 Agent。
复制口令 → 粘贴给 Claude Code / Codex / Cursor / WorkBuddy / CatPaw 等 · Agent 会自动完成安装:
请安装 deep-skill-finder 技能:从 https://www.meyo.life/skill-finder 下载技能压缩包,解压到本地技能目录并启用。
也可以往下看常用场景 Skill。想深入了解掘技 → meyo.life/skill
3 个开发环节 × 真实 Skill
可以都装,也可以看名字挑 1 到 2 个装。不用担心装错,免费,不满意随时卸。
3D 场景搭建
从零搭起第一个可交互 3D 场景
适合 3D 零基础的前端
260+ 人在用
17+ 人在用
💬 加入掘技社群
和其他掘技用户交流「three.js 与 React Three Fiber 3D 网页开发」经验 · 掘技团队会解答装配问题
进群备注你做的事
常见问题
Q: three.js 和 React Three Fiber 怎么选？
A: 纯 JS 项目直接用 three.js；如果页面本身就是 React 技术栈，R3F 用组件化方式管理 3D 场景更顺手，两者底层能力一致。
Q: 零基础能做出 3D 网页吗？
A: 可以。three-js 和 r3f-fundamentals 这类 Skill 会按步骤指导场景搭建、相机、灯光和渲染循环，照着做第一个旋转立方体十几分钟就能跑起来。
Q: 模型文件从哪里来？
A: 常用 glTF/GLB 格式，可以从 Sketchfab 等平台下载或用 Blender 导出；drei 里有现成的加载组件，几行代码就能挂进场景。
Q: 页面加载 3D 场景很卡怎么办？
A: 常见做法是压缩模型面数、使用 Draco 压缩、按需渲染而不是每帧渲染；three-js Skill 内置性能最佳实践清单，照着排查即可。
Q: 这些 Skill 收费吗？
A: Skill 本身在掘技社区免费下载，页面卡片上的数字是真实安装量；部分 Skill 运行时调用 LLM 会消耗模型额度，与 Skill 本身无关。
Q: 移动端能跑 WebGL 吗？
A: 现代移动浏览器都支持 WebGL，但要注意降分辨率和触摸交互适配；建议从简单场景起步，实测帧率后再加特效。