AI 可视化实战营

AI + Three.js实战课程

不再把重点放在“教你一步步手写代码”,而是教你如何控制 AI,稳定地帮你做出可运行、可维护的 Three.js 项目。

为什么我要重写这门课

你还在跟着文档一步步写 Three.js?我已经 4 个月几乎没有写过代码了,更多时候是让 AI 先帮我完成主体实现,我只负责调参数、改细节、做判断。

在更新发动机产品展示项目时,我意识到一个很现实的问题:写步骤文档的时间,和开发项目本身几乎一样长。

但如果把同样的内容交给 AI,让它按照目标去实现,完整复刻一个项目往往只需要 1 到 2 小时。传统的“看文档、跟着敲、慢慢排错”的学习路径,已经不是效率最高的方法了。

真正重要的,不再只是技术细节,而是你能不能把需求说清、把上下文给够、把 AI 控制稳定。

三个关键问题
未来,还需要深入学习技术吗?
跟着文档步骤学习,还是最好的方法吗?
案例开发,真的需要详细的步骤文档吗?

AI 编程已经成熟了,但大多数人不会用

现在的 Claude Code、Codex、Cursor 都很强,但直接说一句“帮我写个 Three.js 场景”,通常只会得到一个不稳定的结果。市场上不缺 Three.js 教程,也不缺 AI 入门课,缺的是让 AI 稳定产出可视化项目的方法论。

直接让 AI 写 Three.js,结果结构混乱,项目越改越难维护。
模型版本、API 版本、依赖关系不对,代码生成了也跑不起来。
会用 AI 聊天,但不会给 AI 足够上下文,效果不稳定。
会写 Three.js,但不会把 AI 变成稳定的协作工具。

案例开发已经变了,学习方式也该变

在这次课程升级中,我自己的案例就是这样完成的:需求先交给对话模型整理,代码交给编程模型落地,样式再交给另一个模型优化。一天完成一个项目,不是因为功能变简单了,而是因为协作方式变了。

需求整理

用 ChatGPT 把目标、交互和页面结构整理清楚。

代码生成

用 Claude Code 负责实现 Three.js 场景、组件和工程代码。

样式优化

用 Gemini 调整视觉细节、文案表达和交互表现。

人工收口

最后只改参数、修细节、做取舍,而不是从零手写。

课程升级后的内容

这门课不再只是一个传统的 Three.js 教程,而是升级为 AI 可视化实战营。课程重心从“教你写代码”切换为“教你控制 AI 帮你写代码”,同时保留 1.0 全套基础内容和 100+ Three.js 案例。

当前已更新 17 章

AI 工具链搭建:Claude Code / OpenCode / Trae 三款主流工具,手把手配置到能用。

第一个 3D 场景:旋转立方体,对比简单提示词和详细提示词的效果差异。

AI 控制方法论:Context7 文档对齐、Claude Skill 专业知识注入,让 AI 用对版本、用对 API。

案例实战:粒子动画、交互式波纹效果、太阳系模拟,分别熟悉 OpenCode、Gemini、ChatGPT 的使用方式。

多工具协作策略:对话工具和编程工具怎么配合,什么场景该用什么工具。

GUI 控制面板:学会实时调参数,掌握 AI 项目的调试方式。

框架集成:Vue + Three.js、R3F(React),用提示词生成完整项目脚手架。

完整实战项目:全程通过 AI 开发,不写一行代码,覆盖需求整理、代码生成、调试排错到修 bug。

1.0 基础课和案例库仍然保留

升级不是推翻原来的内容。原先那套系统化中文 Three.js 教程、100+ 可运行案例、文档 + Demo 的学习方式依然保留,你可以把它当成知识库、手册和案例库来用。

360° 全景浏览器

360° 全景浏览器

Simplex 噪声地形

Simplex 噪声地形

动态泡泡

动态泡泡

曲线路径霓虹隧道

曲线路径霓虹隧道

泛光后期

泛光后期

粒子星系

粒子星系

OutlinePass 高亮描边

OutlinePass 高亮描边

景深 Bokeh

景深 Bokeh

系统化中文文档

从基础到进阶,仍然能按模块系统学习 Three.js 的核心能力。

100+ 可运行案例

每个案例都能直接跑,适合拆解、复用、交给 AI 继续改造。

文档 + 代码 + AI

这套闭环依然有效,只是新版会更强调如何让 AI 真正参与开发。

1.0 课程里的代表性大案例

这三类项目来自 1.0 基础课程,重点体现的是传统 Three.js 工程能力和项目拆解深度,不属于新版 AI 协作实战部分。

1.0 Case
3D 翻书电子书

3D 翻书电子书

一个偏图形学和交互实现的经典案例,重点在于骨骼驱动翻页、射线检测和真实翻书手感。

1.0 Case

电机泵站数字孪生

一个更接近工业业务场景的综合项目,覆盖模型、交互、状态管理、数据回放和监控界面。

1.0 Case

商场楼层导航系统

一个数据驱动的三维业务系统,重点在于楼层结构生成、楼层交互和信息可视化。

你将获得什么

加入之后,不只是拿到一份 Three.js 教程,而是拿到一整套 AI 可视化开发路径。

AI + Three.js 完整实战课程,当前已更新 17 章,并持续增加新内容。

1.0 基础课程完整保留,包含 Three.js 教学体系和 100+ 案例,现在就能完整学习。

AI 提效工具推荐与使用教程,不止讲工具名,更讲实际怎么配合使用。

社群交流与答疑支持,遇到问题可以直接讨论真实项目中的卡点。

年度订阅期内,未来新增课程内容全部包含。

适合谁加入

这门课不是只面向“想系统学 Three.js”的人,也适合已经在写代码、但还没有真正用好 AI 的开发者。

会前端但不敢碰 3D 的开发者

Three.js API 多、工程结构复杂。通过 AI 协作,你不必先啃完全部底层知识,也能先做出结果。

会 Three.js 但不会用 AI 的人

你有基础,但开发效率还停留在手写代码阶段。学会协作方法后,效率提升不是一点点。

想提升 AI 开发效率的前端工程师

课程讲的不是只适用于 Three.js 的技巧,而是可迁移到其他开发工作的 AI 协作方法论。

未来规划

AI + Cesium:地理信息可视化
AI + Babylon:游戏与交互场景
更多 AI 开发方法论:通用的 AI 协作能力

年度订阅期内,所有新增内容免费获得。

怎么加入

年度订阅原价 399 元,新春折扣半价:199 元/年。

一年内所有内容都可以看,后续更新的新课也都包含在内。

折扣期结束后恢复原价,感兴趣的话可以直接联系。

联系方式
微信二维码
sanmu1598

扫码添加好友,直接咨询课程