Three.js可视化系统课程WebGL

1-课程部分3D案例展示

1-课程案例源码3D效果5分钟速览.mp4

2-智慧城市数字孪生3D可视化.mp4

3-智慧小区(第一阶段效果).mp4

4-物联网数字孪生3D可视化案例——收费站.mp4

5-智慧工厂（初步效果，完善中）.mp4

6-产品720 3D展示( 轿车 手机).mp4

7-地球大屏3D可视化—飞线.mp4

8-地图中国大屏可视化.mp4

9-机械 BIM在线预览(源码在课件中).mp4

10-【Threejs教程】8.渲染器和前端UI交互界面

81-1-three.js Canvas画布布局.mp4

82-2-UI交互界面与Canvas画布叠加.mp4

83-3-UI交互按钮与3D场景交互.mp4

84-4-Three.js背景透明度.mp4

85-5-Three.js渲染结果保存为图片.mp4

86-6-深度冲突(模型闪烁).mp4

87-7-模型加载进度条.mp4

11-【Threejs教程】9.生成曲线、几何体

100-13-扫描ExtrudeGeometry.mp4

101-14-多边形轮廓Shape简介.mp4

102-15-多边形轮廓Shape(圆弧).mp4

103-16-多边形Shape(内孔.holes).mp4

104-17-模型边界线EdgesGeometry.mp4

105-18-几何体顶点颜色数数据.mp4

106-19-一段曲线颜色渐变.mp4

107-20-Color颜色渐变插值.mp4

108-21-查看或设置gltf几何体顶点.mp4

109-22-山脉地形高度可视化.mp4

88-1-生成圆弧顶点.mp4

89-2-几何体方法.setFromPoints().mp4

90-3-曲线Curve简介.mp4

91-4-椭圆、圆.mp4

92-5-样条曲线.mp4

93-6-贝塞尔曲线.mp4

94-7-样条、贝塞尔曲线应用.mp4

95-8-组合曲线CurvePath拼接不同曲线.mp4

96-9-曲线路径管道TubeGeometry.mp4

97-10-旋转成型LatheGeometry.mp4

98-11-轮廓填充ShapeGeometry.mp4

99-12-拉伸ExtrudeGeometry.mp4

12-【Threejs教程】10.相机基础

110-1-正投影相机.mp4

111-2-正投影相机-Canvas画布尺寸变化.mp4

112-3-包围盒Box3.mp4

113-4-地图案例(包围盒、正投影).mp4

114-5-相机动画( .position 和 .lookAt() ).mp4

115-6-不同方向的投影视图.mp4

116-7-相机上方向.up(旋转渲染结果).mp4

117-8-管道漫游案例.mp4

118-9-OrbitControls旋转缩放限制.mp4

119-10-相机控件MapControls.mp4

13-【Threejs教程】11.光源和阴影

120-1-聚光源SpotLight.mp4

121-2-平行光阴影计算.mp4

122-3-阴影范围.shadowamera.mp4

123-4-阴影像素、弱化阴影边缘.mp4

124-5-工厂光源(环境贴图和环境光).mp4

125-6-工厂光源(平行光模拟太阳光).mp4

126-7-工厂(模拟太阳光阴影).mp4

127-8-gui辅助调节阴影范围.mp4

14-【Threejs教程】12.精灵模型Sprite

128-1-精灵模型对象Sprite.mp4

129-2-精灵模型标注场景(贴图).mp4

130-3-Sprite模拟下雨、下雪.mp4

15-【Threejs教程】13.后期处理

131-1-后处理(高亮发光描边OutlinePass).mp4

132-2-OutlinePass发光描边样式.mp4

133-3-Bloom发光通道.mp4

134-4-多通道组合(GlitchPass和描边).mp4

135-5-gltf工厂模型设置发光描边.mp4

136-6-gltf后处理颜色异常(伽马校正).mp4

137-7-抗锯齿后处理.mp4

16-【Threejs教程】14.射线拾取模型

138-1-射线Ray.mp4

139-2-Raycaster(射线拾取模型).mp4

140-3-屏幕坐标转标准设备坐标.mp4

141-4-Raycaster(鼠标点击选中模型).mp4

142-5-Canvas尺寸变化(射线坐标计算).mp4

143-6-射线拾取层级模型(发光描边).mp4

144-7-射线拾取Sprite控制场景.mp4

17-【Threejs教程】15.场景标注标签信息

145-1-CSS2DRenderer(HTM元素作为标签).mp4

146-2-HTML标签遮挡Canvas画布事件.mp4

147-3-Canvas画布尺寸变化(HTML标签).mp4

148-4-标签位置不同设置方式.mp4

149-5-标签位置(标注工厂设备).mp4

150-6-标签指示线或箭头指向标注点.mp4

151-7-鼠标选中模型弹出标签(工厂案例).mp4

152-8-单机按钮关闭HTML标签.mp4

153-9-CSS3DRenderer渲染HTML标签.mp4

154-10-CSS3批量标注多个标签.mp4

155-11-精灵模型Sprite作为标签.mp4

156-12-Sprite标签(Canvas作为贴图).mp4

18-【Threejs教程】16.关键帧动画

157-1-关键帧动画.mp4

158-2-动画播放(暂停、倍速、循环).mp4

159-3-动画播放(拖动任意时间状态).mp4

160-4-解析外部模型关键帧动画.mp4

161-5-机械虚拟装配案例(播放).mp4

162-6-虚拟装配(任意时间定位).mp4

163-7-变形动画原理.mp4

164-8-变形动画(定制人物胖瘦).mp4

165-9-骨骼关节Bon.mp4

166-10-查看外部模型骨骼动画.mp4

167-11-骨骼动画不同动作切换.mp4

19-【Threejs教程】17.动画库tween.js

168-1-tweenjs创建threejs动画.mp4

169-2-tweenjs相机运动动画.mp4

170-3-点按钮,相机飞行靠近观察设备..mp4

171-4-点击设备,相机靠近放大预览.mp4

172-5-缓动算法.easing(地球渐入相机动画).mp4

173-6-模型或标签淡入淡出.mp4

2-Web3D生态和如何学习

