我用 Claude Code + Three.js，把落地页做成了一部“互动电影”
3.2K views · 2026-08-21
UI Design
我一直想测试一件事：
Claude Code + Three.js + WebGL，到底可以把一个 Landing Page 推到什么程度？
这次我没有让 AI 简单地“做几个炫酷的 3D Section”。
我换了一个完全不同的思路：把整个网站当成一部可以滚动控制的互动电影。
0:00 intro
0:05 demo video
1:35 intro project
2:41 inspiration
3:27 kage 架构来源于design code
6:38 skills
7:06 webgl components
9:34 build
10:31 showcase the landing page
不是：
Section 1 → 一个动画Section 2 → 另一个动画Section 3 → 再一个动画
而是：一个持续存在的 3D 世界
* Scroll 控制摄影机
* 每个章节都是一个真正设计过的镜头。
在这支视频里，我会分享我是怎么用 Claude Code 帮我完成 Film DNA Landing Page，以及我在这个过程中学到的 Three.js / WebGL 工作流。
你会看到我如何结合：
• Three.js / WebGL• React Three Fiber• GSAP + ScrollTrigger• 滚动控制摄影机• Procedural 3D Environment• DOM + WebGL 分层• 前景 / 中景 / 背景空间设计• Fog、Lighting 和 Atmosphere• Foreground Cutout• Cinematic Post Processing• Claude Code AI Coding Workflow
我这次最大的发现是：一个好的 Three.js 网站，并不是“所有东西都做成 3D”。
真正重要的是：
摄影构图
* Camera
* Lighting
* Depth
* Motion
* Typography
* UI
这些东西组合起来，网页才会开始拥有“电影感”。
我也开始把这次开发过程中学到的方法拆成可以重复使用的 Claude Code / Codex Skills。
例如：
Cinematic Scene DirectorScroll Camera DirectorCinematic World BuilderWebGL + DOM Depth ComposerAtmospheric LightingCinematic Post Processing
这样以后做新的 Three.js 网站，就不需要每一次都重新告诉 AI 应该怎么做。
视频里提到的
Design code :https://www.youtube.com/@DesignCodeTeam
https://canvasui.dev/docs/components/liquid
https://reactbits.dev/pro/components
这次制作的网站是我正在开发的新产品：
Film DNA
Film DNA 想探索的是另一种 AI 电影制作方式。
不是让用户不停学习 Prompt Engineering。
而是做成project DNA
这些真正影响影片质量的“导演决策”，变成一个结构化的 Production System。
我的目标是：
不要只生成一个 Shot。而是建立一整部 Film。
如果你对这些内容感兴趣：
Three.jsWebGLClaude CodeAI CodingCreative CodingAI FilmmakingCinematic WebsiteAI Agent Workflow
Copyright free music :https://www.youtube.com/watch?v=X5cfg26vkOQ
欢迎订阅。
我会继续记录 Film DNA 从产品设计、Three.js 网站、AI Agent、模型路由到真正产品开发的完整过程。
#ClaudeCode #ThreeJS #WebGL #CreativeCoding #AICoding
Claude Code + Three.js + WebGL，到底可以把一个 Landing Page 推到什么程度？
这次我没有让 AI 简单地“做几个炫酷的 3D Section”。
我换了一个完全不同的思路：把整个网站当成一部可以滚动控制的互动电影。
0:00 intro
0:05 demo video
1:35 intro project
2:41 inspiration
3:27 kage 架构来源于design code
6:38 skills
7:06 webgl components
9:34 build
10:31 showcase the landing page
不是：
Section 1 → 一个动画Section 2 → 另一个动画Section 3 → 再一个动画
而是：一个持续存在的 3D 世界
* Scroll 控制摄影机
* 每个章节都是一个真正设计过的镜头。
在这支视频里，我会分享我是怎么用 Claude Code 帮我完成 Film DNA Landing Page，以及我在这个过程中学到的 Three.js / WebGL 工作流。
你会看到我如何结合：
• Three.js / WebGL• React Three Fiber• GSAP + ScrollTrigger• 滚动控制摄影机• Procedural 3D Environment• DOM + WebGL 分层• 前景 / 中景 / 背景空间设计• Fog、Lighting 和 Atmosphere• Foreground Cutout• Cinematic Post Processing• Claude Code AI Coding Workflow
我这次最大的发现是：一个好的 Three.js 网站，并不是“所有东西都做成 3D”。
真正重要的是：
摄影构图
* Camera
* Lighting
* Depth
* Motion
* Typography
* UI
这些东西组合起来，网页才会开始拥有“电影感”。
我也开始把这次开发过程中学到的方法拆成可以重复使用的 Claude Code / Codex Skills。
例如：
Cinematic Scene DirectorScroll Camera DirectorCinematic World BuilderWebGL + DOM Depth ComposerAtmospheric LightingCinematic Post Processing
这样以后做新的 Three.js 网站，就不需要每一次都重新告诉 AI 应该怎么做。
视频里提到的
Design code :https://www.youtube.com/@DesignCodeTeam
https://canvasui.dev/docs/components/liquid
https://reactbits.dev/pro/components
这次制作的网站是我正在开发的新产品：
Film DNA
Film DNA 想探索的是另一种 AI 电影制作方式。
不是让用户不停学习 Prompt Engineering。
而是做成project DNA
这些真正影响影片质量的“导演决策”，变成一个结构化的 Production System。
我的目标是：
不要只生成一个 Shot。而是建立一整部 Film。
如果你对这些内容感兴趣：
Three.jsWebGLClaude CodeAI CodingCreative CodingAI FilmmakingCinematic WebsiteAI Agent Workflow
Copyright free music :https://www.youtube.com/watch?v=X5cfg26vkOQ
欢迎订阅。
我会继续记录 Film DNA 从产品设计、Three.js 网站、AI Agent、模型路由到真正产品开发的完整过程。
#ClaudeCode #ThreeJS #WebGL #CreativeCoding #AICoding