这门课解决的不只是 Three.js API

课程标题写着「Three.js 可视化系统 + WebGL」,但从资料包里能看到一条更具体的线:智慧城市、智慧小区、物联网收费站、智慧工厂、地图飞线、720 度产品展示、机械 BIM 在线预览。这些不是演示 Demo,而是可视化系统里真正会出现的业务场景。所以这门课解决的是「怎么用 Three.js 做出一块能交付的可视化系统」,而不是停留在「怎么在页面上放一个旋转立方体」。课程对操控层下了不少功夫,比如渲染器与前端 UI 交互界面单独成章,覆盖 Canvas 画布布局、按钮点击和 3D 场景联动、背景透明度控制、渲染结果存成图片、模型加载进度条、模型闪烁问题处理——这些恰恰是实际开发里绕不开的整合细节。另一大块内容是生成曲线和几何体,从 ExtrudeGeometry 扫描建模、Shape 多边形轮廓(含圆弧、内孔 holes),到 EdgesGeometry 边界线、顶点颜色和颜色渐变插值。说明课程重心偏向「用代码生成和加工模型」,而不是只教加载现成模型,这也是可视化项目里最有价值的能力。

内容地图:哪些章节值得精看

资料包里并没有完整的章节顺序,但能辨认出三段分工。第一段是 3D 案例速览,也就是智慧城市、智慧小区、智慧工厂、地球飞线、地图大屏这类效果展示视频,适合放在最开始看,目的是建立目标感——每个案例哪怕只看一分钟,你也能知道 Three.js 在真实交付里能长成什么样。第二段是第 8 章「渲染器和前端 UI 交互」,这一章是整门课和前端接轨的关键,基本所有可视化项目都要面对「3D 画布和页面 UI 共存」的问题,需要精看。第三段是第 9 章「生成曲线、几何体」,它提供的是建模能力的基础,尤其是 ExtrudeGeometry 和多边形 Shape,智慧城市的楼房体块、收费站的结构、产品展示的轮廓造型都会用到,值得反复跟着敲。EdgesGeometry 做模型描边、顶点颜色和颜色渐变做数据着色,这两集在实现大屏可视化时很有用,也被你放进了资料包里,说明它们是课程重点。

学习顺序与资料配合方法

适合什么基础?需要先掌握 JavaScript 基本语法,能写简单的函数和对象,最好接触过一点 Canvas 或 Web 前端开发。如果完全没写过代码,不建议直接进。如果你已经写过一些前端页面但没用过 Three.js,可以直接选择这门课,前几集上手会比较快。强烈建议先看「案例速览」视频建立整体印象,再跳到第 9 章把几何体部分学完,接着回到第 8 章研究 UI 交互,最后再找其中一个完整案例做综合练习。

学完能独立做到什么程度?你能搭出一个带真实业务感的 3D 可视化页面,包括生成建筑体块、绘制曲线飞线、用多边形做异形轮廓、给模型加边界线、用顶点颜色做渐变色效果;前端层面能完成 UI 按钮与 3D 对象的交互控制、加载进度条、透明背景、一键导出图片,并处理模型闪烁的深度冲突问题。也就是说,你能从空页面开始,基于业务数据生成一个可视化大屏的雏形,而不是只能改改别人的 Demo。

资料的使用方式要讲究。案例展示视频是效果预览,先看一遍确定你感兴趣的视觉方向,然后去看对应源码。源码不要直接跑通就完事,建议按「场景初始化 — 几何体生成 — 材质与灯光 — 交互接入 — 导出优化」的顺序自己动手搭,卡住再回头对照视频讲解。第 8 章和第 9 章的讲解视频要逐集过一遍,每一集都是一个独立的小知识点,平时容易忽略的深度冲突、背景透明这些反而在面试和项目里很容易被问到。资料包里那几个体积较大的效果视频不用细看,它们适合在学完每个功能模块后回看一遍,检验自己能否做出同级别效果。

