Tag: threejs
All the articles with the tag "threejs".
1. 开篇词
Published:at 00:003D 是前端的一个重要分支，而 Three.js 是最主流的 3D 渲染框架。
10. 材质颜色和纹理贴图
Published:at 00:00所有的物体，不管是网格模型 Mesh、点模型 Points、还是线模型 Line，都是由几何体和材质构成。
100. 实战：酷家乐装修编辑器（四）
Published:at 00:00上节初始化了 Three.js，并实现了 2D、3D 的切换：
101. 实战：酷家乐装修编辑器（五）
Published:at 00:00上节在 json 里添加了墙的数据，并且把它绘制了出来：
102. 实战：酷家乐装修编辑器（六）
Published:at 00:00上节把洞挖好了：
103. 实战：酷家乐装修编辑器（七）
Published:at 00:00上节把窗户绘制出来了：
104. 实战：酷家乐装修编辑器（八）
Published:at 00:00门窗绘制好了，这节来绘制地板、天花板：
105. 实战：酷家乐装修编辑器（九）
Published:at 00:00我们墙、门、窗、地板、天花板都绘制完成后，这节来绘制一些具体的户型：
106. 实战：酷家乐装修编辑器（十）
Published:at 00:00上节绘制了最简单的一个户型：
107. 实战：酷家乐装修编辑器（十一）
Published:at 00:00上节绘制了一个相对复杂的户型：
108. 实战：酷家乐装修编辑器（十二）
Published:at 00:003D 部分的户型绘制告一段落：
109. 实战：酷家乐装修编辑器（十三）
Published:at 00:00上节我们把 2D 视图画出来了：
11. uv 坐标和 uv 动画
Published:at 00:00上节学了材质的颜色、颜色贴图（或者叫纹理贴图），这节继续来学下纹理相关的 uv 坐标。
110. 实战：酷家乐装修编辑器（十四）
Published:at 00:00上节修复了 2D 视图绘制的一些问题：
111. 实战：酷家乐装修编辑器（十五）
Published:at 00:00上节把 2D 视图的门窗画了出来：
112. 实战：酷家乐装修编辑器（十六）
Published:at 00:00上节实现了尺寸标注：
113. 实战：酷家乐装修编辑器（十七）
Published:at 00:00上节实现了户型列表和户型切换：
114. 实战：酷家乐装修编辑器（十八）
Published:at 00:00上节做了家具导入：
115. 实战：酷家乐装修编辑器（十九）
Published:at 00:00上节把家具的平移、旋转等编辑功能实现了：
116. 实战：酷家乐装修编辑器（二十）
Published:at 00:00上节把编辑后的家具数据保存到了 store 并做了持久化：
117. 实战：酷家乐装修编辑器（二十一）
Published:at 00:00上节把家具在 2D 视图画了出来。
118. 实战：酷家乐装修编辑器（二十二）
Published:at 00:00这节我们来修复一个问题：
119. 实战：酷家乐装修编辑器（二十三）
Published:at 00:00这节我们来做家具列表的功能：
12. 如何画各种曲线
Published:at 00:00有时候我们需要在 3D 场景中画一些曲线。
120. 实战：酷家乐装修编辑器（二十四）
Published:at 00:00上节加了家具列表：
121. 实战：酷家乐装修编辑器（二十五）
Published:at 00:00上节实现了拖拽家具列表中的家具到房子的任意位置：
122. 实战：酷家乐装修编辑器（二十六）
Published:at 00:00上节实现了拖拽家具到 3D 场景：
123. 实战：酷家乐装修编辑器（二十七）
Published:at 00:00上节用 draco 压缩了模型，并且加了 loading：
124. 实战：酷家乐装修编辑器（二十八）
Published:at 00:00在酷家乐里，当你编辑完之后可以点击渲染进入全景浏览：
125. 实战：酷家乐装修编辑器（二十九）
Published:at 00:00上节初始化了全景浏览这个场景：
126. 实战：酷家乐装修编辑器（三十）
Published:at 00:00上节实现了基本的全景浏览功能：
127. 实战：酷家乐装修编辑器（三十一）
Published:at 00:00上节实现了删除：
128. 实战：酷家乐装修编辑器（三十二）
Published:at 00:00这节我们把选中家具时的信息面板做一下：
129. 实战：酷家乐装修编辑器（三十三）：和酷家乐对比
Published:at 00:00学完基础后，我们来做了这个综合实战项目：酷家乐装修编辑器
13. 实战：云雷纹
Published:at 00:00记得小学的时候考完试，离交卷还早，我就会在草稿纸上乱花一些花纹。
130. 实战：酷家乐装修编辑器（三十四）：项目总结
Published:at 00:00这节我们来总结一下我们做这个项目的过程。
131. 实战：实现酷家乐同款拖拽旋转控制器
Published:at 00:00之前做酷家乐项目的时候，我们是用的 TransformControls 来做的平移、旋转操作：
132. 实战：实现酷家乐同款拖拽旋转控制器（二）
Published:at 00:00上节实现了框选效果：
133. 实战：实现酷家乐同款拖拽旋转控制器（三）
Published:at 00:00上节把箭头加上了：
134. 实战：实现酷家乐同款拖拽旋转控制器（四）
Published:at 00:00上节实现了拖拽：
135. 实战：实现酷家乐同款拖拽旋转控制器（五）
Published:at 00:00上节把旋转箭头画出来了：
136. API 查缺补漏：MathUtils
Published:at 00:00学到这里，其实 Three.js 的各种 api 就都差不多都用过了。
137. API 查缺补漏：Euler
Published:at 00:00这节继续来过其他 api，这节来过一下 Euler
138. API 查缺补漏：Quaternion、Matrix4
Published:at 00:00前面过了遍 MathUtils 和 Euler 的 api，这节过一下剩下的 Quaternion、Matrix4 的 api
139. react-three-fiber：组件化开发 3D 场景
Published:at 00:00前面我们都是在 react 项目里用原生 three.js api 来操作 3D 场景。
14. 按照规律生成各种几何体
Published:at 00:00前面讲过，几何体是由顶点构成的，。
140. 物理引擎 cannon：实现真实世界的物理现象
Published:at 00:00现实的世界中，存在重力，物体会下落，下落到地面会弹起，物体和物体可以碰撞、反弹。
141. 物理引擎 cannon：凸多面体生成各种形状
Published:at 00:00上节我们用 cannon 实现了立方体下落反弹的物理效果：
142. 物理引擎 cannon：小球发射
Published:at 00:00射击游戏里，我们鼠标点击可以发射子弹，子弹碰到物体，会有各种物理效果，比如撞倒物体。
143. 物理引擎 cannon：小球发射（二）
Published:at 00:00上节把场景画了出来：
144. 物理引擎 cannon：小球发射（三）
Published:at 00:00上节定义了物理世界，实现了给小球一个推力，让它滚动撞击立方体：
145. cannon 实战：打保龄球
Published:at 00:00其实学了物理引擎 cannon 之后，我们能做一些带物理效果的游戏了，比如打保龄球：
146. cannon 实战：打保龄球（二）
Published:at 00:00上节画了保龄球的 3D 场景：
147. cannon 实战：打保龄球（三）
Published:at 00:00上节实现了打保龄球的基本效果：
148. cannon 实战：打保龄球（四）
Published:at 00:00上节实现了鼠标拖动来发球：
149. cannon 物理引擎：铰链和向心力
Published:at 00:00前面用过 cannon 物理引擎的推力、摩擦力、弹力等，但物理世界可不止这些作用力。
15. 实战：隧道穿梭
Published:at 00:00学完按照规律生成各种几何体，我们可以生成各种形状的管道：
150. cannon 物理引擎：旋转、向心力
Published:at 00:00上节学了铰链，但并没有体现出向心力来，这节我们来做一个能体现向心力的案例：
151. cannon 物理引擎：弹簧效果
Published:at 00:00生活中经常可以看到各种弹簧的效果。
152. cannon 物理引擎：弹簧效果（二）
Published:at 00:00上节画了弹簧：
153. 骨骼动画的重定向
Published:at 00:003D 场景中可能有好多人物，有的人物模型有跳舞的骨骼动画，有的没有。
154. 骨骼动画的重定向（二）
Published:at 00:00上节加载了人物模型，播放了各自的骨骼动画：
155. 粒子效果库 three.quarks
Published:at 00:00这节我们来学习一个粒子效果库 three.quarks
156. 粒子实战：小猪爱心发射器
Published:at 00:00入门了粒子库 three.quarks 之后，我们来做一个练习：
157. 各种形状的粒子发射器
Published:at 00:00前面我们用过点状粒子发射器 PointEmitter：
158. 粒子生命周期行为控制
Published:at 00:00上节学了各种形状的粒子发射器，但它们还是有些呆板。
159. 粒子实战：火树银花
Published:at 00:00不知道大家小时候有没有放过这种烟花：
16. uv 动画实战：无限时空隧道
Published:at 00:00上节我们实现了一个隧道效果：
160. 粒子的帧动画
Published:at 00:00前面的粒子效果都是用同一个图片：
161. 粒子实战：小鱼吐泡泡
Published:at 00:00这节我们来做一个粒子动画的实战，小鱼吐泡泡：
162. 粒子实战：小鱼吐泡泡（二）
Published:at 00:00上节实现了小鱼吐泡泡：
163. 打碎重组粒子效果
Published:at 00:00不知道大家有没有见到过这种粒子效果：
164. 几何体粒子和噪声
Published:at 00:00前面我们渲染粒子都是默认的 Sprite，而 Sprite 有个特点是永远正对摄像头，所以只能看到一个面。
165. 实战：躲避汽车
Published:at 00:00学完粒子效果之后，我们来做一个实战：躲避汽车
166. 实战：躲避汽车（二）
Published:at 00:00上节创建了公路的场景：
167. 实战：躲避汽车（三）
Published:at 00:00上节实现了汽车的行驶和人的行走：
168. 实战：躲避汽车（四）
Published:at 00:00上节完成了碰撞检测：
169. 实战：躲避汽车（五）
Published:at 00:00上节实现了碰撞的流血效果：
17. 实战：盖房子（一）
Published:at 00:00这节我们继续练习生成几何体的 API，用它来盖个房子。
170. 实战：躲避汽车（总结）
Published:at 00:00做完这个比较综合的实战之后，我们再从头梳理一遍思路。
171. 实战：佛光普照
Published:at 00:00这节开始我们来做一个有意思的 3D 场景：
172. 实战：佛光普照（二）
Published:at 00:00上节调好了佛祖的效果：
173. 实战：佛光普照（三）
Published:at 00:00上节画了佛光的粒子：
174. 实战：佛光普照（四）
Published:at 00:00上节画了光环的部分：
175. 实战：佛光普照（五）
Published:at 00:00上节把底座画好了：
176. 实战：佛光普照（六）
Published:at 00:00上节加上了飞舞的经文：
177. GeoJson 和地图绘制
Published:at 00:00前端工作中有一部分大屏需求：
178. 地图如何实现标注
Published:at 00:00很多时候我们需要在地图上加一些标注：
179. 实战：全国人口柱状地图
Published:at 00:00学完了地图绘制、标注后，我们来做一个全国人口的柱状图。
18. 实战：盖房子（二）
Published:at 00:00这节我们继续完善房子的场景，给它加上更多东西。
180. 实战：全国人口柱状地图（二）
Published:at 00:00上节完成了人口分布柱状图的基本效果：
181. 实战：全国人口柱状地图（三）
Published:at 00:00上节美化了一下地图：
182. 地图飞线
Published:at 00:00有的时候我们需要在地图上画一些飞线，类似这样：
183. 地图飞线（二）
Published:at 00:00上节画了北京到上海的飞线：
184. 地图飞线（三）
Published:at 00:00上节加上了飞线动画：
185. 地图飞线（四）
Published:at 00:00上节实现了飞机飞线动画：
186. 球面地图可视化
Published:at 00:00前面做的都是平面地图上的可视化：
187. 实战：交互式地球仪
Published:at 00:00这节我们来做一个实战：交互式地球仪。
188. 实战：交互式地球仪（二）
Published:at 00:00上节我们把地球和国家轮廓线画出来了：
189. 实战：交互式地球仪（三）
Published:at 00:00上节标出了国家名字，加上了光圈：
19. 场景遍历和世界坐标
Published:at 00:00Three.js 的 Scene 中可以添加很多对象：
190. 实战：交互式地球仪（四）
Published:at 00:00上节实现了国家列表和搜索：
191. 工具、资源网站汇总
Published:at 00:00有同学问我这个光环的图片是从哪里找的：
192. 玩家漫游（一）
Published:at 00:00我们在玩一些 3D 游戏的时候，可以通过键盘、鼠标控制人物移动：
193. 玩家漫游（二）
Published:at 00:00上节实现了按住 w 人物前进：
194. 玩家漫游（三）
Published:at 00:00上节实现了加速、减速、后退：
195. 玩家漫游（四）
Published:at 00:00上节实现了镜头跟随，人物的静止、走路的动画切换：
196. 玩家漫游（五）
Published:at 00:00上节实现了方向调整：
197. 玩家漫游（六）
Published:at 00:00前面我们的改变方向是通过鼠标拖动实现的：
198. 实战：小镇旅游（一）
Published:at 00:00学会了如何控制人物在 3D 场景内漫游，有没有想实现一个元宇宙旅游项目的冲动呢？
199. 实战：小镇旅游（二）
Published:at 00:00上节把小镇做了出来：
2. 实战列表
Published:at 00:00这一节单独来列一下我们做过的所有实战，持续更新：
20. 各种灯光和常用 Helper（一）
Published:at 00:00前面我们用过很多 Light 了，这节来系统过一下。
200. 综合实战：开放世界（一）
Published:at 00:00不知道你有没有玩过开放世界的游戏。
201. 综合实战：开放世界（二）
Published:at 00:00这节加一下阴影，还有人物行走的控制。
202. 综合实战：开放世界（三）
Published:at 00:00上节实现了镜头跟随和前后左右移动：
203. 综合实战：开放世界（四）
Published:at 00:00上节实现了人遇到障碍物会停：
204. 综合实战：开放世界（五）
Published:at 00:00上节实现了跳跃：
205. 综合实战：开放世界（六）
Published:at 00:00上节实现了上台阶：
206. 综合实战：开放世界（七）
Published:at 00:00开放世界里，可以控制玩家行走，自然也可以开车。
207. 综合实战：开放世界（八）
Published:at 00:00上节把车绘制出来了：
208. 综合实战：开放世界（九）
Published:at 00:00上节实现了视角切换：
209. 综合实战：开放世界（十）
Published:at 00:00上节实现了车辆的行驶：
21. 各种灯光和常用 Helper（二）
Published:at 00:00上节还剩了两种灯光，还有各种 Helper，这节我们继续：
210. 综合实战：开放世界（十一）
Published:at 00:00上节实现了上车、下车：
211. 综合实战：开放世界（十二）
Published:at 00:00前面实现了开车：
212. 综合实战：开放世界（十三）
Published:at 00:00上节画了飞机的模型，定义了物理世界的刚体：
213. 综合实战：开放世界（十四）
Published:at 00:00上节实现了上下飞机：
214. 综合实战：开放世界（十五）
Published:at 00:00上节实现了开飞机：
215. 综合实战：开放世界（十六）
Published:at 00:00上节在开放世界里画了房子：
216. 综合实战：开放世界（十七）
Published:at 00:00上节给房屋加上了物理效果，然后画了窗户：
217. 综合实战：开放世界（十八）
Published:at 00:00上节把电脑画了出来：
218. 综合实战：开放世界（十九）
Published:at 00:00上节把电脑屏幕画了出来：
219. 综合实战：开放世界（二十）
Published:at 00:00上节给房屋内加上了电脑，并且靠近后可以打电脑：
22. 顶点法线和反射原理
Published:at 00:00我们知道，用基础材质 MeshBasicMaterial 是不受光照影响的，而漫反射材质 MeshLambertMaterial 或者镜面反射材质 MeshPhongMaterial 都可以反光。
220. 综合实战：开放世界（二十一）
Published:at 00:00现在这个开放世界只有玩家一个人，我们加一点 npc 进去。
221. 综合实战：开放世界（二十二）
Published:at 00:00上节加上了一个 npc：
222. 综合实战：开放世界（二十三）
Published:at 00:00上节实现了对话功能：
223. 综合实战：开放世界（二十四）
Published:at 00:00前面我们实现了很多功能了。
224. 综合实战：开放世界（二十五）
Published:at 00:00上节加上了小地图：
225. 综合实战：开放世界（二十六）
Published:at 00:00上节加上了小地图：
226. 综合实战：开放世界（二十七）
Published:at 00:00这节我们来实现下天气系统。
227. 综合实战：开放世界（二十八）
Published:at 00:00这节来修一个问题：
228. 综合实战：开放世界（二十九）
Published:at 00:00这节我们来加一些音效。
229. 综合实战：开放世界（三十）
Published:at 00:00这节我们来加一个设置面板，可以设置背景音乐、音效、天气等。
23. 自定义顶点颜色实现渐变
Published:at 00:00我们学过了 geometry 的很多属性：
230. 综合实战：开放世界（三十一）
Published:at 00:00到现在我们的开放世界就比较完整了。
231. 综合实战：开放世界（三十二）
Published:at 00:00之前只做了走路的音效，但其实开飞机、开汽车，应该都有不同的音效。
232. 综合实战：开放世界（三十三）
Published:at 00:00现在没有存档功能，当你探索开放世界一段时间，刷新页面，一切就还原了，这样体验不好。
233. 综合实战：开放世界（三十四）
Published:at 00:00我们开放世界里还是有挺多物体的，我们加一下加载进度条，全部加载完再渲染。
234. 综合实战：开放世界（三十五）
Published:at 00:00现在这些提示不是很友好：
235. 综合实战：开放世界（三十六）
Published:at 00:00这节我们把之前的练舞房也放到 3D 世界里，并且让玩家也可以一起去跳舞。
236. 综合实战：开放世界（三十七）
Published:at 00:00上节加了镜子：
237. 综合实战：开放世界（三十八）
Published:at 00:00上节加上了跳舞的女孩：
238. 综合实战：开放世界（三十九）
Published:at 00:00上节实现了对话：
239. 综合实战：开放世界（四十）
Published:at 00:00你可以试下这个开放世界：
24. 实战：颜色渐变柱状图
Published:at 00:00echarts 的柱状图可以设置多种颜色，根据不同的数值大小来显示不同的颜色，中间的数值颜色渐变：
240. 综合实战：开放世界（四十一）
Published:at 00:00你可以试下这个开放世界：
241. 综合实战：开放世界（四十二）
Published:at 00:00上节创建了 database：
242. 综合实战：开放世界（四十三）
Published:at 00:00上节实现了注册的接口。
243. 综合实战：开放世界（四十四）
Published:at 00:00上节跑通了注册流程，这节来做登录。
244. 综合实战：开放世界（四十五）
Published:at 00:00上节实现了登录接口。
245. 综合实战：开放世界（四十六）
Published:at 00:00这节我们把 websocket 的后端部分写一下。
246. 综合实战：开放世界（四十七）
Published:at 00:00上节实现了 ws 的服务端
247. 综合实战：开放世界（四十八）
Published:at 00:00前两节实现了 ws 的通信：
248. 综合实战：开放世界（开发流程总结）
Published:at 00:00这节总结下我们做这个开放世界的过程。
249. 综合实战：开放世界（技术总结）
Published:at 00:00上节总结了下整个开发流程和实现的效果。
25. 如何加载外部模型
Published:at 00:00前面我们用 Three.js 的几何体画过房子：
250. 实战：3D 画廊编辑器（一）
Published:at 00:00Three.js 的一个典型应用就是 3D 画廊：
251. 实战：3D 画廊编辑器（二）
Published:at 00:00上节做了需求分析：
252. 实战：3D 画廊编辑器（三）
Published:at 00:00这节正式开始画廊编辑器的开发。
253. 实战：3D 画廊编辑器（四）
Published:at 00:00这节我们来初始化 3D 部分：
254. 实战：3D 画廊编辑器（五）
Published:at 00:00这节我们把基本的布局完成一下。
255. 实战：3D 画廊编辑器（六）
Published:at 00:00这节我们来做人物的编辑。
256. 实战：3D 画廊编辑器（七）
Published:at 00:00这节先不着急继续开发，我们把项目部署到 github
257. 全屏滚动官网
Published:at 00:00我们经常会见到一些比较炫酷的 3D 网站。
258. 全屏滚动官网（二）
Published:at 00:00上节实现了 3D 全屏滚动页面的基本效果：
259. 全屏滚动官网（三）
Published:at 00:00上节加上了切换到某一屏时的动画，以及鼠标交互：
26. GLTF 的三种文件结构
Published:at 00:00上节我们加载了一个 gltf 的模型，并用 Three.js 渲染了出来：
260. 全屏滚动官网（四）
Published:at 00:00上节实现了滚动控制骨骼动画：
261. 全屏滚动实战：星系 3D 科普网站（一）
Published:at 00:00前面学了如何在网页里实现滚动控制 3D 场景变化：
262. 全屏滚动实战：星系 3D 科普网站（二）
Published:at 00:00上节把星球画出来了：
263. 全屏滚动实战：星系 3D 科普网站（三）
Published:at 00:00上节画了星轨和公转：
264. 全屏滚动实战：星系 3D 科普网站（四）
Published:at 00:00前面把星系和 div 部分都画完了：
265. 3D 产品展示网站
Published:at 00:00学完滚动控制 3D 场景之后，我们可以做一些有意思的 3D 网站了。
266. 3D 产品展示网站（二）
Published:at 00:00上节实现了颜色切换：
267. 3D 产品展示网站（三）
Published:at 00:00上节把颜色切换完成了：
268. 点云（一）
Published:at 00:00点云是 3D 的一个常见业务场景。
269. 点云（二）
Published:at 00:00上节实现了点云的效果：
27. gltf-pipeline：处理 gltf 模型的工具
Published:at 00:00上节讲了 gltf 模型有三种格式，包括 glb、gltf、gltf + bin + jpg/png
270. 表面采样器更常见的用法
Published:at 00:00前面用表面采样器 Mesh 实现了点云效果：
271. 采样器实战：漫山遍野的植被
Published:at 00:00前面我们绘制过林海雪原的场景：
272. 采样器实战：漫山遍野的植被（二）
Published:at 00:00上节把山坡画了出来：
273. 采样器实战：漫山遍野的植被（三）
Published:at 00:00上节用采样器加上了很多植被：
274. Shader 入门（一）：uniform 与 UV 图案
Published:at 00:00Three.js 里常用的 MeshStandardMaterial、MeshLambertMaterial 背后都是写好的顶点、片元着色器，参数只是在改 uniform。业务里一旦要做流动噪声、UV 扭曲、自定义光照，就绕不开 自己...
275. Shader 入门（二）：纹理采样与程序化噪声
Published:at 00:00上一篇我们在 同一个 shader-playground 工程里跑通了 ShaderMaterial、uniform 时间和 vUv 图案。现实项目里还有一大类需求：把位图或程序生成的图像贴到模型上，以及 不依赖贴图、用数学造出「像随...
276. Shader 入门（三）：顶点、光照、裁剪与视角
Published:at 00:00前面两篇都在 片元 里做文章：颜色、纹理、噪声。GPU 流水线的另一半是 顶点着色器：每个顶点执行一次，决定最终进裁剪空间的位置，也能向片元传递更多信息。把顶点在局部空间里先挪动再乘矩阵，就能得到旗帜、水面式的起伏；把法线变到世界空间...
277. Shader 入门（四）：后期管线与阶段收束
Published:at 00:00前面几篇都在 同一个 shader-playground 工程里，用 ShaderMaterial 直接往屏幕 framebuffer 画东西。实际产品里还有另一条常见路径：先把场景画进离屏纹理，再经过一个全屏四边形跑片元，做暗角、调...
278. Shader 入门（五）：用 Shader 实现云彩
Published:at 00:00前面我们已经用过 vUv、uniform、贴图采样、value noise。要做“像云一样”的东西，单层噪声通常不够，看起来像灰色污渍；真正的云更像 多尺度结构叠加：大轮廓 + 中等褶皱 + 小细节，再配上柔和的阈值与一点点光照感。
28. Draco：压缩 gltf 模型，提升性能
Published:at 00:00gltf 模型通常会比较大，导致 3D 场景加载较慢。
29. 包围盒与模型大小计算
Published:at 00:00不同模型的大小都不同：
3. 通知
Published:at 00:00通知一
30. 包围盒 Box3 常用 api
Published:at 00:00上节我们学了包围盒 Box3，并且计算了模型大小：
31. 正投影相机和三种灯光的阴影
Published:at 00:00前面我们学了 6 种灯光，这 6 种灯光里有 3 种是可以产生阴影的：
32. OrbitControls 的常用属性方法
Published:at 00:00OrbitControls 我们从开始到现在一直在用，但它很多属性方法都没用过。
33. 射线与点击选中 3D 场景物体
Published:at 00:00写 2D 网页的时候，我们经常 click click 点点点，到了 3D 不能点击的话，还有点不习惯。
34. 后期处理与描边发光效果
Published:at 00:00上节实现了点击选中 3D 场景中的物体的功能，那选中之后，我们想给它加一个高亮的描边呢？
35. 各种后期处理效果
Published:at 00:00上节我们学了后期效果，用了下描边效果 OutlinePass、发光效果 UnrealBloomPass 两个 Pass（通道）。
36. 精灵模型 Sprite 和下雨下雪效果
Published:at 00:00有了顶点数据，可以构成各种几何体 geometry。
37. 实战：林海雪原
Published:at 00:00这节我们来做一个林海雪原的实战。
38. 实战：林海雪原（二）
Published:at 00:00上节我们完成了林海雪原的场景。
39. 几何体材质共用和 clone、copy
Published:at 00:00前面做实战的时候，你可能会遇到一个问题：
4. 第一个 3D 场景
Published:at 00:00Three.js 是用来创建和渲染三维世界的。
40. 补间动画库 Tween.js
Published:at 00:00前面我们做过一些动画：
41. Tween.js 常用 API
Published:at 00:00上节我们学了用 Tween.js 实现缓动动画。
42. 关键帧动画和模型动画播放
Published:at 00:00大家应该写过 css 里的关键帧动画：
43. 实战：丝滑入场动画
Published:at 00:003D 场景直接加载出来有点平平无奇，如果加上一个入场动画会体验更好：
44. 改变顶点的变形动画
Published:at 00:00所有的几何体都是由顶点构成的，我们可以修改顶点坐标，让几何体变成另一种形状。
45. 骨骼动画：关节带动顶点运动
Published:at 00:00我们学了关键帧动画、变形动画，这节来学下骨骼动画。
46. 骨骼动画如何丝滑切换？
Published:at 00:00一个人物模型可能有很多骨骼动画，比如跑、跳、走、静止等动画。
47. GSAP：另一个常用动画库
Published:at 00:00前面学了动画库 Tween.js，其实和它类似的还有一个常用的：GSAP
48. CSS2DRenderer 实现标注：给 3D 物体加标签
Published:at 00:00很多时候，我们希望给 3D 场景中的物体加一些标注信息：
49. CSS3DRenderer 实现标注：公告栏内容
Published:at 00:00上节我们学了 CSS2DRenderer，它可以给 3D 场景的物体加一个标签。
5. dat.gui 可视化调试
Published:at 00:00上节我们设置立方体大小、相机位置、光照强度等，都是直接设置了一个值。
50. Sprite 结合 canvas 实现各种形状的标注
Published:at 00:00其实除了刚学的 CSS2DRenderer、CSS3DRenderer 外，前面学的 Sprite 也可以用来做标注。
51. Canvas 画各种图案作为纹理
Published:at 00:00前面我们用 canvas 画过颜色柱状图的数字：
52. SpriteText：开箱即用的文字组件
Published:at 00:00前面我们用 Sprite + Canvas 绘制过文字：
53. 实战：数字雨
Published:at 00:00学完 SpriteText 之后，我们来做一个实战：数字雨
54. 实战：3D 饼图
Published:at 00:00这节我们来实现一个 3D 饼图的效果。
55. 实战：3D 饼图（二）
Published:at 00:00上节把饼图的形状画出来了：
56. 系统掌握噪声库 simplex-noise
Published:at 00:00前面我们用噪声库生成过山脉地形：
57. 3D 场景如何加入音频
Published:at 00:003D 场景很多时候是需要一些音效、背景音乐的。
58. 实战：双人斗舞
Published:at 00:00学完骨骼动画、css2d 标注后，我们来做一个双人斗舞的实战。
59. 实战：双人斗舞（二）
Published:at 00:00这节我们继续来完善双人斗舞的场景。
6. 深入理解透视相机和视椎体
Published:at 00:00对于刚接触 Three.js 的同学来说，透视相机的视椎体确实是个比较难理解的概念。
60. 音乐频谱可视化
Published:at 00:00前面学了用 Audio 来播放音乐，音频相关的还有一个 AudioAnalyser 可以用来分析频谱：
61. PBR 材质：逼真的金属、塑料、磨砂效果
Published:at 00:00前面我们学过 MeshLambertMaterial、MeshPhongMaterial，它们都可以反射光线，但是不够逼真。
62. PBR 材质：逼真的喷漆、玻璃效果
Published:at 00:00上节学了用 PBR 材质实现金属、塑料、磨砂效果，这节我们继续来学习喷漆、玻璃效果。
63. PBR 实战：汽车选配
Published:at 00:00学完 PBR 材质之后，我们就能做出车窗玻璃和车身的质感了，那这节就来实现一个汽车选配的效果。
64. 模型搜索并导入 blender 编辑
Published:at 00:00上节练习 PBR 材质的时候，我们用了一辆汽车的模型：
65. PBR 材质：逼真的毛绒、虹彩效果
Published:at 00:00前面学了 PBR 材质 MeshPhysicalMaterial 的透光度 transmission、清漆 clearcoat 属性，可以用来实现玻璃、喷了一层漆的车身的效果。
66. MatCap 材质：通过光照球实现伪光照效果
Published:at 00:00这节我们来学下 MeshMatcapMaterial 材质。
67. HDR：亮度范围更广的全景图
Published:at 00:00前面我们设置过好几次天空盒背景了。
68. CubeCamera 实现镜子效果
Published:at 00:00通过环境贴图 envMap，我们能让物体映射出周围的环境来：
69. Reflector 实现镜子效果
Published:at 00:00上节我们用 CuebeCamera 实现了镜子的效果：
7. BufferGeometry：顶点生成各种几何体
Published:at 00:00前面我们用过立方体 BoxGeometry，其实 Three.js 还有很多别的几何体。
70. 实战：练舞房
Published:at 00:00学完如何实现镜子效果之后，我们来做一个实战：练舞房。
71. 实战：3D 音乐播放器
Published:at 00:00前面学了音频相关的 API，这节我们来做一个实战：3D 版音乐播放器。
72. 实战：3D 音乐播放器（二）
Published:at 00:00这节我们加上音乐频谱的可视化，之前我们做过这种：
73. 实战：3D 音乐播放器（三）
Published:at 00:00这节我们来实现歌词的同步：
74. 实战：3D 音乐播放器（四）
Published:at 00:00这节我们给音乐播放器加上一些跳动的音符：
75. Three.js 的各种控制器 Controls
Published:at 00:00前面我们都是用轨道控制器 OrbitControls
76. Vue、React 项目如何集成 Three.js
Published:at 00:00前面我们都是 html 引入 Three.js 来跑的，但实际的前端项目更多是在某个前端页面里嵌入了 3D 场景。
77. 贴花几何体：给物体加一些装饰
Published:at 00:00这节我们来学一个新的几何体：DecalGeometry 贴花几何体
78. 实战：T恤印花设计
Published:at 00:00上节学了贴花几何体，可以给网格模型表面加一些装饰：
79. 实战：T恤印花设计（二）
Published:at 00:00上节实现了 T 恤印花：
8. 点模型、线模型、网格模型
Published:at 00:00上节我们学了网格模型，也就是每三个顶点构成一个三角形，三角形构成各种几何体。
80. 3D 场景保存为图片、视频
Published:at 00:00前面我们实现了 T 恤定制：
81. 实战：3D 电脑（一）
Published:at 00:00前面学了 CSS3DRenderer 一直没练习下：
82. 实战：3D 电脑（二）
Published:at 00:00上节画了电脑的场景：
83. 实战：3D 电脑（三）
Published:at 00:00前面搞定了 3D 场景的搭建和 CSS3DObject 的位置确定：
84. 实战：Three.js Editor
Published:at 00:00官方有个编辑器，可以可视化的编辑 3D 场景。
85. 实战：Three.js Editor （二）
Published:at 00:00这节我们正式开始写 Three.js Editor。
86. 实战：Three.js Editor（三）
Published:at 00:00这节我们来写 3D 场景部分，也就是左边这块：
87. 实战：Three.js Editor（四）
Published:at 00:00上节实现了根据全局 store 里的 json 渲染 3d 场景的 mesh：
88. 实战：Three.js Editor（五）
Published:at 00:00上节实现了添加 Mesh，点击的描边：
89. 实战：Three.js Editor（六）
Published:at 00:00Three.js Editor 里可以对物体做移动、旋转、缩放：
9. 实战：随机山脉地形
Published:at 00:00学完顶点和网格模型之后，我们来做一个实战：生成山脉地形。
90. 实战：Three.js Editor（七）
Published:at 00:00上节我们实现了物体位置的编辑：
91. 实战：Three.js Editor（八）
Published:at 00:00左边的编辑器告一段落，这节我们来做右边的部分：
92. 实战：Three.js Editor（九）
Published:at 00:00这节我们来写最后一块功能：
93. 实战：Three.js Editor（十）
Published:at 00:00功能做完后，这节我们来优化一下细节。
94. 实战：Three.js Editor（十一）项目总结
Published:at 00:00前面几节，我们实现了 Three.js Editor，和官方的编辑器功能一样。
95. 向量点积实现锐角判断
Published:at 00:00在酷家乐项目里，有这样一个效果：
96. Vector3 的 API 和各种应用
Published:at 00:00Vector3 在我们开发过程中经常用到，这节我们过一遍它的常用 API。
97. 实战：酷家乐装修编辑器（一）
Published:at 00:00装修这个业务领域都是用 3D 来做。
98. 实战：酷家乐装修编辑器（二）
Published:at 00:00这节开始进入酷家乐装修编辑器的开发。
99. 实战：酷家乐装修编辑器（三）
Published:at 00:00这节我们来初始化 3D 部分：