10-课程面向人群.mp4

11-Web3D现状以及如何学习.mp4

12-WebGL前端工程师工作、要求、待遇问题.mp4

20-【Blender】Blender基础操作

174-1-Web3D可视化3D建模.mp4

175-2-Blender下载、安装、中文界面.mp4

176-3-基本操作：旋转、缩放、平移.mp4

177-4-编辑、保存网格模型.mp4

178-5-Blender导出gltf(美术与程序员协作).mp4

21-【Threejs 进阶】1. 数学几何计算基础(向量)

179-1-threejs坐标系与三角函数.mp4

180-2-三维向量Vector3简介.mp4

181-3-向量大小(Vector3长度.length()).mp4

182-4-向量方向(归一化.normalize).mp4

183-5-相机沿着视线方向运动.mp4

184-6-箭头ArrowHelper.mp4

22-【Threejs 进阶】2. 位移、速度、加速度

185-1-匀速动画(向量表示速度).mp4

186-2-物体下落动画(重力加速度).mp4

23-【Threejs 进阶】3. 向量点乘、叉乘

187-1-向量点乘dot.mp4

188-2-点乘练习-计算三角形夹角.mp4

189-3-点乘判断物体在人前或人后.mp4

190-4-点乘判断是否在扇形内.mp4

191-5-向量叉乘cross.mp4.mp4

192-6-叉乘判断人左右.mp4

193-7-点乘判断平行向量方向异同.mp4

194-8-判断两个点是否在线段同一侧.mp4

195-9-叉乘计算三角形法线.mp4

196-10-叉乘计算三角形面积.mp4

197-11-练习—计算物体的表面积.mp4

198-12-点到直线的距离.mp4

24-【Threejs 进阶】4.四元数、欧拉角(角度姿态)

199-1-欧拉角Euler.mp4

200-2-四元数Quaternion.mp4

201-3-四元数表示物体姿态.mp4

202-4-四元数乘法运算.mp4

203-5-四元数表示两个向量旋转.mp4

204-6-练习-无人机绕飞.mp4

25-【Threejs 进阶】5. 矩阵基础

205-1-数学基础(平移、旋转、缩放矩阵).mp4

206-2-模型矩阵.mp4

207-3-Three.js矩阵Matrix4.mp4

208-4-矩阵乘法multiply.mp4

209-5-模型本地矩阵、世界矩阵.mp4

210-6-视图矩阵、投影矩阵.mp4

26-【Threejs进阶】6.射线

211-1-射线Ray(复习前面内容).mp4

212-2-射线拾取模型(复习前面).mp4

27-【Threejs进阶】7.包围盒

213-1-包围盒Box3(复习前面).mp4

28. 第一、三人称漫游 ( 游戏元宇宙 常用)

214-1-键盘WASD按键状态记录.mp4

215-2-W键控制角色模型运动.mp4

216-3-W控制人移动，设置加速度.mp4

217-4-阻尼(玩家角色逐渐减速停止).mp4

218-5-按键S退后运动.mp4

219-6-相机跟着玩家走(第三人称漫游).mp4

220-7-鼠标左右拖动改变玩家视角.mp4

221-8-获取玩家(相机)正前方方向.mp4

222-9-鼠标上下滑动改变相机视角.mp4

223-10-玩家角色左右运动(叉乘).mp4

224-11-鼠标滑动改变视角(指针锁定模式).mp4

225-12-快捷键切换第一、第三人称.mp4

226-13-骨骼动画与运动状态关联.mp4

29-第一、三人称漫游—八叉树碰撞检测( 更新中 )

227-1-八叉树Octree扩展库介绍.mp4

3-【Threejs教程】1.快速入门(2023年新版本)

13-1-threejs文件包下载和目录简介.mp4

14-2-学习环境—代码编辑器和本地静态服务器.mp4

15-3-开发和学习环境，引入threejs库.mp4

16-4-第一个3D案例—创建3D场景.mp4

17-5-第一个3D案例—透视投影相机.mp4

18-6-第一个3D案例—渲染器.mp4

19-7-Threejs三维坐标系—加强三维空间认识.mp4

20-8-光源对物体表面影响.mp4

21-9-相机控件轨道控制器OrbitControls.mp4

22-选修】Vue + Threejs 开发环境( 可跳过 ).mp4

23-选修】React + Threejs开发环境( 可跳过 ).mp4

24-10-平行光与环境光.mp4

25-11-动画渲染循环.mp4

26-12-Canvas画布布局和全屏.mp4

27-13-stats查看threejs渲染帧率.mp4

28-14-阵列立方体和相机适配体验.mp4

29-15-Threejs常见简单几何体简介.mp4

30-16-高光网格材质MeshPhongMaterial.mp4

31-17-WebGL渲染器设置(锯齿模糊、背景颜色).mp4

32-18-gui.js库(可视化改变三维场景).mp4

33-19-gui.js库(颜色、命名、步长、事件).mp4

34-20-gui.js库(下拉菜单、单选框).mp4

35-21-gui.js库(分组).mp4

36-22-查询案例examples和文档(辅助开发).mp4

37-23-threejs语法总结.mp4

30-【Threejs进阶】10.物理引擎CannonJS(更新中)

228-1-CannonJS简介和引入.mp4

229-2-CannonJS自由落体计算.mp4

230-3-练习-threejs可视化cannon计算结果.mp4

231-4-CannonJS模拟乒乓球下落反弹.mp4

232-5-练习-修改小球参数.mp4

233-6-练习-点按钮重复下落.mp4

234-7-CannonJS碰撞事件，碰撞声音.mp4

235-8-长方体Box碰撞体(箱子下落).mp4

236-9-练习题-外部gltf箱子模型.mp4

237-10-凸多面体ConvexPolyhedron.mp4

31-案例——物联网粮仓

238-1.2-项目方案选择.mp4

239-1.3-学习安排(必看).mp4

240-1.4-公司项目人员方案.mp4

241-2.1-Three.js下载特定版本并使用.mp4

242-2.2-一个最小Three.js代码.mp4

243-2.3-渲染循环.mp4

244-2.4-Three.js开发辅助工具.mp4

