不会写代码也能做 3D 动画？Remotion Skill + Three.js 全流程指南
做一段 3D 动画，过去需要什么？
你得先学 Blender 或 Maya——建模、贴图、打光、绑骨骼、调动画曲线、设置渲染参数——没几个月下不来。走代码路线更刺激：WebGL 管线、GLSL 着色器、矩阵变换、Three.js 几十个 API——搭一个旋转的立方体要写两百行。
而现在呢？
装好工具，写一句提示词，AI 帮你生成立体场景。Studio 里实时预览，调到你满意了，截图、导出、发朋友圈。
这篇文章告诉你整个流程——不需要你写一行代码。
一、三个东西搭起了这个"魔法"
Remotion Skill：你用嘴说，它写代码
Remotion 本身是一个用 React 做视频的开源框架（GitHub 45K+ Star）。但对你来说，真正重要的是它的 Agent Skill——2026 年 1 月推出的 AI 插件，第一周就被装了 25K+ 次。
装上之后，你在 Claude Code 里用自然语言描述想要的动画，AI 自动把代码写好。左边一个实时预览窗口，效果随时看，不满意随时改。
Three.js / WebGL：浏览器里的 3D 引擎
Three.js 把 WebGL 的复杂性包了起来。你不需要知道什么是顶点缓冲、什么是着色器编译——你只需要知道"我要一个金属球在聚光灯下旋转"，Three.js 负责在屏幕上画出来。
@remotion/three：把 3D 塞进视频里
Remotion 团队专门做了一个桥接包。它让 Three.js 的 3D 场景能和 Remotion 的视频时间线同步——每一帧渲染出来的是什么，导出成 MP4 就是什么。
这三个东西加起来的效果就是：你跟 AI 说一句话，它就帮你生成一段 3D 动画视频。
二、要准备什么？五分钟搞定
你需要的东西非常简单：
1. 装 Node.js
去 nodejs.org 下载，一路点"下一步"就行。这是运行 Remotion 的基础环境。
2. 创建一个 Remotion 项目
打开终端（Windows 上叫"命令提示符"或 PowerShell），输入：
npx create-video@latest它会问你项目叫什么名字，选个默认模板。一分钟搞定。
3. 装 Remotion Skill 和 3D 支持
npx skills add remotion-dev/skills npm i three @react-three/fiber @remotion/three @types/three两行命令，复制粘贴回车。之后你在 Claude Code 里说任何跟 Remotion 有关的话，AI 会自动激活"3D 动画助手"模式。
4. 启动预览
npx remotion studio一个浏览器窗口会自动打开。接下来你生成的每一个 3D 场景，都会在这个窗口里实时显示。
三、真正的问题：怎么把脑子里的画面「说」出来？
环境搭好只花了五分钟。真正的难题在这里：你跟 AI 说"我想要一段很酷的 3D 动画"，AI 的理解和你脑中的画面之间，隔着一道巨大的鸿沟。
文字天然就不是 3D 的载体。 这不是你的问题。
下面四个方法帮你跨过这道鸿沟。它们不需要任何技术背景——需要的是沟通技巧。
方法一：丢参考图（最有效）
找一张跟你想要效果接近的图——概念设计图、电影截图、别人作品的截图，都行。直接把图片拖进 Claude Code 对话框：
"用 Remotion + Three.js 做成这样的感觉。把金色改成蓝色，球体表面再光滑一点。"
一张图能瞬间传达的信息包括：金属质感的反光程度、粒子密度、光线硬度、色彩倾向、构图重心。这些东西用文字写几百字还不一定说清楚。
方法二：分轮迭代，不要一次说完
新手最容易犯的错误：把所有要求写在一段提示词里。结果通常是全盘崩溃。
正确的做法是每轮只调一个维度：
第一句："做一个球体，让它绕 Y 轴慢慢旋转。" （Studio 里看到球转了 → 继续。） 第二句："把球改成玻璃质感，透明的。加一个光源从左上角打过来。" （玻璃球出来了 → 继续。） 第三句："周围加一圈小粒子，像星环一样绕着球。要发光。" 第四句："前两秒粒子慢慢出现，中间一秒突然加速，最后散开。"
四轮对话加起来十分钟。每步都能立刻看到结果，错了马上知道哪一步出问题。比憋一段完美描述然后修半天 bug 快得多。
方法三：效果关键词速查表
你不需要学 3D 软件或着色器语言。但掌握几个"效果关键词"能让沟通效率翻三倍：
你想要的感觉｜这样说就行
金属的，反光的，锐利高光｜"做成金属质感，表面很光滑"
玻璃的，透明的，有折射｜"做成玻璃球的感觉，光线穿过会折射"
霓虹灯一样发光｜"加发光效果，像霓虹灯那样"
星尘、粒子飞舞｜"周围加粒子，像星空里的尘埃"
光线拖尾｜"运动轨迹加一个拖尾的光效"
表面在流动、变形｜"表面要有波动，像水一样"
毛茸茸、磨砂｜"做成磨砂哑光质感"
背景虚化、有景深｜"背景虚化一点，突出前面的物体"
聚光灯暗调｜"用聚光灯打下来，环境暗一点"
卡通扁平风格｜"做成卡通渲染的感觉"
你不需要说出 meshPhysicalMaterial 或 transmission 这种词——你只需要说"透明的玻璃球"，AI 知道怎么做。
方法四：让 AI 反过来问你
如果你完全没想法，直接说：
"我想做一个 Remotion + Three.js 的 3D 场景，但不确定什么参数。你先问我几个问题，我做选择题。"
AI 会问你：几个物体？光源暖的还是冷的？快节奏还是慢悠悠？什么材质感觉？做选择题永远比做填空题容易。
四、3D 动画提示词模板——直接抄
以下提示词经过了实际验证，复制过去改几个字就能用。每条都标注了适合什么场景。
模板一：产品展示风格（最简单）
用 Remotion + Three.js 做一个产品展示动画。 一个 [物体，如：手机/手表/球体] 放在画面正中央， 材质是 [材质：金属/玻璃/磨砂]， 颜色是 [颜色]。 它绕 Y 轴慢慢旋转，速度不要太快，要优雅。 一个点光源从左上方打下来，产生柔和的阴影。 背景是纯色的，要 [背景颜色]。 整个动画持续 [时长，如：6秒]。适合：Logo 展示、产品外观、品牌动画。
模板二：粒子宇宙风格
用 Remotion + Three.js 做一个粒子场景。 画面中央是一个 [物体]， 周围有大量微小发光粒子环绕它。 粒子颜色是 [颜色]， 它们沿着螺旋轨迹慢慢靠近中心物体。 背景是深色太空的感觉。 加一点辉光效果。 持续 [时长，如：8秒]。适合：科技感片头、数据可视化、发布会背景。
模板三：光线与材质风格
用 Remotion + Three.js 做一个光线和材质展示。 一个 [几何体：球体/立方体/圆环] 由 [材质] 制成， [材质效果：透明折射/金属反光/霓虹发光]。 一束光线从左到右扫过它的表面， 光线的 [颜色] 在物体表面产生 [效果]。 相机慢慢环绕物体，展示材质细节。 持续 [时长]。适合：材质研究、设计灵感、概念展示。
模板四：文字 3D 化
把一段文字做成 3D 效果。 文字内容是 [你要的文字]， 用 3D 字体渲染，厚度明显。 文字朝观众方向浮出来， 带一点 [效果：发光/金属/玻璃]。 背景是 [纯色/渐变/星空]。 持续 [时长]。适合：标题动画、海报、社交媒体卡片。
模板五：抽象几何艺术
做一个抽象几何动画。 几个 [几何体类型] 在空间中随机分布， 每个的大小、旋转角度都不同。 它们的材质是 [统一的材质风格]， 配色方案是 [颜色1] + [颜色2] + [颜色3]。 所有物体在缓慢地 [运动方式：浮动/旋转/脉动]， 像一个动态雕塑。 加柔和的灯光和轻微的景深效果。 持续 [时长]。适合：艺术创作、壁纸、概念视频。
你还可以加这些"调味料"
在任何模板后面加上这些短语，用来精确控制效果：
加这句话｜效果
"加一层轻微的 Bloom 后处理"｜发光物体有光晕扩散，更梦幻
"摄像机缓慢环绕物体"｜镜头运动，比固定视角更有电影感
"背景用渐变而不是纯色"｜避免单调
"加景深效果，背景略微模糊"｜主体更突出
"动画开头加一个 ease-in，结尾加 ease-out"｜节奏更自然，不突兀
"第 3 秒到第 5 秒之间物体放大再缩小"｜给动画增加一个"呼吸"节奏
五、从提示词到截图——完整工作流
好，现在你写好了一句提示词（或者从上面模板里选了一个），接下来怎么做？
Step 1：把提示词发给 Claude Code
打开你的 Remotion 项目目录，在 Claude Code 里粘贴提示词。如果安装了 Remotion Skill，Claude 会自动切换到"动画模式"。
Step 2：预览
AI 生成代码后，运行：
npx remotion studio浏览器里会出现实时预览。拖动时间轴可以看到每一帧的效果。
Step 3：迭代
看着预览，告诉 AI 你哪里不满意：
"背景太暗了，调亮一点。" "粒子数量太多了，减少到一半。" "旋转速度太快，慢 30%。"
每改一次，Studio 自动刷新。反复调到满意为止。
Step 4：截图
调好了，截图：
方法 A——截图单帧（推荐，最快）：
npx remotion still <组件名> 输出文件名.png --frame=帧号比如你想截第 3 秒（60fps 下就是第 180 帧）的画面：
npx remotion still My3DScene screenshot.png --frame=180等几秒，一张 1080p 的截图就出来了。换个帧号再截一张——这种"单帧截图"比渲染整段视频快得多。
方法 B——导出整段视频，再截帧：
npx remotion render My3DScene out.mp4渲染完用任意播放器暂停截图。慢但完整——适合需要连续多张截图的场景。
方法 C——直接用 Studio 截图：
Studio 预览窗口里，拖到想要的帧，右键 → 截图保存。最直观，零命令行。
Step 5：用于公众号 / 社交媒体
截好的图是标准 PNG 格式，1080p 分辨率。直接拖进公众号编辑器或者发朋友圈就行。
需要多张图的话，改提示词里的参数（颜色/材质/角度），重复 Step 1-4。五个变体十分钟搞定。
六、诚实地说：这套方案做不到的事
前面讲了它能做什么。现在聊聊它做不到什么——以及什么时候你该放下这个方案，换别的工具。
WebGL 的本质局限
WebGL 跑在浏览器里。浏览器不是专业 3D 渲染器，它的底层是一个网页引擎在模拟 GPU 管线。这意味着：
画质有天花板。 Blender 的 Cycles 光线追踪、Octane 光谱渲染——WebGL 一个都做不到。没有真正的全局光照，没有光线追踪，材质是简化版。画面"干净"但也"假"，缺乏真实渲染器那种微妙的间接光照和材质细节。
场景复杂度被限制。 几万个三角形还能流畅，上了百万就开始掉帧。粒子破万就开始卡。而专业 3D 软件里一个角色模型几百万面是常态。
没有物理模拟。 布料飘动、流体飞溅、刚体碰撞——Blender 里点两下的事，WebGL 里你得自己从零搭，而且搭出来也是简化版。
渲染慢。 一段 30 秒的复杂 3D 场景，可能要渲染几个小时。同类场景在 Blender 里用 GPU 可能几分钟。
WebGPU 还在路上
WebGPU 是下一代标准，比 WebGL 快。但它 2025 年中浏览器才开始初步支持——Firefox 和 Safari 还在追赶，Three.js 对 WebGPU 的支持还是实验性的，API 可能还会变。现在用它做实际项目是赌博。
AI 写的代码也有坑
一句话变 3D 动画确实神奇，但 AI 生成的代码"看起来对、跑起来错"的情况不少见：
简单场景（一个物体、一个光源、旋转动画）：80% 一次跑通
中等复杂（多物体、多材质、粒子系统）：需要 2-3 轮修 bug
复杂场景（自定义着色器、后处理管线）：AI 生成的代码大概率不可用
什么时候换工具？
你的需求｜应该用的工具
做 Logo / 产品 / 数据可视化动画｜Remotion + Three.js ✅
做概念图、社交媒体配图｜Remotion + Three.js ✅
做带角色和场景的短片｜Blender
追求照片级真实感｜Unreal Engine / Blender Cycles
渲染速度是硬需求｜Blender GPU 渲染
简单来说：Remotion + Three.js 是一个"快速出好看画面的工具"，不是一个"电影级渲染引擎"。 用它做截图、做概念、做视觉探索——它极快极轻。但别指望拿它做《沙丘》的 VFX。
七、最佳资料一网打尽
Remotion 相关
资源｜说明
官方文档｜写得极好，优先从这里开始
remotion-template-three｜官方 3D 入门模板，开箱即用
Remotion Workshop｜创始人亲自主讲的 52 分钟免费教程
Make Video With Code｜1.5 小时免费动手实操
ByteGrad: Remotion + Claude Code｜AI 辅助写 Remotion 的实操演示
Claude-Code-Video-Toolkit｜完整工具包——组件 + 转场 + 主题系统
remotion-best-practices 3D 规范｜3D 踩坑避雷大全
Three.js / WebGL
资源｜说明
Three.js 官方文档｜300+ 可运行示例
WebGL2 & GLSL Primer｜从零到精通 GLSL，系统掌握原理
Three.js Bootcamp｜20 小时课程，含 3D 游戏项目（2026.6 更新）
Three.js Journey｜Bruno Simon 的经典课程
WebGL+Three.js 入门与实战｜18 章中文系统课程
开源项目——直接学
项目｜推荐理由
aimees-papercraft-world.com｜源码和 Blender 模型全部开源，最好的学习材料
card-3d-animation｜Remotion + 3D 的最小示例，适合第一次动手
iMoss｜50 万草叶 + 自定义着色器，效果震撼
siri-glsl｜纯着色器复刻 Apple 设计语言
灵感网站——看看天花板在哪
作品｜关键词
bruno-simon.com｜Three.js 互动作品的行业标杆
samsy.ninja｜WebGPU 赛博朋克
jordan-breton.com｜3D 浮岛，FWA Site of the Day
bilal.show｜滚动驱动的 3D 叙事
小结
一句话总结你刚读完的这篇东西：
过去做 3D 动画要学 Blender、学渲染、学编程。现在你只需要一个 Node.js、一句提示词、和一张参考图。
先找一个你喜欢的 3D 参考图，从模板里选一句提示词改改，丢给 Claude Code。Studio 里看到效果了，截图保存。十分钟后你就有了一张自己"说"出来的 3D 画面。