人工精选 飞豹客前端开发 会员免费
学习 Three.js 的最佳课程 - Three.js Journey - The ultimate Three.js course
如果你已经在写前端，但一碰到「网页里放个 3D 场景」就卡住，或者照着别人的例子能跑、自己换需求就无从下手，这套 Three.js Journey 是值得花时间啃的。它不讲空泛的图形学理论，而是围绕一个很具体的场景：用浏览器把模型、材质、灯光、相机和交互组装成一个能跑、能改、能上线的 3D 页面。学
单课价¥19.90新品 上架
会员可免费下载本篇月会员、年会员、永久会员可按日额度下载（每篇扣 1 次）。
开通会员 ›购买本课销量 0 · 永久有效
会员价 · 单课标价 ¥19.90
会员 A · 按档位折扣
永久免费可下
年免费可下
月免费可下
周免费可下
会员 B
VIP¥3.98低至
SVIP单买¥200 内可领
游客按标价购买，不享受上表折扣。
支付成功后自动发放网盘链接，链接失效可找客服免费补
正版保障 极速发货 售后无忧
如果你已经在写前端，但一碰到「网页里放个 3D 场景」就卡住，或者照着别人的例子能跑、自己换需求就无从下手，这套 Three.js Journey 是值得花时间啃的。它不讲空泛的图形学理论，而是围绕一个很具体的场景：用浏览器把模型、材质、灯光、相机和交互组装成一个能跑、能改、能上线的 3D 页面。学完之后，你至少能独立完成产品展示页、可旋转的模型预览、带调试面板的交互场景这类需求，而不是只会复制一段初始化代码。
它解决的是「会写页面但不会写 3D」这道坎
多数前端对 DOM、事件、组件很熟，但 WebGL 那一层是黑箱：为什么要有场景、相机、渲染器三件套，为什么模型加载慢、为什么动画掉帧，出了问题不知道从哪查。这套内容从 WebGL 与 Three.js 的关系讲起，把渲染循环、坐标系、相机类型这些底层概念铺开，再往上叠几何体、材质、光照、纹理、动画和交互。它的价值不在于教你几个效果，而在于让你建立一套可复用的排查思路——画面不显示、模型不出现、动画不生效时，知道按什么顺序去定位。
适合什么基础，先看哪几块
前提是你能读懂现代 JavaScript，会用 npm 或构建工具跑本地项目，对 HTML、CSS 不陌生。完全没写过 JS 的话，先补语言基础再来，否则会卡在语法而不是图形上。有 React 或 Vue 经验更好，因为后面把 3D 场景嵌进组件是常见需求，但这不是硬门槛。
建议的进入顺序：先看介绍和 WebGL 原理那部分，把「为什么用 Three.js」想清楚；接着是相机、几何体、材质与光照这几块，这是所有场景的地基，务必自己敲一遍；然后再进动画、调试面板和交互相关内容。调试面板那一节别跳过，它是你后续独立调参、对比效果的主要工具，很多人做不出效果就是因为不会调。物理、着色器、性能优化这类偏进阶的内容，可以等基础场景跑顺了再回头看。
学完能独立做什么，资料怎么配合练
把主体内容过完并动手做完，你应该能独立搭建一个带光照和材质的场景，加载外部模型并让它动起来，用相机和控制器实现旋转、缩放、漫游，加上调试面板实时改参数，最后打包进现有前端项目。往深一点，着色器部分能让你做出自定义的材质和过渡效果，这是区分「会用」和「会做」的地方。
练习方式上，别只看视频。每看完一节就关掉视频自己复现一遍，跑通后再故意改参数看结果怎么变，比如换相机类型、调光照强度、改动画缓动。视频和字幕适合第一遍跟做，遇到卡壳的地方再回看对应片段。素材和示例建议边看边改，把同一个场景改成你自己的主题，比原样跑一遍有用得多。整个过程按周推进，别贪快，3D 的坑基本都在细节里，慢就是快。
课程目录
课程目录135 集
- 课程介绍 学习 Three.js 的最佳课程 - Three.js Journey - The ultimate Three.js course 属于前端开发方向的教程资源，围绕 前端开发 相关内容整理。 内容涵盖：Three js Journey、─
- 01 Introduction、─
- 05 Animations、─
- 06 Cameras、─
- 08 Geometries、─
- 09 Debug UI 等主题。 适合希望系统学习 前端开发 、需要完整资料对照的同学。 下方为完整资料与目录，可先看目录判断是否符合需要。 738.学习 Three.js 的最佳课程 - Three.js Journey - The ultimate Three.js course ├── 01 — Introduction.mp4
- ├──
- 01 — Introduction.srt ├──
- 01 — Introduction.vtt ├──
- 02 — What is WebGL and why use Three.js.mp4
- ├──
- 02 — What is WebGL and why use Three.js.srt ├──
- 02 — What is WebGL and why use Three.js.vtt ├──
- 03 — First Three.js Project.mp4
- ├──
- 03 — First Three.js Project.srt ├──
- 03 — First Three.js Project.vtt ├──
- 04 — Transform objects.mp4
- ├──
- 04 — Transform objects.srt ├──
- 04 — Transform objects.vtt ├── 05 — Animations.mp4
- ├──
- 05 — Animations.srt ├──
- 05 — Animations.vtt ├── 06 — Cameras.mp4
- ├──
- 06 — Cameras.srt ├──
- 06 — Cameras.vtt ├──
- 07 — Fullscreen and resizing.mp4
- ├──
- 07 — Fullscreen and resizing.srt ├──
- 07 — Fullscreen and resizing.vtt ├── 08 — Geometries.mp4
- ├──
- 08 — Geometries.srt ├──
- 08 — Geometries.vtt ├──
- 09 — Debug UI.mp4
- ├──
- 09 — Debug UI.srt ├──
- 09 — Debug UI.vtt ├── 10 — Textures.mp4
- ├──
- 10 — Textures.srt ├──
- 10 — Textures.vtt ├── 11 — Materials.mp4
- ├──
- 11 — Materials.srt ├──
- 11 — Materials.vtt ├── 12 — 3D Text.mp4
- ├── 12 — 3D Text.srt ├── 12 — 3D Text.vtt ├──
- 13 — Go live.mp4
- ├──
- 13 — Go live.srt ├──
- 13 — Go live.vtt ├── 14 — Lights.mp4
- ├──
- 14 — Lights.srt ├──
- 14 — Lights.vtt ├── 15 — Shadows.mp4
- ├──
- 15 — Shadows.srt ├──
- 15 — Shadows.vtt ├──
- 16 — Haunted House.mp4
- ├──
- 16 — Haunted House.srt ├──
- 16 — Haunted House.vtt ├── 17 — Particles.mp4
- ├──
- 17 — Particles.srt ├──
- 17 — Particles.vtt ├──
- 18 — Galaxy Generator.mp4
- ├──
- 18 — Galaxy Generator.srt ├──
- 18 — Galaxy Generator.vtt ├──
- 19 — Scroll based animation.mp4
- ├──
- 19 — Scroll based animation.srt ├──
- 19 — Scroll based animation.vtt ├── 20 — Physics.mp4
- ├──
- 20 — Physics.srt ├──
- 20 — Physics.vtt ├──
- 21 — Imported models.mp4
- ├──
- 21 — Imported models.srt ├──
- 21 — Imported models.vtt ├──
- 22 — Raycaster and Mouse Events.mp4
- ├──
- 22 — Raycaster and Mouse Events.srt ├──
- 22 — Raycaster and Mouse Events.vtt ├──
- 23 — Custom models with Blender.mp4
- ├──
- 23 — Custom models with Blender.srt ├──
- 23 — Custom models with Blender.vtt ├──
- 24 — Environment map.mp4
- ├──
- 24 — Environment map.srt ├──
- 24 — Environment map.vtt ├──
- 25 — Realistic render.mp4
- ├──
- 25 — Realistic render.srt ├──
- 25 — Realistic render.vtt ├──
- 26 — Code structuring for bigger projects.mp4
- ├──
- 26 — Code structuring for bigger projects.srt ├──
- 26 — Code structuring for bigger projects.vtt ├── 27 — Shaders.mp4
- ├──
- 27 — Shaders.srt ├──
- 27 — Shaders.vtt ├──
- 28 — Shader patterns.mp4
- ├──
- 28 — Shader patterns.srt ├──
- 28 — Shader patterns.vtt ├──
- 29 — Raging sea.mp4
- ├──
- 29 — Raging sea.srt ├──
- 29 — Raging sea.vtt ├──
- 30 — Animated galaxy.mp4
- ├──
- 30 — Animated galaxy.srt ├──
- 30 — Animated galaxy.vtt ├──
- 31 — Modified materials.mp4
- ├──
- 31 — Modified materials.srt ├──
- 31 — Modified materials.vtt ├──
- 32 — Coffee Smoke Shader.mp4
- ├──
- 32 — Coffee Smoke Shader.srt ├──
- 32 — Coffee Smoke Shader.vtt ├──
- 33 — Hologram Shader.mp4
- ├──
- 33 — Hologram Shader.srt ├──
- 33 — Hologram Shader.vtt ├──
- 34 — Fireworks Shaders.mp4
- ├──
- 34 — Fireworks Shaders.srt ├──
- 34 — Fireworks Shaders.vtt ├──
- 35 — Lights Shading Shaders.mp4
- ├──
- 35 — Lights Shading Shaders.srt ├──
- 35 — Lights Shading Shaders.vtt ├──
- 36 — Raging Sea Shading Shaders.mp4
- ├──
- 36 — Raging Sea Shading Shaders.srt ├──
- 36 — Raging Sea Shading Shaders.vtt ├──
- 37 — Halftone Shading Shaders.mp4
- ├──
- 37 — Halftone Shading Shaders.srt ├──
- 37 — Halftone Shading Shaders.vtt ├──
- 38 — Earth shaders.mp4
- ├──
- 38 — Earth shaders.srt ├──
- 38 — Earth shaders.vtt ├──
- 39 — Particles Cursor Animation Shader.mp4
- ├──
- 39 — Particles Cursor Animation Shader.srt ├──
- 39 — Particles Cursor Animation Shader.vtt ├──
- 40 — Particles Morphing Shader.mp4
- ├──
- 40 — Particles Morphing Shader.srt ├──
- 40 — Particles Morphing Shader.vtt ├──
- 41 — GPGPU Flow Field Particles Shaders.mp4
- ├──
- 41 — GPGPU Flow Field Particles Shaders.srt ├──
- 41 — GPGPU Flow Field Particles Shaders.vtt ├──
- 42 — Wobbly Sphere Shader.mp4
- ├──
- 42 — Wobbly Sphere Shader.srt ├──
- 42 — Wobbly Sphere Shader.vtt ├──
- 43 — Sliced Model Shader.mp4
- ├──
- 43 — Sliced Model Shader.srt ├──
- 43 — Sliced Model Shader.vtt ├──
- 44 — Procedural Terrain Shader.mp4
- ├──
- 44 — Procedural Terrain Shader.srt ├──
- 44 — Procedural Terrain Shader.vtt ├── 45 — Post-processing.mp4
- ├──
- 45 — Post-processing.srt ├──
- 45 — Post-processing.vtt ├──
- 46 — Performance tips.mp4
- ├──
- 46 — Performance tips.srt ├──
- 46 — Performance tips.vtt ├──
- 47 — Intro and loading progress.mp4
- ├──
- 47 — Intro and loading progress.srt ├──
- 47 — Intro and loading progress.vtt ├──
- 48 — Mixing HTML and WebGL.mp4
- ├──
- 48 — Mixing HTML and WebGL.srt ├──
- 48 — Mixing HTML and WebGL.vtt ├──
- 49 — Creating a scene in Blender.mp4
- ├──
- 49 — Creating a scene in Blender.srt ├──
- 49 — Creating a scene in Blender.vtt ├──
- 50 — Baking and exporting the scene.mp4
- ├──
- 50 — Baking and exporting the scene.srt ├──
- 50 — Baking and exporting the scene.vtt ├──
- 51 — Importing and optimizing the scene.mp4
- ├──
- 51 — Importing and optimizing the scene.srt ├──
- 51 — Importing and optimizing the scene.vtt ├──
- 52 — Adding details to the scene.mp4
- ├──
- 52 — Adding details to the scene.srt ├──
- 52 — Adding details to the scene.vtt ├──
- 53 — What are React and React Three Fiber.mp4
- ├──
- 53 — What are React and React Three Fiber.srt ├──
- 53 — What are React and React Three Fiber.vtt ├──
- 54 — First React Application.mp4
- ├──
- 54 — First React Application.srt ├──
- 54 — First React Application.vtt ├──
- 55 — First React Three Fiber Application.mp4
- ├──
- 55 — First React Three Fiber Application.srt ├──
- 55 — First React Three Fiber Application.vtt ├── 56 — R3F and Drei.mp4
- ├── 56 — R3F and Drei.srt ├── 56 — R3F and Drei.vtt ├──
- 57 — Debug a R3F application.mp4
- ├──
- 57 — Debug a R3F application.srt ├──
- 57 — Debug a R3F application.vtt ├──
- 58 — Environment and Staging with R3F.mp4
- ├──
- 58 — Environment and Staging with R3F.srt ├──
- 58 — Environment and Staging with R3F.vtt ├──
- 59 — Load models with R3F.mp4
- ├──
- 59 — Load models with R3F.srt ├──
- 59 — Load models with R3F.vtt ├── 60 — 3D Text with R3F.mp4
- ├── 60 — 3D Text with R3F.srt ├── 60 — 3D Text with R3F.vtt ├──
- 61 — Portal Scene with R3F.mp4
- ├──
- 61 — Portal Scene with R3F.srt ├──
- 61 — Portal Scene with R3F.vtt ├──
- 62 — Mouse Events with R3F.mp4
- ├──
- 62 — Mouse Events with R3F.srt ├──
- 62 — Mouse Events with R3F.vtt ├──
- 63 — Post-processing with R3F.mp4
- ├──
- 63 — Post-processing with R3F.srt ├──
- 63 — Post-processing with R3F.vtt ├──
- 64 — Fun and Simple Portfolio with R3F.mp4
- ├──
- 64 — Fun and Simple Portfolio with R3F.srt ├──
- 64 — Fun and Simple Portfolio with R3F.vtt ├──
- 65 — Physics with R3F.mp4
- ├──
- 65 — Physics with R3F.srt ├──
- 65 — Physics with R3F.vtt ├──
- 66 — Create a game with R3F.mp4
- ├──
- 66 — Create a game with R3F.srt ├──
- 66 — Create a game with R3F.vtt ├──
- 67 — The end.mp4
- ├──
- 67 — The end.srt ├──
- 67 — The end.vtt ├── 738.学习 Three.js 的最佳课程 - Three.js Journey - The ultimate Three.js course_文件目录.txt ├── Three.js Journey - The ultimate Three.js course.txt └── github.txt
同类课程
和你正在看的这门一个方向
前端开发 会员免费
查看详情1
永久有效 · 网盘发货
¥0.10会员免费
前端开发 会员免费
查看详情妙码学院《2025大前端架构师训练营》
永久有效 · 网盘发货
¥29.90会员免费
前端开发 会员免费
查看详情Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战
永久有效 · 网盘发货
¥29.90会员免费
前端开发 会员免费
查看详情Vibe Coding 实战开发指南 用Claude Code Cursor和Codex极速打造全栈应用
永久有效 · 网盘发货
¥29.90会员免费
前端开发 会员免费
查看详情不用深厚基础的 Codex 商用 Web 项目开发 + 变现完整教学包
永久有效 · 网盘发货
¥29.90会员免费
前端开发 会员免费
查看详情AI编程实战课：VUE+Django+MySQL开发大型网站项目，从入门到项目落地，AI助力编程小白逆袭
永久有效 · 网盘发货
¥29.90会员免费