245-2.5-项目部署Canvas画布页面布局相关.mp4

246-2.6-Three.js代码模块化.mp4

247-3.1-三维软件绘制模型(美术和程序协作).mp4

248-3.2-体验three.js editor编辑器-搭建一个三维场景.mp4

249-3.3-GLTF格式模型文件简介 (Web3D领域JPG).mp4

250-3.4-建模软件导出GLTF(blender、3dmax).mp4

251-3.5-加载GLTF格式粮仓基地模型.mp4

252-3.6-粮仓贴图颜色偏差问题解决.mp4

253-3.7-gltf相关文件glb.mp4

254-3.8-gltf文件是否包含光源.mp4

255-3.9-相机渲染范围和视角设置.mp4

256-3.10-模型导出位置和姿态问题注意.mp4

257-3.11-加载gltf模型(透视投影相机).mp4

258-3.12-批量修改GLTF材质.mp4

259-3.13-粮仓基地场景雾化效果设置(Fog).mp4

260-4.1-模型命名(程序与美术协作).mp4

261-4.2-粮仓基地模型命名并导出.mp4

262-4.3-CSS2DRenderer标注每个粮仓.mp4

263-4.4-CSS3DRenderer标注每个粮仓.mp4

264-4.5-鼠标交互-射线拾取.mp4

265-4.6-射线拾取弹出粮仓HTML信息标签.mp4

266-4.7-火焰效果(序列帧动画).mp4

267-4.8-粮仓火焰标注.mp4

268-4.9-火焰信息标签.mp4

32-案例—产品720展示（轿车、手机）

269-1.1-课程效果展示.mp4

270-1.2-产品Web3D展示方案.mp4

271-1.3-学习安排.mp4

272-2.1-手机相关几个章节学习指南.mp4

273-2.2-绘制产品三维模型—手机.mp4

274-2.3-Blender或3dmax导出gltf格式模型.mp4

275-2.4-三维软件导出产品模型注意.mp4

276-2.5-Blender预览产品PBR材质的模型.mp4

277-2.6-Three.js下载R125版本并使用.mp4

278-2.7-threejs最小案例—模型和光源.mp4

279-2.8-threejs最小案例—相机和渲染器.mp4

280-2.9-渲染循环(设置产品旋转预览动画).mp4

281-2.10-产品预览旋转和缩放(相机控件OrbitControls).mp4

282-3.1-three.js加载gltf模型.mp4

283-3.2-查询模型节点并设置模型PBR材质贴图.mp4

284-3.3-产品展示相机参数设置注意.mp4

285-3.4-环境贴图envMap.mp4

286-3.5-调试场景光源参数.mp4

287-3.6-手机产品旋转动画控制.mp4

288-3.7-Canvas画布全屏且跟随窗口变化.mp4

289-3.8-three.js代码模块化.mp4

290-3.9-gui辅助调节光源强度、位置、受环境光影响程.mp4

291-4.1-产品展示缩放和旋转范围约束.mp4

292-4.2-一个720辅助显示的圆弧线—圆弧线.mp4

293-4.3-一个720辅助显示的圆弧线—720符号.mp4

294-4.4-UI按钮暂停手机旋转动画.mp4

295-4.5-前端UI按钮切换颜色贴图.mp4

296-4.6-练习例子—canvas局部布局UI按钮切换颜色贴图.mp4

297-4.7-颜色贴图.map切换动画.mp4

298-4.8-产品特定部位标注—光点.mp4

299-4.9-产品特定部位标注—半透明叠加问题解决.mp4

300-4.10-产品特定部位标注—波动光点.mp4

301-4.11-HTML 2D标签标注相机热点.mp4

302-4.12-HTML 3D标签标注相机热点.mp4

303-4.13-射线拾取标注热点—弹出信息.mp4

304-4.14-点击热点弹出HTML信息标签.mp4

305-5.1-轿车3D模型基本情况简介.mp4

306-5.2-加载车gltf模型1—模型和相机.mp4

307-5.3-加载车gltf模型2—材质和贴图.mp4

308-5.4-gltf加载颜色空间和颜色失真问题.mp4

309-5.5-批量设置Mesh环境贴图.mp4

310-5.6-MeshStandardMaterial金属度和粗糙度了解.mp4

311-5.7-设置后视镜效果.mp4

312-5.8-MeshPhysicalMaterial(车外壳、车玻璃).mp4

313-5.9-代码创建一个地面.mp4

314-5.10-代码创建一个隧道.mp4

315-5.11-设置雾化效果.mp4

316-5.12-约束相机控件的旋转、缩放和平移.mp4

317-6.1-车开关门—思路和模型问题.mp4

318-6.2-车门开关—热点标注.mp4

319-6.3-车门开关—射线拾取，打开或关门车门.mp4

320-6.4-tweenjs库设置开关门动画.mp4

321-6.5-车门开关—开关门声音.mp4

322-6.6-颜色款式选择.mp4

323-6.7-颜色变化动画.mp4

324-6.8-背景音乐设置.mp4

325-6.9-旋转动画开启或关闭.mp4

326-10-车前灯开关模拟.mp4

33-【WebGL教程】1.WebGL快速入门(更新中)

327-1-学前说明.mp4

328-2-着色器GLSL ES语言.mp4

329-3-第一个WebGL案例(绘制一个点).mp4

330-4-WebGL坐标系.mp4

34-WebGL入门教程( 学习上个章节新录制的即可 )

331-0-学习WebGL的必要性.mp4

332-1-第一个WebGL程序(绘制一个点).mp4

333-2-WebGL绘制一个矩形.mp4

334-3-WebGL坐标系(投影).mp4

335-4-WebGL平移变换.mp4

336-5-绘制一个立方体(WebGL旋转变换).mp4

337-6-WebGL顶点索引绘制.mp4

338-7-varying变量和颜色插值..mp4

339-8-立方体(每个面一种颜色).mp4

340-9-WebGL光照渲染立方体.mp4

341-10-立方体旋转动画.mp4

342-11-WebGL绘制多个几何体.mp4

343-12-纹理贴图.mp4

344-13-彩色图转灰度图.mp4

345-14-切换着色器程序.mp4