课程目录

WY-
1-课程部分3D案例展示
1-课程案例源码3D效果5分钟速览.mp4 201.25M
2-智慧城市数字孪生3D可视化.mp4 100.50M
3-智慧小区(第一阶段效果).mp4 79.81M
4-物联网数字孪生3D可视化案例——收费站.mp4 14.24M
5-智慧工厂(初步效果,完善中).mp4 61.16M
6-产品720 3D展示( 轿车 手机).mp4 34.67M
7-地球大屏3D可视化—飞线.mp4 35.12M
8-地图中国大屏可视化.mp4 5.99M
9-机械 BIM在线预览(源码在课件中).mp4 2.10M
10-【Threejs教程】8.渲染器和前端UI交互界面
81-1.three.js Canvas画布布局.mp4 51.22M
82-2.UI交互界面与Canvas画布叠加.mp4 23.64M
83-3.UI交互按钮与3D场景交互.mp4 10.53M
84-4.Three.js背景透明度.mp4 31.08M
85-5.Three.js渲染结果保存为图片.mp4 27.88M
86-6.深度冲突(模型闪烁).mp4 42.49M
87-7.模型加载进度条.mp4 45.21M
11-【Threejs教程】9.生成曲线、几何体
100-13.扫描ExtrudeGeometry.mp4 17.09M
101-14.多边形轮廓Shape简介.mp4 34.13M
102-15.多边形轮廓Shape(圆弧).mp4 31.40M
103-16.多边形Shape(内孔.holes).mp4 17.69M
104-17.模型边界线EdgesGeometry.mp4 41.58M
105-18.几何体顶点颜色数数据.mp4 29.75M
106-19.一段曲线颜色渐变.mp4 29.03M
107-20.Color颜色渐变插值.mp4 40.11M
108-21.查看或设置gltf几何体顶点.mp4 34.08M
109-22.山脉地形高度可视化.mp4 45.43M
88-1.生成圆弧顶点.mp4 26.35M
89-2.几何体方法.setFromPoints().mp4 23.92M
90-3.曲线Curve简介.mp4 34.57M
91-4.椭圆、圆.mp4 26.29M
92-5.样条曲线.mp4 52.44M
93-6.贝塞尔曲线.mp4 57.65M
94-7.样条、贝塞尔曲线应用.mp4 39.29M
95-8.组合曲线CurvePath拼接不同曲线.mp4 44.75M
96-9.曲线路径管道TubeGeometry.mp4 39.97M
97-10.旋转成型LatheGeometry.mp4 23.25M
98-11.轮廓填充ShapeGeometry.mp4 17.00M
99-12.拉伸ExtrudeGeometry.mp4 39.81M
12-【Threejs教程】10.相机基础
110-1.正投影相机.mp4 98.91M
111-2.正投影相机-Canvas画布尺寸变化.mp4 39.17M
112-3.包围盒Box3.mp4 26.19M
113-4.地图案例(包围盒、正投影).mp4 58.50M
114-5.相机动画( .position 和 .lookAt() ).mp4 162.41M
115-6.不同方向的投影视图.mp4 16.95M
116-7.相机上方向.up(旋转渲染结果).mp4 18.45M
117-8.管道漫游案例.mp4 78.95M
118-9.OrbitControls旋转缩放限制.mp4 111.24M
119-10.相机控件MapControls.mp4 40.89M
13-【Threejs教程】11.光源和阴影
120-1.聚光源SpotLight.mp4 39.74M
121-2.平行光阴影计算.mp4 64.36M
122-3.阴影范围.shadow.camera.mp4 81.23M
123-4.阴影像素、弱化阴影边缘.mp4 47.35M
124-5.工厂光源(环境贴图和环境光).mp4 59.56M
125-6.工厂光源(平行光模拟太阳光).mp4 91.49M
126-7.工厂(模拟太阳光阴影).mp4 75.75M
127-8.gui辅助调节阴影范围.mp4 56.34M
14-【Threejs教程】12.精灵模型Sprite
128-1.精灵模型对象Sprite.mp4 49.80M
129-2.精灵模型标注场景(贴图).mp4 54.34M
130-3.Sprite模拟下雨、下雪.mp4 132.00M
15-【Threejs教程】13.后期处理
131-1.后处理(高亮发光描边OutlinePass).mp4 42.92M
132-2.OutlinePass发光描边样式.mp4 20.39M
133-3.Bloom发光通道.mp4 35.46M
134-4.多通道组合(GlitchPass和描边).mp4 27.89M
135-5.gltf工厂模型设置发光描边.mp4 48.68M
136-6.gltf后处理颜色异常(伽马校正).mp4 43.53M
137-7.抗锯齿后处理.mp4 70.68M
16-【Threejs教程】14.射线拾取模型
138-1.射线Ray.mp4 70.80M
139-2.Raycaster(射线拾取模型).mp4 52.62M
140-3.屏幕坐标转标准设备坐标.mp4 63.80M
141-4.Raycaster(鼠标点击选中模型).mp4 30.60M
142-5.Canvas尺寸变化(射线坐标计算).mp4 47.01M
143-6.射线拾取层级模型(发光描边).mp4 62.75M
144-7.射线拾取Sprite控制场景.mp4 22.89M
17-【Threejs教程】15.场景标注标签信息
145-1.CSS2DRenderer(HTM元素作为标签).mp4 89.99M
146-2.HTML标签遮挡Canvas画布事件.mp4 37.84M
147-3.Canvas画布尺寸变化(HTML标签).mp4 41.71M
148-4.标签位置不同设置方式.mp4 56.55M
149-5.标签位置(标注工厂设备).mp4 69.91M
150-6.标签指示线或箭头指向标注点.mp4 70.72M
151-7.鼠标选中模型弹出标签(工厂案例).mp4 85.34M
152-8.单机按钮关闭HTML标签.mp4 45.87M
153-9.CSS3DRenderer渲染HTML标签.mp4 86.69M
154-10.CSS3批量标注多个标签.mp4 72.41M
155-11.精灵模型Sprite作为标签.mp4 47.84M
156-12.Sprite标签(Canvas作为贴图).mp4 65.64M
18-【Threejs教程】16.关键帧动画
157-1.关键帧动画.mp4 55.04M
158-2.动画播放(暂停、倍速、循环).mp4 64.91M
159-3.动画播放(拖动任意时间状态).mp4 42.72M
160-4.解析外部模型关键帧动画.mp4 58.68M
161-5.机械虚拟装配案例(播放).mp4 36.98M
162-6.虚拟装配(任意时间定位).mp4 28.40M
163-7.变形动画原理.mp4 60.08M
164-8.变形动画(定制人物胖瘦).mp4 56.34M
165-9.骨骼关节Bon.mp4 47.05M
166-10.查看外部模型骨骼动画.mp4 71.09M
167-11.骨骼动画不同动作切换.mp4 48.69M
19-【Threejs教程】17.动画库tween.js
168-1.tweenjs创建threejs动画.mp4 46.30M
169-2.tweenjs相机运动动画.mp4 65.01M
170-3.点按钮,相机飞行靠近观察设备..mp4 157.59M
171-4.点击设备,相机靠近放大预览.mp4 89.31M
172-5.缓动算法.easing(地球渐入相机动画).mp4 44.14M
173-6.模型或标签淡入淡出.mp4 62.08M
2-Web3D生态和如何学习
10-课程面向人群.mp4 16.21M
11-Web3D现状以及如何学习.mp4 13.66M
12-WebGL前端工程师工作、要求、待遇问题.mp4 48.28M
20-【Blender】Blender基础操作
174-1.Web3D可视化3D建模.mp4 27.07M
175-2.Blender下载、安装、中文界面.mp4 6.66M
176-3.基本操作:旋转、缩放、平移.mp4 26.28M
177-4.编辑、保存网格模型.mp4 37.58M
178-5.Blender导出gltf(美术与程序员协作).mp4 37.64M
21-【Threejs 进阶】1. 数学几何计算基础(向量)
179-1.threejs坐标系与三角函数.mp4 44.54M
180-2.三维向量Vector3简介.mp4 63.07M
181-3.向量大小(Vector3长度.length()).mp4 96.26M
182-4.向量方向(归一化.normalize).mp4 66.39M
183-5.相机沿着视线方向运动.mp4 122.62M
184-6.箭头ArrowHelper.mp4 53.55M
22-【Threejs 进阶】2. 位移、速度、加速度
185-1.匀速动画(向量表示速度).mp4 39.35M
186-2.物体下落动画(重力加速度).mp4 48.24M
23-【Threejs 进阶】3. 向量点乘、叉乘
187-1.向量点乘dot.mp4 35.49M
188-2.点乘练习-计算三角形夹角.mp4 25.29M
189-3.点乘判断物体在人前或人后.mp4 34.76M
190-4.点乘判断是否在扇形内.mp4 44.29M
191-5.向量叉乘cross.mp4.mp4 72.97M
192-6.叉乘判断人左右.mp4 61.84M
193-7.点乘判断平行向量方向异同.mp4 14.21M
194-8.判断两个点是否在线段同一侧.mp4 48.73M
195-9.叉乘计算三角形法线.mp4 27.76M
196-10.叉乘计算三角形面积.mp4 17.40M
197-11.练习—计算物体的表面积.mp4 41.98M
198-12.点到直线的距离.mp4 21.33M
24-【Threejs 进阶】4.四元数、欧拉角(角度姿态)
199-1.欧拉角Euler.mp4 76.69M
200-2.四元数Quaternion.mp4 44.52M
201-3.四元数表示物体姿态.mp4 28.78M
202-4.四元数乘法运算.mp4 37.59M
203-5.四元数表示两个向量旋转.mp4 31.60M
204-6.练习-无人机绕飞.mp4 98.89M
25-【Threejs 进阶】5. 矩阵基础
205-1.数学基础(平移、旋转、缩放矩阵).mp4 39.80M
206-2.模型矩阵.mp4 42.06M
207-3.Three.js矩阵Matrix4.mp4 48.68M
208-4.矩阵乘法multiply.mp4 34.37M
209-5.模型本地矩阵、世界矩阵.mp4 50.42M
210-6.视图矩阵、投影矩阵.mp4 105.05M
26-【Threejs进阶】6.射线
211-1. 射线Ray(复习前面内容).mp4 70.80M
212-2.射线拾取模型(复习前面).mp4 52.62M
27-【Threejs进阶】7.包围盒
213-1.包围盒Box3(复习前面).mp4 26.19M
28. 第一、三人称漫游 ( 游戏元宇宙 常用)
214-1.键盘WASD按键状态记录.mp4 61.11M
215-2.W键控制角色模型运动.mp4 43.92M
216-3.W控制人移动,设置加速度.mp4 30.34M
217-4.阻尼(玩家角色逐渐减速停止).mp4 29.00M
218-5.按键S退后运动.mp4 24.72M
219-6.相机跟着玩家走(第三人称漫游).mp4 70.62M
220-7.鼠标左右拖动改变玩家视角.mp4 64.32M
221-8.获取玩家(相机)正前方方向.mp4 56.65M
222-9.鼠标上下滑动改变相机视角.mp4 71.83M
223-10.玩家角色左右运动(叉乘).mp4 47.88M
224-11.鼠标滑动改变视角(指针锁定模式).mp4 67.62M
225-12.快捷键切换第一、第三人称.mp4 52.16M
226-13.骨骼动画与运动状态关联.mp4 73.60M
29-第一、三人称漫游—八叉树碰撞检测( 更新中 )
227-1.八叉树Octree扩展库介绍.mp4 100.54M
3-【Threejs教程】1.快速入门(2023年新版本)
13-1.threejs文件包下载和目录简介.mp4 35.18M
14-2.学习环境—代码编辑器和本地静态服务器.mp4 32.48M
15-3.开发和学习环境,引入threejs库.mp4 54.40M
16-4.第一个3D案例—创建3D场景.mp4 40.69M
17-5.第一个3D案例—透视投影相机.mp4 61.57M
18-6.第一个3D案例—渲染器.mp4 46.14M
19-7.Threejs三维坐标系—加强三维空间认识.mp4 49.07M
20-8.光源对物体表面影响.mp4 41.74M
21-9.相机控件轨道控制器OrbitControls.mp4 43.42M
22-【选修】Vue + Threejs 开发环境( 可跳过 ).mp4 56.76M
23-【选修】React + Threejs开发环境( 可跳过 ).mp4 47.77M
24-10.平行光与环境光.mp4 60.59M
25-11.动画渲染循环.mp4 58.65M
26-12.Canvas画布布局和全屏.mp4 38.00M
27-13.stats查看threejs渲染帧率.mp4 61.95M
28-14.阵列立方体和相机适配体验.mp4 72.07M
29-15.Threejs常见简单几何体简介.mp4 32.92M
30-16.高光网格材质MeshPhongMaterial.mp4 38.19M
31-17.WebGL渲染器设置(锯齿模糊、背景颜色).mp4 29.81M
32-18.gui.js库(可视化改变三维场景).mp4 69.05M
33-19.gui.js库(颜色、命名、步长、事件).mp4 37.46M
34-20.gui.js库(下拉菜单、单选框).mp4 39.87M
35-21.gui.js库(分组).mp4 35.38M
36-22.查询案例examples和文档(辅助开发).mp4 45.69M
37-23.threejs语法总结.mp4 71.24M
30-【Threejs进阶】10.物理引擎CannonJS(更新中)
228-1.CannonJS简介和引入.mp4 30.99M
229-2.CannonJS自由落体计算.mp4 55.58M
230-3.练习-threejs可视化cannon计算结果.mp4 28.56M
231-4. CannonJS模拟乒乓球下落反弹.mp4 40.91M
232-5.练习-修改小球参数.mp4 23.22M
233-6.练习-点按钮重复下落.mp4 16.03M
234-7.CannonJS碰撞事件,碰撞声音.mp4 41.72M
235-8.长方体Box碰撞体(箱子下落).mp4 63.09M
236-9.练习题-外部gltf箱子模型.mp4 39.99M
237-10.凸多面体ConvexPolyhedron.mp4 50.45M
31-案例——物联网粮仓
238-1.2.项目方案选择.mp4 138.49M
239-1.3.学习安排(必看).mp4 49.98M
240-1.4.公司项目人员方案.mp4 37.59M
241-2.1.Three.js下载特定版本并使用.mp4 23.49M
242-2.2.一个最小Three.js代码.mp4 45.62M
243-2.3.渲染循环.mp4 21.30M
244-2.4.Three.js开发辅助工具.mp4 32.45M
245-2.5.项目部署Canvas画布页面布局相关.mp4 32.33M
246-2.6.Three.js代码模块化.mp4 34.76M
247-3.1.三维软件绘制模型(美术和程序协作).mp4 61.22M
248-3.2.体验three.js editor编辑器-搭建一个三维场景.mp4 68.37M
249-3.3. GLTF格式模型文件简介 (Web3D领域JPG).mp4 138.31M
250-3.4.建模软件导出GLTF(blender、3dmax).mp4 40.92M
251-3.5.加载GLTF格式粮仓基地模型.mp4 70.08M
252-3.6.粮仓贴图颜色偏差问题解决.mp4 48.23M
253-3.7.gltf相关文件glb.mp4 22.78M
254-3.8.gltf文件是否包含光源.mp4 184.55M
255-3.9.相机渲染范围和视角设置.mp4 70.08M
256-3.10.模型导出位置和姿态问题注意.mp4 35.71M
257-3.11.加载gltf模型(透视投影相机).mp4 386.44M
258-3.12.批量修改GLTF材质.mp4 42.88M
259-3.13.粮仓基地场景雾化效果设置(Fog).mp4 52.63M
260-4.1.模型命名(程序与美术协作).mp4 53.49M
261-4.2.粮仓基地模型命名并导出.mp4 80.67M
262-4.3.CSS2DRenderer标注每个粮仓.mp4 493.54M
263-4.4.CSS3DRenderer标注每个粮仓.mp4 57.53M
264-4.5.鼠标交互-射线拾取.mp4 46.82M
265-4.6.射线拾取弹出粮仓HTML信息标签.mp4 52.59M
266-4.7.火焰效果(序列帧动画).mp4 88.08M
267-4.8.粮仓火焰标注.mp4 43.76M
268-4.9.火焰信息标签.mp4 24.30M
32-案例—产品720展示(轿车、手机)
269-1.1.课程效果展示.mp4 34.67M
270-1.2.产品Web3D展示方案.mp4 52.49M
271-1.3.学习安排.mp4 61.71M
272-2.1.手机相关几个章节学习指南.mp4 20.37M
273-2.2.绘制产品三维模型—手机.mp4 34.21M
274-2.3.Blender或3dmax导出gltf格式模型.mp4 29.53M
275-2.4.三维软件导出产品模型注意.mp4 52.30M
276-2.5.Blender预览产品PBR材质的模型.mp4 76.80M
277-2.6.Three.js下载R125版本并使用.mp4 52.70M
278-2.7.threejs最小案例—模型和光源.mp4 115.40M
279-2.8.threejs最小案例—相机和渲染器.mp4 85.37M
280-2.9.渲染循环(设置产品旋转预览动画).mp4 39.17M
281-2.10.产品预览旋转和缩放(相机控件OrbitControls).mp4 70.37M
282-3.1.three.js加载gltf模型.mp4 62.23M
283-3.2.查询模型节点并设置模型PBR材质贴图.mp4 64.17M
284-3.3.产品展示相机参数设置注意.mp4 102.92M
285-3.4.环境贴图envMap.mp4 50.83M
286-3.5.调试场景光源参数.mp4 59.44M
287-3.6.手机产品旋转动画控制.mp4 49.28M
288-3.7.Canvas画布全屏且跟随窗口变化.mp4 32.21M
289-3.8.three.js代码模块化.mp4 28.52M
290-3.9.gui辅助调节光源强度、位置、受环境光影响程.mp4 76.20M
291-4.1.产品展示缩放和旋转范围约束.mp4 46.84M
292-4.2.一个720辅助显示的圆弧线—圆弧线.mp4 51.41M
293-4.3.一个720辅助显示的圆弧线—720符号.mp4 33.33M
294-4.4.UI按钮暂停手机旋转动画.mp4 56.32M
295-4.5.前端UI按钮切换颜色贴图.mp4 52.07M
296-4.6.练习例子—canvas局部布局UI按钮切换颜色贴图.mp4 28.29M
297-4.7.颜色贴图.map切换动画.mp4 40.39M
298-4.8.产品特定部位标注—光点.mp4 50.14M
299-4.9.产品特定部位标注—半透明叠加问题解决.mp4 23.85M
300-4.10.产品特定部位标注—波动光点.mp4 28.32M
301-4.11.HTML 2D标签标注相机热点.mp4 78.21M
302-4.12.HTML 3D标签标注相机热点.mp4 38.36M
303-4.13.射线拾取标注热点—弹出信息.mp4 78.78M
304-4.14.点击热点弹出HTML信息标签.mp4 46.78M
305-5.1.轿车3D模型基本情况简介.mp4 44.23M
306-5.2.加载车gltf模型1—模型和相机.mp4 80.59M
307-5.3.加载车gltf模型2—材质和贴图.mp4 36.92M
308-5.4.gltf加载颜色空间和颜色失真问题.mp4 66.60M
309-5.5.批量设置Mesh环境贴图.mp4 16.78M
310-5.6.MeshStandardMaterial金属度和粗糙度了解.mp4 66.41M
311-5.7.设置后视镜效果.mp4 37.73M
312-5.8.MeshPhysicalMaterial(车外壳、车玻璃).mp4 56.51M
313-5.9.代码创建一个地面.mp4 58.74M
314-5.10.代码创建一个隧道.mp4 52.39M
315-5.11.设置雾化效果.mp4 28.06M
316-5.12.约束相机控件的旋转、缩放和平移.mp4 91.39M
317-6.1.车开关门—思路和模型问题.mp4 65.32M
318-6.2.车门开关—热点标注.mp4 51.02M
319-6.3.车门开关—射线拾取,打开或关门车门.mp4 35.71M
320-6.4.tweenjs库设置开关门动画.mp4 48.88M
321-6.5.车门开关—开关门声音.mp4 28.99M
322-6.6.颜色款式选择.mp4 31.05M
323-6.7.颜色变化动画.mp4 46.17M
324-6.8.背景音乐设置.mp4 23.00M
325-6.9.旋转动画开启或关闭.mp4 22.30M
326-10.车前灯开关模拟.mp4 76.20M
33-【WebGL教程】1.WebGL快速入门(更新中)
327-1.学前说明.mp4 30.52M
328-2.着色器GLSL ES语言.mp4 34.08M
329-3.第一个WebGL案例(绘制一个点).mp4 79.32M
330-4.WebGL坐标系.mp4 31.33M
34-WebGL入门教程( 学习上个章节新录制的即可 )
331-0.学习WebGL的必要性.mp4 45.16M
332-1.第一个WebGL程序(绘制一个点).mp4 51.91M
333-2.WebGL绘制一个矩形.mp4 70.12M
334-3.WebGL坐标系(投影).mp4 29.91M
335-4.WebGL平移变换.mp4 28.85M
336-5.绘制一个立方体(WebGL旋转变换).mp4 35.05M
337-6.WebGL顶点索引绘制.mp4 35.62M
338-7.varying变量和颜色插值..mp4 47.87M
339-8.立方体(每个面一种颜色).mp4 21.01M
340-9.WebGL光照渲染立方体.mp4 101.28M
341-10.立方体旋转动画.mp4 36.28M
342-11.WebGL绘制多个几何体.mp4 27.20M
343-12.纹理贴图.mp4 44.07M
344-13.彩色图转灰度图.mp4 19.90M
345-14.切换着色器程序.mp4 52.19M
346-15.WebGL透明度与α融合.mp4 17.82M
347-16.深度测试与α融合.mp4 18.01M
35-【Shader教程】1.threejs Shader基础语法
348-1.学前说明.mp4 28.79M
349-2.着色器GLSL ES语言(复习WebGL中内容).mp4 34.08M
350-3.ShaderMaterial着色器材质.mp4 107.09M
351-4.ShaderMaterial半透明、双面显示.mp4 20.74M
352-5.uniform变量传值.mp4 31.69M
353-6.WebGL渲染管线.mp4 48.78M
354-7.片元屏幕坐标fragCoord.xy.mp4 33.05M
355-8.顶点颜色varying插值计算.mp4 36.83M
356-9.顶点位置插值(实现渐变色).mp4 63.74M
357-10.颜色贴图map(顶点UV坐标).mp4 47.89M
358-11.shader模仿点材质效果.mp4 44.11M
359-12.attribute自定义顶点变量.mp4 26.86M
36-【shader教程】2. onBeforeCompile修改材质
360-1.threejs各个材质的shader代码.mp4 43.83M
361-2.onBeforeCompile修改材质shader.mp4 43.09M
362-3.修改材质shader(彩色图变灰度图).mp4 22.26M
363-4.顶点位置插值(设置片元颜色).mp4 56.56M
364-5.顶点位置插值(设置片元颜色)2.mp4 54.94M
365-6.模型扫光效果(顶点位置插值).mp4 36.87M
366-7.模型扫光效果(颜色渐变).mp4 33.76M
37-案例—大屏3D地图可视化
367-1.1.课程完成效果展示.mp4 63.06M
368-1.2.技术选择(SVG、Canvas、WebGL、Three.js).mp4 59.23M
369-1.3.Three.js引擎简介.mp4 158.74M
370-1.4.学习细节安排.mp4 18.29M
371-2.1.GeoJOSN数据简介和获取.mp4 42.15M
372-2.2.先通过Three.js实现一个基础渲染代码.mp4 332.65M
373-2.3.渲染非全屏(相机和渲染器).mp4 56.05M
374-2.4.相机渲染范围、位置和目标.mp4 57.49M
375-2.5.渲染循环和相机控件OrbitControls.mp4 108.16M
376-2.6.解析边界线(几何体顶点和Line模型).mp4 107.49M
377-2.7.Shape几何体填充行政区域.mp4 206.96M
378-2.8.渲染中国地图(相机参数适配).mp4 305.01M
379-2.9.渲染省份或城市地图轮廓.mp4 29.61M
380-2.10.拉伸行政区轮廓.mp4 74.33M
381-2.11.经纬度转墨卡托坐标.mp4 39.40M
382-3.1.矩形贴图标注位置.mp4 69.71M
383-3.2.热点—波动光圈.mp4 53.20M
384-3.3.热点—旋转棱锥.mp4 39.40M
385-3.4.HTML元素作为标签(世界坐标转屏幕坐标).mp4 30.40M
386-3.5.HTML元素作为标签(CSS2DRenderer).mp4 64.97M
387-3.6.HTML元素作为标签(CSS3DRenderer).mp4 49.58M
388-3.7.鼠标单击拾取选中一个行政区.mp4 47.62M
389-4.1.中国地图颜色深浅可视化.mp4 60.53M
390-4.2.练习-世界各国GDP可视化(区域颜色深浅).mp4 35.67M
391-4.3.行政区域拉伸不同高度可视化数据.mp4 45.69M
392-4.4.气泡图(不同颜色和大小圆圈).mp4 125.81M
393-4.5.柱子可视化数据.mp4 30.15M
394-5.1.密集点(微博登录活动).mp4 20.02M
395-5.2.Line可视化轨迹线(北京公交轨迹).mp4 12.79M
396-5.3.Line可视化轨迹线(全球高速公路轨迹GeoJSON).mp4 25.42M
397-5.4.世界人口密度(柱子可视化).mp4 201.11M
398-5.5.世界人口密度(柱子颜色渐变)..mp4 64.63M
399-5.6.世界人口密度可视化(几何体合并).mp4 74.49M
400-5.7.柱子可视化(数据特定间距).mp4 40.79M
401-6.1.轨迹线(样条曲线).mp4 53.30M
402-6.2.飞线(轨迹线上提取一段作为飞线).mp4 24.39M
403-6.3.飞线粗细设置(linewidth)..mp4 24.22M
404-6.4.shader实现小蝌蚪状飞线.mp4 128.58M
405-6.5.练习题—飞线综合案例.mp4 125.85M
38-案例——大屏3D地球可视化
406-1.1.地球大屏数据可视化效果.mp4 35.12M
407-1.1.课程完成案例展示.mp4 71.26M
408-1.2.学习安排.mp4 25.38M
409-2.1.Three.js下载并使用.mp4 33.33M
410-2.2.一个最小Three.js代码.mp4 95.90M
… 共 827 条