0.准备
案例展示
Three.js 官网首页有大量案例
- 3D 绘图工具：https://www.penzil.app/
- 小车物理引擎：https://bruno-simon.com
- 商品展示：https://camera-webgi.vercel.app/
- 音频可视化：https://www.georgeandjonathan.com/#1
- Showroom：https://theshowroom.lvmh.com/
- https://cornrevolution.resn.global/
- https://richardmattka.com
- https://lusion.co
- https://www.oculus.com/medal-of-honor/
- http://letsplay.ouigo.com
- https://zen.ly
- https://prior.co.jp/discover
- https://www.midwam.com
- https://heraclosgame.com
- https://chartogne-taillet.com
- https://live.vanmoof.com/site
Three.js 能做什么
- Web 3D
- 3D 动画
- 通过鼠标、键盘、拖拽等进行交互
Three.js 应用场景
- 全景视图：房产、家装行业、 虚拟展馆
- 电商行业产品的 3D 展示
- 游戏：物理引擎、交互
- ......
学习资料
官方资料
- 项目官网：https://threejs.org/
- 各种示例：https://threejs.org/examples/
- 文档：https://threejs.org/docs/index.html
- 更新日志：https://github.com/mrdoob/three.js/releases
教程
- Three.js Fundamentals 官方教程/文字
- Discover three.js 文字
- Three.js Journey 视频/付费
- Beginning with 3D WebGL 文字/英文
- The Scene: https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene
- Geometry: https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-2-geometry
- Materials: https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-3-materials
- Animation: https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-4-animation
- iceWebGL（WebGL 教程）
书籍
Learn Three.js - Fourth Edition
Physically Based Rendering: From Theory To Implementation
- 第四版：https://www.pbr-book.org/4ed/contents
- 第三版：https://www.pbr-book.org/3ed-2018/contents
- 第三版中译：https://github.com/kanition/pbrtbook
- https://www.amazon.com/Physically-Based-Rendering-fourth-Implementation/dp/0262048027
工具
- 你喜欢的编辑器
- 现代浏览器（首选 Chrome）
- Blender：开源、强大、免费的 3D 图形软件: https://www.blender.org/