346-15-WebGL透明度与α融合.mp4

347-16-深度测试与α融合.mp4

35-【Shader教程】1.threejs Shader基础语法

348-1-学前说明.mp4

349-2-着色器GLSL ES语言(复习WebGL中内容).mp4

350-3-ShaderMaterial着色器材质.mp4

351-4-ShaderMaterial半透明、双面显示.mp4

352-5-uniform变量传值.mp4

353-6-WebGL渲染管线.mp4

354-7-片元屏幕坐标fragCoord.xy.mp4

355-8-顶点颜色varying插值计算.mp4

356-9-顶点位置插值(实现渐变色).mp4

357-10-颜色贴图map(顶点UV坐标).mp4

358-11-shader模仿点材质效果.mp4

359-12-attribute自定义顶点变量.mp4

36-【shader教程】2. onBeforeCompile修改材质

360-1-threejs各个材质的shader代码.mp4

361-2-onBeforeCompile修改材质shader.mp4

362-3-修改材质shader(彩色图变灰度图).mp4

363-4-顶点位置插值(设置片元颜色).mp4

364-5-顶点位置插值(设置片元颜色)2.mp4

365-6-模型扫光效果(顶点位置插值).mp4

366-7-模型扫光效果(颜色渐变).mp4

37-案例—大屏3D地图可视化

367-1.1-课程完成效果展示.mp4

368-1.2-技术选择(SVG、Canvas、WebGL、Three.js).mp4

369-1.3-Three.js引擎简介.mp4

370-1.4-学习细节安排.mp4

371-2.1-GeoJOSN数据简介和获取.mp4

372-2.2-先通过Three.js实现一个基础渲染代码.mp4

373-2.3-渲染非全屏(相机和渲染器).mp4

374-2.4-相机渲染范围、位置和目标.mp4

375-2.5-渲染循环和相机控件OrbitControls.mp4

376-2.6-解析边界线(几何体顶点和Line模型).mp4

377-2.7-Shape几何体填充行政区域.mp4

378-2.8-渲染中国地图(相机参数适配).mp4

379-2.9-渲染省份或城市地图轮廓.mp4

380-2.10-拉伸行政区轮廓.mp4

381-2.11-经纬度转墨卡托坐标.mp4

382-3.1-矩形贴图标注位置.mp4

383-3.2-热点—波动光圈.mp4

384-3.3-热点—旋转棱锥.mp4

385-3.4-HTML元素作为标签(世界坐标转屏幕坐标).mp4

386-3.5-HTML元素作为标签(CSS2DRenderer).mp4

387-3.6-HTML元素作为标签(CSS3DRenderer).mp4

388-3.7-鼠标单击拾取选中一个行政区.mp4

389-4.1-中国地图颜色深浅可视化.mp4

390-4.2-练习-世界各国GDP可视化(区域颜色深浅).mp4

391-4.3-行政区域拉伸不同高度可视化数据.mp4

392-4.4-气泡图(不同颜色和大小圆圈).mp4

393-4.5-柱子可视化数据.mp4

394-5.1-密集点(微博登录活动).mp4

395-5.2-Line可视化轨迹线(北京公交轨迹).mp4

396-5.3-Line可视化轨迹线(全球高速公路轨迹GeoJSON).mp4

397-5.4-世界人口密度(柱子可视化).mp4

398-5.5-世界人口密度(柱子颜色渐变)..mp4

399-5.6-世界人口密度可视化(几何体合并).mp4

400-5.7-柱子可视化(数据特定间距).mp4

401-6.1-轨迹线(样条曲线).mp4

402-6.2-飞线(轨迹线上提取一段作为飞线).mp4

403-6.3-飞线粗细设置(linewidth)..mp4

404-6.4-shader实现小蝌蚪状飞线.mp4

405-6.5-练习题—飞线综合案例.mp4

38-案例——大屏3D地球可视化

406-1.1-地球大屏数据可视化效果.mp4

407-1.1-课程完成案例展示.mp4

408-1.2-学习安排.mp4

409-2.1-Three.js下载并使用.mp4

410-2.2-一个最小Three.js代码.mp4

411-2.3-渲染循环、OrbitControls、AxesHelper..mp4

412-2.4-通过纹理贴图渲染一个地球效果.mp4

413-3.1-地球经纬度和球面坐标.mp4

414-3.2-经纬度坐标转球面坐标推理.mp4

415-3.3-解析world.json绘制所有国家边界线.mp4

416-3.4-解析world.json绘制所有国家轮廓Mesh.mp4

417-3.5-解析world.json程序生成纹理贴图.mp4

418-3.6-球面上渲染国家边界线.mp4

419-3.7-精灵模型Sprite设置地球光圈.mp4

420-3.8-所有国家边界线合并为一个.mp4

421-3.9-密集点数据可视化.mp4

422-3.10-密集点数据可视化—颜色插值明暗变化.mp4

423-3.11-轨迹线可视化.mp4

424-4.1-矩形平面Mesh标注球面某地.mp4

425-4.2-平面Mesh标注新闻热点和机场.mp4

426-4.3-光柱效果.mp4

427-4.4-地球新闻热点标注光柱.mp4

428-4.5-热点波动光圈-标注新闻热点.mp4

429-4.6-光柱、光柱底座、波动光圈合成一个.mp4

430-4.7-光柱高度、颜色和新闻热度相关.mp4

431-4.8-射线拾取新闻热点模型对象.mp4

432-5.1-整体思路( 生成每个国家的球面Mesh ).mp4

433-5.2-多边形轮廓内生成等间距网格点.mp4

434-5.3-三角剖分.mp4

435-5.4-三角剖分绘制每个国家球面Mesh.mp4

436-5.5-射线拾取国家Mesh，弹出国家名称HTML标签.mp4

437-5.6-各个国家GDP可视化(Mesh颜色深浅不同).mp4

438-5.7-地球陆地网格点阵特效.mp4

439-6.1-柱子可视化国家GDP.mp4

440-6.2-世界人口密度可视化-柱子姿态.mp4

441-6.3-世界人口密度—渲染所有柱子.mp4

442-6.4-世界人口密度层次感—顶点颜色.mp4

