这门课解决的不只是 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 条