443-7.1-球面上两点轨迹线绘制思路.mp4

444-7.2-轨迹线实现方式—贝赛尔曲线.mp4

445-7.3-圆弧线ArcCurve介绍(绘制一条圆弧轨迹线).mp4

446-7.4-平面上三点确定一条圆弧.mp4

447-7.5.3-D空间中三点确定一条圆弧飞线轨迹.mp4

448-7.6-解析经纬度坐标数据绘制轨迹线.mp4

449-7.7-轨迹线上提取一段作为飞线.mp4

450-7.8-shader实现小蝌蚪状飞线.mp4

451-7.9-圆弧轨迹-使用圆弧绘制绘制飞线.mp4

452-7.10-练习—解析数据绘制地球飞线效果.mp4

453-7.11-飞线起始点标注和波动光圈.mp4

454-7.12-棱锥标注飞线起点.mp4

39-入门到精通(本章节当做手册查询功能使用即可)

455-1.1-第一个3D(本章节已升级为2023版本，发布在前面，选修即可).mp4

456-1.2-旋转动画、requestAnimationFrame周期性渲染.mp4

457-1.3-鼠标操作三维场景旋转缩放.mp4

458-1.4-场景插入新的几何体.mp4

459-1.5-设置材质效果.mp4

460-1.6-光照效果设置.mp4

461-2.1-顶点位置数据解析渲染.mp4

462-2.2-顶点颜色数据插值计算.mp4

463-2.3-顶点法向量数据光照计算.mp4

464-2.4-顶点索引复用顶点数据.mp4

465-2.5-设置Geometry顶点位置和颜色数据( 新版本已舍弃Geometry ).mp4

466-2.6-Face3对象定义Geometry的三角面( 新版本已舍弃Geometry ).mp4

467-2.7-访问几何体对象的数据( 新版本已舍弃Geometry ).mp4

468-3.1-常用材质介绍.mp4

469-3.2-材质共有属性、私有属性.mp4

470-4.1-点、线、网格模型介绍.mp4

471-4.2-模型对象旋转平移缩放变换.mp4

472-4.3-模型对象克隆clone复制copy.mp4

473-5.1-光照原理和常见光源类型.mp4

474-5.2-阴影投影计算.mp4

475-5.3-基类Light和Object3D.mp4

476-6.1-组对象Group、层级模型.mp4

477-6.2-对象节点命名、查找、遍历.mp4

478-6.3-本地位置坐标、世界位置坐标.mp4

479-7.1-常见几何体和曲线API介绍.mp4

480-7.2-圆弧线绘制(直线、椭圆、圆弧)、基类Curve.mp4

481-7.3-样条曲线、贝赛尔曲线.mp4

482-7.4-多个线条组合曲线CurvePath.mp4

483-7.5-曲线路径管道成型TubeGeometry.mp4

484-7.6-旋转成型LatheGeometry.mp4

485-7.7-Shape对象和轮廓填充ShapeGeometry.mp4

486-7.8-拉伸扫描成型ExtrudeGeometry.mp4

487-8.1-创建纹理贴图.mp4

488-8.2-UV映射原理(顶点纹理坐标).mp4

489-8.3-数组材质、材质索引materialIndex.mp4

490-8.4-纹理对象Texture(阵列、偏移、旋转…).mp4

491-8.5-anvas画布、视频作为纹理贴图.mp4

492-8.6-凹凸贴图、法线贴图(压缩模型).mp4

493-8.7-光照贴图添加阴影.mp4

494-8.8-高光贴图..mp4

495-8.9-环境贴图.mp4

496-8.10-数据纹理对象DataTexture.mp4

497-9.1-正投影和透视投影相机.mp4

498-9.2-窗口变化自适应渲染.mp4

499-10.1-精灵模型对象Sprite..mp4

500-10.2-中国城市PM2.5可视化案例.mp4

501-10.3-树林效果.mp4

502-10.4-下雨场景效果模拟.mp4

503-11.1-编辑关键帧并解析播放.mp4

504-11.2-解析外部模型的的帧动画.mp4

505-11.3-播放设置(暂停、时间段、时间点).mp4

506-12.1-骨骼动画原理.mp4

507-12.2-加载外部模型骨骼动画.mp4

508-12.3-变形目标动画原理.mp4

509-12.4-解析外部模型变形目标数据.avi.mp4

510-13.1-音频与场景关联(音源、监听者).mp4

511-13.2-音乐可视化..mp4

512-14.1-Three.js数据结构、导入导出..mp4

513-14.2-加载stl文件并解析.mp4

514-14.3-加载obj文件(几何体、材质、贴图.mp4

515-14.4-加载FBX并解析骨骼动画.mp4

516-14.5-手镯在线预览(商品展示).mp4

517-14.6-心脏预览(法线、高光、环境贴图)..mp4

518-15.1-场景渲染结果网页局部显示.mp4

519-16.1-向量.mp4

520-16.2-矩阵.mp4

521-16.3-旋转、平移和缩放矩阵.mp4

522-16.4-投影矩阵、视图矩阵.mp4

523-16.5-包围盒Box3、Box2、Sphere.mp4

524-16.6-欧拉Euler和四元数Quaternion.mp4

525-16.7-几何计算Line3、Triangle、Ray、Plane.mp4

526-17.1-场景、相机和渲染器（17章学习前提：熟悉webgl和threejs）.mp4

527-17.2-WebGL渲染器简介.mp4

528-17.3-renderers目录下渲染器相关代码块介绍.mp4

529-17.4-顶点数据封装.mp4

530-17.5-解析几何体提取顶点数据.mp4

531-17.6-层级模型封装和解析.mp4

532-17.7-本地矩阵和世界矩阵.mp4

533-17.8-对象具体分类过程.mp4

534-17.9-点线网格模型和绘制模式.mp4

535-17.10-光源对象分类.mp4

536-17.11-Material对应的Shader.mp4

537-17.12-处理shader代码.mp4

538-17.13-着色器字符串处理—材质属性、光源数量.mp4

539-17.14-火狐查看Three.js合成的着色器shader.mp4

540-17.15-传值-attribute.mp4

541-17.16-uniform变量传值.mp4

542-17.17-着色器材质对象ShaderMaterial.mp4

543-18.1-第一个three.js着色器程序.mp4

544-18.2-着色器—矩阵变换.mp4

545-18.3-着色器——Uniform.mp4

546-18.4-着色器——光照计算.mp4

547-18.5-着色器——颜色插值计算.mp4

548-18.6-着色器——纹理贴图.mp4

549-18.7-着色器——彩色图处理为灰度图..mp4

550-18.8-着色器——UV动画.mp4

551-18.9-着色器——着色器模块.glsl调用.mp4

552-18.10-着色器——系统uniforms模块调用UniformsLib.mp4

553-18.11-着色器——模仿系统的材质对象.mp4

554-18.12-着色器——自动提取光源对象信息.mp4

555-18.13-着色器——phong网格材质二次开发.mp4

556-18.14-WebGLRenderTarget(离屏渲染).mp4

557-18.15-WebGLRenderTarget实现灰度图后处理功能.mp4

558-16-后处理EffectComposer—自定义着色器.mp4

559-18.17-后处理EffectComposer——直接调用常见通道.mp4

560-19.1-模型标注(热点)——平面网格模型Mesh.mp4

561-19.2-模型标签——精灵模型对象Sprite.mp4

562-19.3-模型的标签——HTML元素.mp4

563-19.4-HTML元素标签位置更新.mp4

564-19.5-模型标签—HTML、CSS实现一个好看的UI效果.mp4

565-19.6-模型标签——Canvas技术与threejs结合.mp4

566-19.7-Canvas作为精灵或网格模型标签的贴图.mp4

567-19.8-CSS2DRenderer—HTML元素标签.mp4

568-19.9-CSS3DRenderer.mp4

569-19.10-标签坐标问题—局部、世界坐标.mp4

570-19.11-标签坐标问题—几何体顶点坐标.mp4

571-19.12-标签坐标问题—加载外部模型标注案例.mp4

572-19.13-标签坐标问题—几何体偏移.mp4

573-19.14-射线投射器Raycaster和射线Ray介绍.mp4

574-19.15-射线Raycaster—鼠标点击选中拾取网格模型.mp4

575-19.16-点Points线Line精灵Sprite—拾取.mp4

576-19.17-射线碰撞检测相关.mp4

577-19.18-射线拾取、模型标签坐标变换—局部渲染.mp4

578-20.1-全屏和局部区域渲染.mp4

579-20.2-Threejs画布自适应窗口尺寸变化(窗口事件).mp4

580-20.3-Three.js背景(图片作为背景或设置颜色).mp4

581-20.4-Three.js背景透明度(模型悬浮在网页上).mp4

582-20.5-WebGL渲染器锯齿问题..mp4

583-20.6-帧缓冲区(颜色、深度、模板).mp4

584-20.7-材质控制渲染管线(深度测试).mp4

585-20.8-Three.js渲染视口.setViewport().mp4

586-20.9-渲染管线剪裁测试( 剪裁方法`.setScissor()`.mp4

587-20.10-渲染管线—模板测试.mp4

588-20.11-剪裁剖切模型(lippingPlanes属性).mp4

589-20.12-添加剖切面封口(模板测试).mp4

590-20.13-Three.js渲染结果保存为图片.mp4

591-20.14-Three.js渲染更新总结.mp4

592-20.15-模型闪烁解释( 两个平面重合或非常接近 ).mp4

593-20.16-透视投影相机导致的模型闪烁Z-fighting.mp4

594-20.17-渲染顺序(.sortObjects和.renderOrder).mp4

595-20.18-多个二维图叠加渲染(禁止深度测试解决深度冲.mp4

596-20.19-一个模型总渲染在前面(排序和深度测试).mp4

597-20.20-透明和不透明three.js默认渲染顺序.mp4

598-20.21-透明模型嵌套(透明模型渲染排序).mp4

599-21.1-相机动画( .position 和 .lookAt() ).mp4

600-21.2-相机不同方向的投影视图.mp4

601-21.3-旋转canvas画布渲染结果( .up 相机上方向).mp4

602-21.4-相机漫游视线和轨迹相切( 沿已知坐标的轨迹 )..mp4

603-21.5-练习小案例—管道漫游.mp4

604-21.6-获得相机当前视线方向，并沿着视线移动.mp4

605-21.7-OrbitControls.js相机控件.mp4

606-21.8-浏览器控制台辅助选择相机视角(OrbitControls·.mp4

607-21.9-同步两个相机的位置视线等信息.mp4

608-21.10-地图导航控件MapControls.mp4

609-21.11-鼠标单击目的地，相机飞行漫游.mp4

610-21.12-相机控件与.lookAt()无效( .target属性 ).mp4

611-21.13-模型无法渲染或渲染不完整( 相机参数不匹配.mp4

612-21.14-包围盒功能辅助你合理设置相机参数.mp4

613-21.15-正投影相机自适应居中和全屏渲染模型.mp4

614-21.16-透视投影相机自适应居中和全屏模型渲染.mp4

615-21.17-判断mesh是否位于相机视锥体Frustum内.mp4

616-22.1-渲染Mesh三角形边线和顶点.mp4

617-22.2-渲染模型边界线EdgesGeometry.mp4

618-22.3-几何边线和半透明渲染模型.mp4

619-22.4-模型隐藏( .visible ).mp4

620-22.5-雾化效果(Fog).mp4

621-22.6-练习小案例—简约地面效果.mp4

622-22.7-线宽lineWidth无效( 扩展库解决线宽 ).mp4

623-22.8-模型高亮发光描边(后期处理OutlinePass).mp4

624-23.1-PBR材质简介.mp4

625-23.2-PBR材质渲染金属质感例子.mp4

626-23.3-PBR材质环境贴图(金属效果例子).mp4

627-23.4-解析外部PBR模型(金属度和粗糙度贴图).mp4

628-23.5-alphaMap透明度贴图.mp4

629-24.1-序列帧动画(多张图).mp4

630-24.2-序列帧动画(单张图，UV坐标)..mp4

631-24.3-矩形Mesh加背景透明png贴图(场景标注).mp4

632-24.4-光柱效果.mp4

633-24.5-球体Mesh渲染全景图.mp4

634-24.6-渲染全景图(矩形Mesh拼接立方体空间).mp4

635-24.7-一个贴图加载完再加载另一个(Promise和async).mp4

636-24.8-优先加载视锥体内Mesh的全景贴图.mp4

637-24.9-矩形图片剪裁为圆形渲染(CircleGeometry)..mp4

638-25.1-position控制片元.mp4

639-25.2-纹理贴图像素值混合叠加.mp4

640-25.3-随着高度透明度渐变(onBeforeCompile二次开发.mp4

641-25.4-onBeforeCompile修改Phong着色器代码(灰度图).mp4

642-25.5-PointsMaterial方点变圆点.mp4

643-25.6-练习小案例—波浪特效1.mp4

644-25.7-练习小案例—波浪特效2(圆点渲染).mp4

645-25.8-练习小案例-波浪特效3(波峰波谷点大小不同).mp4

646-26.1-绘制三角函数曲线和波动动画.mp4

647-26.2-BufferGeometory构建一个加号.mp4

648-26.3-ShapeGeometry填充加号轮廓.mp4

649-26.4-样条曲线绘制心形轮廓.mp4

650-26.5-几何体表面积计算.mp4

651-26.6-多个几何体合并为一个BufferGeometryUtils.mp4

652-26.7-山脉地形高度可视化(顶点颜色插值).mp4

653-26.8-一段曲线颜色渐变.mp4

654-26.9-一段曲线逐渐绘制出来(.setDrawRange).mp4

655-26.10-细线飞线和飞线轨迹.mp4

656-26.11-粗线飞线..mp4

657-26.12-粗头细尾飞线(自定义着色器).mp4

658-26.13-轨迹线生成带状平面Mesh.mp4

659-26.14-getSpacedPoints和getPoints曲线上取点区别.mp4

660-26.15-轨迹线生成带状平面Mesh(CurvePath直线不细·.mp4

661-26.16-直线拐角自动圆角化(贝赛尔曲线转弯)..mp4

662-26.17-直线拐角自动圆角化(圆弧转弯).mp4

663-26.18-光点或小球沿着任意轨迹线运动.mp4

664-26.19-练习小案例—纯代码模拟树和小树林.mp4

665-27.1-三维模型、美术、分工.mp4

666-27.2-三维模型导出格式问题.mp4

667-27.3-three.js编辑器editor简介.mp4

668-27.4-three.js editor设置材质和贴图.mp4

669-27.5-GLTF格式简介 (Web3D领域JPG).mp4

670-27.6-加载GLTF格式文件.mp4

671-27.7-相机渲染范围和外部模型尺寸匹配(美术与程序).mp4

672-27.8-美术是否居中导出模型问题.mp4

673-27.9-模型导出角度和姿态调整问题(美术导出注意).mp4

674-27.10-导出gltf格式是否包含光源对象.mp4

675-27.11-解析层级模型批量设置材质颜色、环境贴图等.mp4

676-27.12-加载gltf包含外部贴图.bin等文件.mp4

677-27.13-程序与美术协作(模型命名).mp4

678-27.14-获取模型加载进度设置进度条.mp4

679-27.15-解析外部模型骨骼关键帧动画(GLTF).mp4

680-27.16-模型压缩(gltf-pipeline、Draco).mp4

681-27.17-包围盒计算模型位置(平移模型居中).mp4

682-28.1-查看渲染性能(stats.js计算渲染帧率FPS).mp4

683-28.2-资源占用和性能瓶颈(CPU、内存、GPU、显存).mp4

684-28.3-控制redner执行减少GPU资源占用.mp4

685-28.4-remove()移除场景不需要的对象.mp4

686-28.5-浏览器控制台查看geometry内存占用.mp4

687-28.6-three.js对象CPU内存占用释放.mp4

688-28.7-GPU内存释放.dispose().mp4

689-28.8-几何体和材质尽量共享.mp4

690-28.9-几何体合并.mp4

691-28.10-尽量选择BufferGeometry.mp4

692-28.11-多细节层次模型Lod.mp4

693-29.1-动画库tweenjs简介和引入项目.mp4

694-29.2-第一个threejs和tweenjs结合案例.mp4

695-29.3-多段tween动画串联起来hain().mp4

696-29.4-批量创建tween动画片段并串联.mp4

697-29.5-tween开始、暂停、继续、延迟、重复.mp4

698-29.6-动画不同阶段回调函数(开始、执行中、完成).mp4

699-29.7-一段tween完成后多个tween同步执行.mp4

700-29.8-缓动算法.easing().mp4

701-29.9-模型颜色渐变动画..mp4

702-29.10-模型或标签淡入淡出.mp4

703-29.11-相机运动动画.mp4

704-30.1-Web3D项目实战开发(three.js与web前端结合).mp4

705-30.2-threejs与前端框架结合(Vue、react、angular).mp4

706-30.3-vue-cli4项目文件引入three.js.mp4

707-30.4-CSS z-index层叠问题.mp4

708-30.5-vue前端UI与3D场景交互—改变颜色.mp4

709-30.6-vue创建threejs HTML标签组件.mp4

710-30.7-加载gltf模型文件.mp4

4-【Threejs教程】2.几何体BufferGeometry顶点

38-1-几何体顶点位置数据和点模型对象Points.mp4

39-2-线模型渲染顶点数据.mp4

40-3-网格模型渲染顶点数据(三角形概念).mp4

41-4-构建一个矩形平面几何体.mp4

42-5-几何体顶点索引数据.mp4

43-6-顶点法线数据.mp4

44-7-查看three.js自带几何体顶点结构.mp4

45-8-BufferGeometry的旋转、缩放、平移方法.mp4

40-案例—智慧城市

711-1.1-智慧城市案例.mp4

712-1.2-技术方向和方案问题(选看).mp4

713-1.3-学习安排(必看).mp4

714-2.1-开发环境和threejs基本代码.mp4

715-2.2-城市3D场景构建思路和数据问题.mp4

716-2.3-加载blender导出的城市gltf模型.mp4

717-2.4-访问加载场景的某些或某个模型设置材质.mp4

718-2.5-ShapeGeometry解析城市几何数据.mp4

719-2.6-ShapeGeometry批量渲染建筑物平面图.mp4

720-2.7-经纬度转墨卡托坐标.mp4

721-2.8-ExtrudeGeometry批量渲染建筑物.mp4

722-2.9-代码生成的模型导出gltf格式.mp4

723-3.1-根据多边形轮廓坐标构建围墙geometry.mp4

724-3.2-围墙透明度渐变发光shader-自定义高度相关.mp4

725-3.3-围墙透明度渐变发光shader – 使用position控.mp4

726-3.4-围墙geometry UV坐标生成.mp4

727-3.5-围墙流动效果—texture动画.mp4

728-3.6-围墙水平方向流光.mp4

729-3.7-外部模型或threejs自带几何体流光效果.mp4

730-3.8-自定义ShapeGeometry的UV坐标，设置水面纹理.mp4

731-4.1-建筑随着高度颜色渐变shader.mp4

732-4.2-建筑物雾化效果.mp4

733-4.3-点阵模拟地面.mp4

734-4.4-模型线框.mp4

735-4.5-建筑场景扫描光带shader.mp4

736-4.6-建筑场景扫描光环shader.mp4

737-5.1-城市场景插入飞行的无人机.mp4

738-5.2-线模型绘制轨迹线.mp4

739-6.1-地面波动光圈.mp4

740-6.2-旋转棱锥.mp4

741-6.3-棱锥透明度渐变.mp4

742-6.4-圆柱透明渐变波动效果.mp4

743-6..5-透明度径向渐变球shader.mp4

744-6.6-扫描雷达效果.mp4

745-6.7-信号波动画.mp4

746-6.8-HTML标签标注无人机和建筑物.mp4

747-6.9-火焰序列帧动画.mp4

748-6.10-信号飞线shader.mp4

749-6.11-地铁公路流线shader.mp4

750-7.1-渲染帧率测试.mp4

751-7.2-几何体合并.mp4

752-7.3-draco压缩模型.mp4

753-8.1-与前端结合工程化开发.mp4

754-9.1-城市3D场景和大屏可视化图表结合.mp4

41-【WebGPU教程】1.WebGPU快速入门

755-1-WebGPU学习开发环境配置.mp4

756-2-WebGPU API和Canvas画布.mp4

757-3-创建顶点缓冲区、渲染管线.mp4

758-4-着色器语言WGSL快速了解.mp4

759-5-顶点着色器.mp4

760-6-片元着色器、图元装配.mp4

761-7-渲染命令(至此完成第一个案例).mp4

762-8-WebGPU 3D坐标系(投影).mp4

763-9-三角形拼接矩形.mp4

42-【WebGPU教程】2. 3D几何变换数学基础

764-1-数学基础(平移、旋转、缩放矩阵).mp4

765-2-模型矩阵.mp4

766-3-gl-matrix数学计算库.mp4

767-4-顶点着色器矩阵变换.mp4

768-5-传递uniform数据..mp4

769-6-gl-matrix生成顶点着色器的矩阵.mp4

770-7-WebGPU动画(uniform旋转矩阵).mp4

771-8-绕y轴旋转动画.mp4

772-9-片元的屏幕坐标.mp4

773-10-片元深度值、深度缓冲区.mp4

774-11-WebGPU顶点数据插值计算.mp4

775-12-练习—顶点位置插值.mp4

776-13-顶点颜色渐变插值.mp4

777-14-顶点位置、颜色数据共享缓冲区.mp4

778-15-练习-顶点颜色.mp4

779-16-结构体作为WGLSL函数参数.mp4

5-【Threejs教程】3.模型对象、材质

46-1-三维向量Vector3与模型位置、缩放属性.mp4

47-2-欧拉Euler与角度属性.rotation.mp4

48-3-模型材质颜色(Color对象).mp4

49-4-模型材质父类Material.mp4

50-5-模型材质和几何体属性.mp4

51-6-克隆lone()和复制py().mp4

6-【Threejs教程】4.层级模型

52-1-组对象Group、层级模型.mp4

53-2-递归遍历模型树结构、查询模型节点.mp4

54-3-本地坐标和世界坐标.mp4

55-4-改变模型相对局部坐标原点位置.mp4

56-5-移除对象.remove().mp4

57-6-模型隐藏或显示.mp4

7-【Threejs教程】5.几何顶点UV坐标、纹理贴图

58-1-创建纹理贴图.mp4

59-2-自定义顶点UV坐标.mp4

60-3-圆形平面CircleGeometry设置纹理贴图.mp4

61-4-纹理对象Texture阵列( 瓷砖地面案例 ).mp4

62-5-矩形Mesh加背景透明png贴图(场景标注).mp4

63-6-UV动画(偏移属性.offset).mp4

8-【Threejs教程】6.加载外部三维模型(gltf)

64-1-建模软件绘制3D场景(比如Blender).mp4

65-2-GLTF格式简介 (Web3D领域JPG).mp4

66-3-加载.gltf文件(模型加载全流程) (如遇版本变化参考电子书说明).mp4

67-4-OrbitControls辅助设置相机参数.mp4

68-5-gltf不同文件形式(.glb、贴图、.bin).mp4

69-6-模型命名(程序与美术协作)—层级模型节点选择.mp4

70-7-递归遍历层级模型修改材质.mp4

71-8-外部模型材质是否共享的问题.mp4

72-9-纹理.encoding和渲染器.outputEncoding.mp4

73-10-gltf模型更换.map(纹理.flipY属性).mp4

9-【Threejs教程】7.PBR材质与纹理贴图

74-1-PBR材质简介.mp4

75-2-PBR材质金属度和粗糙度(金属效果).mp4

76-3-环境贴图.envMap(金属效果).mp4

77-4-环境贴图2.mp4

78-5-MeshPhysicalMaterial清漆层Clearcoat.mp4

79-6-物理材质透光率.transmission.mp4

80-7-三维软件导出PBR材质属性.mp4

部分源码

1-9-章节.zip

three.js.zip

课件地址(图文电子书).txt