01 课程部分3D案例展示 · 02 Web3D生态和如何学习 · 03 Three.js快速入门(初学者，一节一节学习) · 04 入门到精通（内容巨多，可按

*   01 课程部分3D案例展示/

  *   01 物联网数字孪生3D可视化案例——收费站

  *   02 智慧城市数字孪生3D可视化

  *   03 产品720 3D展示( 轿车 手机)

  *   04 地球大屏3D可视化—飞线

  *   05 地图中国大屏可视化

*   02 Web3D生态和如何学习/

  *   01 课程面向人群

  *   02 Web3D现状以及如何学习

  *   03 WebGL前端工程师工作、要求、待遇问题

*   03 Three.js快速入门(初学者，一节一节学习)/

  *   01 1.three.js下载特定版本资源包，并启动文档

  *   02 2.html文件中引入three

  *   03 3.第一个3D案例—创建3D场景

  *   04 4.第一个3D案例—相机和渲染器

  *   05 5.光源设置

  *   06 6.相机控件轨道控制器OrbitControls

  *   07 7.threejs三维坐标系

  *   08 8.动画渲染循环

  *   09 9.threejs画布尺寸和布局

  *   10 10.阵列立方体和相机适配体验

*   04 入门到精通（内容巨多，可按需学习）/

  *   01 1.1 第一个3D场景(已入门，可以跳过1.1~1.6)

  *   02 1.2 旋转动画、requestAnimationFrame周期性渲染

  *   03 1.3 鼠标操作三维场景旋转缩放

  *   04 1.4 场景插入新的几何体

  *   05 1.5 设置材质效果

  *   06 1.6 光照效果设置

  *   07 2.1.顶点位置数据解析渲染

  *   08 2.2.顶点颜色数据插值计算

  *   09 2.3.顶点法向量数据光照计算

  *   10 2.4.顶点索引复用顶点数据

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

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

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

  *   14 3.1.常用材质介绍

  *   15 3.2.材质共有属性、私有属性

  *   16 4.1.点、线、网格模型介绍

  *   17 4.2.模型对象旋转平移缩放变换

  *   18 4.3.模型对象克隆clone复制copy

  *   19 5.1.光照原理和常见光源类型

  *   20 5.2.阴影投影计算

  *   21 5.3.基类Light和Object3D

  *   22 6.1.组对象Group、层级模型

  *   23 6.2.对象节点命名、查找、遍历

  *   24 6.3.本地位置坐标、世界位置坐标

  *   25 7.1.常见几何体和曲线API介绍

  *   26 7.2.圆弧线绘制(直线、椭圆、圆弧)、基类Curve

  *   27 7.3.样条曲线、贝赛尔曲线

  *   28 7.4.多个线条组合曲线CurvePath

  *   29 7.5.曲线路径管道成型TubeGeometry

  *   30 7.6.旋转成型LatheGeometry

  *   31 7.7.Shape对象和轮廓填充ShapeGeometry

  *   32 7.8.拉伸扫描成型ExtrudeGeometry

  *   33 8.1.创建纹理贴图

  *   34 8.2.UV映射原理(顶点纹理坐标)

  *   35 8.3.数组材质、材质索引materialIndex

  *   36 8.4.纹理对象Texture(阵列、偏移、旋转...)

  *   37 8.5.canvas画布、视频作为纹理贴图

  *   38 8.6.凹凸贴图、法线贴图(压缩模型)

  *   39 8.7.光照贴图添加阴影

  *   40 8.8.高光贴图.

  *   41 8.9.环境贴图

  *   42 8.10.数据纹理对象DataTexture

  *   43 9.1.正投影和透视投影相机

  *   44 9.2.窗口变化自适应渲染

  *   45 10.1.精灵模型对象Sprite.

  *   46 10.2.中国城市PM2.5可视化案例

  *   47 10.3.树林效果

  *   48 10.4.下雨场景效果模拟

  *   49 11.1.编辑关键帧并解析播放

  *   50 11.2.解析外部模型的的帧动画

  *   51 11.3.播放设置(暂停、时间段、时间点)

  *   52 12.1.骨骼动画原理

  *   53 12.2.加载外部模型骨骼动画

  *   54 12.3.变形目标动画原理

  *   55 12.4.解析外部模型变形目标数据.avi

  *   56 13.1.音频与场景关联(音源、监听者)

  *   57 13.2.音乐可视化.

  *   58 14.1.Three.js数据结构、导入导出.

  *   59 14.2.加载stl文件并解析

  *   60 14.3.加载obj文件(几何体、材质、贴图

  *   61 14.4.加载FBX并解析骨骼动画

  *   62 14.5.手镯在线预览(商品展示)

  *   63 14.6.心脏预览(法线、高光、环境贴图).

  *   64 15.1.场景渲染结果网页局部显示

  *   65 16.1.向量

  *   66 16.2.矩阵

  *   67 16.3.旋转、平移和缩放矩阵

  *   68 16.4.投影矩阵、视图矩阵

  *   69 16.5.包围盒Box3、Box2、Sphere

  *   70 16.6.欧拉Euler和四元数Quaternion

  *   71 16.7.几何计算Line3、Triangle、Ray、Plane

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

  *   73 17.2.WebGL渲染器简介

  *   74 17.3.renderers目录下渲染器相关代码块介绍

  *   75 17.4.顶点数据封装

  *   76 17.5.解析几何体提取顶点数据

  *   77 17.6.层级模型封装和解析

  *   78 17.7.本地矩阵和世界矩阵

  *   79 17.8.对象具体分类过程

  *   80 17.9.点线网格模型和绘制模式

  *   81 17.10.光源对象分类

  *   82 17.11.Material对应的Shader

  *   83 17.12.处理shader代码

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

  *   85 17.14.火狐查看Three.js合成的着色器shader

  *   86 17.15.传值-attribute

  *   87 17.16.uniform变量传值

  *   88 17.17.着色器材质对象ShaderMaterial

  *   89 18.1.第一个three.js着色器程序

  *   90 18.2.着色器—矩阵变换

  *   91 18.3.着色器——Uniform

  *   92 18.4.着色器——光照计算

  *   93 18.5.着色器——颜色插值计算

  *   94 18.6.着色器——纹理贴图

  *   95 18.7.着色器——彩色图处理为灰度图.

  *   96 18.8.着色器——UV动画

  *   97 18.9.着色器——着色器模块.glsl调用

  *   98 18.10.着色器——系统uniforms模块调用UniformsLib

  *   99 18.11.着色器——模仿系统的材质对象

  *   100 18.12.着色器——自动提取光源对象信息

  *   101 18.13.着色器——phong网格材质二次开发

  *   102 18.14.WebGLRenderTarget(离屏渲染)

  *   103 18.15.WebGLRenderTarget实现灰度图后处理功能

  *   104 18.17.后处理EffectComposer——直接调用常见通道

  *   105 19.1.模型标注(热点)——平面网格模型Mesh

  *   106 19.2.模型标签——精灵模型对象Sprite

  *   107 19.3.模型的标签——HTML元素

  *   108 19.4.HTML元素标签位置更新

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

  *   110 19.6.模型标签——Canvas技术与threejs结合

  *   111 19.7.Canvas作为精灵或网格模型标签的贴图

  *   112 19.8.CSS2DRenderer—HTML元素标签

  *   113 19.9.CSS3DRenderer

  *   114 19.10.标签坐标问题—局部、世界坐标

  *   115 19.11.标签坐标问题—几何体顶点坐标

  *   116 19.12.标签坐标问题—加载外部模型标注案例

  *   117 19.13.标签坐标问题—几何体偏移

  *   118 19.14.射线投射器Raycaster和射线Ray介绍

  *   119 19.15.射线Raycaster—鼠标点击选中拾取网格模型

  *   120 19.16.点Points线Line精灵Sprite—拾取

  *   121 19.17.射线碰撞检测相关

  *   122 19.18.射线拾取、模型标签坐标变换—局部渲染

  *   123 20.1.全屏和局部区域渲染

  *   124 20.2.Threejs画布自适应窗口尺寸变化(窗口事件)

  *   125 20.3.Three.js背景(图片作为背景或设置颜色)

  *   126 20.4.Three.js背景透明度(模型悬浮在网页上)

  *   127 20.5.WebGL渲染器锯齿问题.

  *   128 20.6.帧缓冲区(颜色、深度、模板)

  *   129 20.7.材质控制渲染管线(深度测试)

  *   130 20.8.Three.js渲染视口.setViewport()

  *   131 20.9.渲染管线剪裁测试( 剪裁方法`.setScissor()`

  *   132 20.10.渲染管线—模板测试

  *   133 20.11.剪裁剖切模型(.clippingPlanes属性)

  *   134 20.12.添加剖切面封口(模板测试)

  *   135 20.13.Three.js渲染结果保存为图片

  *   136 20.14.Three.js渲染更新总结

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

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

  *   139 20.17.渲染顺序(.sortObjects和.renderOrder)

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

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

  *   142 20.20.透明和不透明three.js默认渲染顺序

  *   143 20.21.透明模型嵌套(透明模型渲染排序)

  *   144 21.1.相机动画( .position 和 .lookAt() )

  *   145 21.2.相机不同方向的投影视图

  *   146 21.2.相机不同方向的投影视图

  *   147 21.3.旋转canvas画布渲染结果( .up 相机上方向)

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

  *   149 21.5.练习小案例—管道漫游

  *   150 21.6.获得相机当前视线方向，并沿着视线移动

  *   151 21.7.OrbitControls.js相机控件

  *   152 21.8.浏览器控制台辅助选择相机视角(OrbitControls

  *   153 21.9.同步两个相机的位置视线等信息

  *   154 21.10.地图导航控件MapControls

  *   155 21.11.鼠标单击目的地，相机飞行漫游

  *   156 21.12.相机控件与.lookAt()无效( .target属性 )

  *   157 21.13.模型无法渲染或渲染不完整( 相机参数不匹配

  *   158 21.14.包围盒功能辅助你合理设置相机参数

  *   159 21.15.正投影相机自适应居中和全屏渲染模型

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

  *   161 21.17.判断mesh是否位于相机视锥体Frustum内

  *   162 22.1.渲染Mesh三角形边线和顶点

  *   163 22.2.渲染模型边界线EdgesGeometry

  *   164 22.3.几何边线和半透明渲染模型

  *   165 22.4.模型隐藏( .visible )

  *   166 22.5.雾化效果(Fog)

  *   167 22.6.练习小案例—简约地面效果

  *   168 22.7.线宽lineWidth无效( 扩展库解决线宽 )

  *   169 22.8.模型高亮发光描边(后期处理OutlinePass)

  *   170 23.1.PBR材质简介

  *   171 23.2.PBR材质渲染金属质感例子

  *   172 23.3.PBR材质环境贴图(金属效果例子)

  *   173 23.4.解析外部PBR模型(金属度和粗糙度贴图)

  *   174 23.5.alphaMap透明度贴图

  *   175 24.1.序列帧动画(多张图)

  *   176 24.2.序列帧动画(单张图，UV坐标).

  *   177 24.3.矩形Mesh加背景透明png贴图(场景标注)

  *   178 24.4.光柱效果

  *   179 24.5.球体Mesh渲染全景图

  *   180 24.6.渲染全景图(矩形Mesh拼接立方体空间)

  *   181 24.7.一个贴图加载完再加载另一个(Promise和async)

  *   182 24.8.优先加载视锥体内Mesh的全景贴图

  *   183 24.9.矩形图片剪裁为圆形渲染(CircleGeometry).

  *   184 25.1.position控制片元

  *   185 25.2.纹理贴图像素值混合叠加

  *   186 25.3.随着高度透明度渐变(onBeforeCompile二次开发

  *   187 25.4.onBeforeCompile修改Phong着色器代码(灰度图)

  *   188 25.5.PointsMaterial方点变圆点

  *   189 25.6.练习小案例—波浪特效1

  *   190 25.7.练习小案例—波浪特效2(圆点渲染)

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

  *   192 26.1.绘制三角函数曲线和波动动画

  *   193 26.2.BufferGeometory构建一个加号

  *   194 26.3.ShapeGeometry填充加号轮廓

  *   195 26.4.样条曲线绘制心形轮廓

  *   196 26.5.几何体表面积计算

  *   197 26.6.多个几何体合并为一个BufferGeometryUtils

  *   198 26.7.山脉地形高度可视化(顶点颜色插值)

  *   199 26.8.一段曲线颜色渐变

  *   200 26.9.一段曲线逐渐绘制出来(.setDrawRange)

  *   201 26.10.细线飞线和飞线轨迹

  *   202 26.11.粗线飞线.

  *   203 26.12.粗头细尾飞线(自定义着色器)

  *   204 26.13.轨迹线生成带状平面Mesh

  *   205 26.14.getSpacedPoints和getPoints曲线上取点区别

  *   206 26.15.轨迹线生成带状平面Mesh(CurvePath直线不细

  *   207 26.16.直线拐角自动圆角化(贝赛尔曲线转弯).

  *   208 26.17.直线拐角自动圆角化(圆弧转弯)

  *   209 26.18.光点或小球沿着任意轨迹线运动

  *   210 26.19.练习小案例—纯代码模拟树和小树林

  *   211 27.1.三维模型、美术、分工

  *   212 27.2.三维模型导出格式问题

  *   213 27.3.three.js编辑器editor简介

  *   214 27.4.three.js editor设置材质和贴图

  *   215 27.5. GLTF格式简介 (Web3D领域JPG)

  *   216 27.6.加载GLTF格式文件

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

  *   218 27.8.美术是否居中导出模型问题

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

  *   220 27.10.导出gltf格式是否包含光源对象

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

  *   222 27.12.加载gltf包含外部贴图.bin等文件

  *   223 27.13.程序与美术协作(模型命名)

  *   224 27.14.获取模型加载进度设置进度条

  *   225 27.15.解析外部模型骨骼关键帧动画(GLTF)

  *   226 27.16.模型压缩(gltf-pipeline、Draco)

  *   227 27.17.包围盒计算模型位置(平移模型居中)

  *   228 28.1.查看渲染性能(stats.js计算渲染帧率FPS)

  *   229 28.2.资源占用和性能瓶颈(CPU、内存、GPU、显存)

  *   230 28.3.控制redner执行减少GPU资源占用

  *   231 28.4.remove()移除场景不需要的对象

  *   232 28.5.浏览器控制台查看geometry内存占用

  *   233 28.6.three.js对象CPU内存占用释放

  *   234 28.7.GPU内存释放.dispose()

  *   235 28.8.几何体和材质尽量共享

  *   236 28.9.几何体合并

  *   237 28.10.尽量选择BufferGeometry

  *   238 28.11.多细节层次模型Lod

  *   239 29.1.动画库tweenjs简介和引入项目

  *   240 29.2.第一个threejs和tweenjs结合案例

  *   241 29.3.多段tween动画串联起来.chain()

  *   242 29.4.批量创建tween动画片段并串联

  *   243 29.5.tween开始、暂停、继续、延迟、重复

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

  *   245 29.7.一段tween完成后多个tween同步执行

  *   246 29.8.缓动算法.easing()

  *   247 29.9.模型颜色渐变动画.

  *   248 29.10.模型或标签淡入淡出

  *   249 29.11.相机运动动画

  *   250 30.1.Web3D项目实战开发(three.js与web前端结合)

  *   251 30.2.threejs与前端框架结合(Vue、react、angular)

  *   252 30.3.vue-cli4项目文件引入three.js

  *   253 30.4.CSS z-index层叠问题

  *   254 30.5.vue前端UI与3D场景交互—改变颜色

  *   255 30.6.vue创建threejs HTML标签组件

  *   256 30.7.加载gltf模型文件

*   05 WebGL入门教程( 初学three可以跳过，慢慢来 )/

  *   01 0.学习WebGL的必要性

  *   02 1.第一个WebGL程序(绘制一个点)

  *   03 2.WebGL绘制一个矩形

  *   04 3.WebGL坐标系(投影)

  *   05 4.WebGL平移变换

  *   06 5.绘制一个立方体(WebGL旋转变换)

  *   07 6.WebGL顶点索引绘制

  *   08 7.varying变量和颜色插值.

  *   09 8.立方体(每个面一种颜色)

  *   10 9.WebGL光照渲染立方体

  *   11 10.立方体旋转动画

  *   12 11.WebGL绘制多个几何体

  *   13 12.纹理贴图

  *   14 13.彩色图转灰度图

  *   15 14.切换着色器程序

  *   16 15.WebGL透明度与α融合

  *   17 16.深度测试与α融合

*   06 案例——物联网粮仓/

  *   01 1.2.项目方案选择

  *   02 1.3.学习安排(必看)

  *   03 1.4.公司项目人员方案

  *   04 2.1.Three.js下载特定版本并使用

  *   05 2.2.一个最小Three.js代码

  *   06 2.3.渲染循环

  *   07 2.4.Three.js开发辅助工具

  *   08 2.5.项目部署Canvas画布页面布局相关

  *   09 2.6.Three.js代码模块化

  *   10 3.1.三维软件绘制模型(美术和程序协作)

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

  *   12 3.3. GLTF格式模型文件简介 (Web3D领域JPG)

  *   13 3.4.建模软件导出GLTF(blender、3dmax)

  *   14 3.5.加载GLTF格式粮仓基地模型

  *   15 3.6.粮仓贴图颜色偏差问题解决

  *   16 3.7.gltf相关文件glb

  *   17 3.8.gltf文件是否包含光源

  *   18 3.9.相机渲染范围和视角设置

  *   19 3.10.模型导出位置和姿态问题注意

  *   20 3.11.加载gltf模型(透视投影相机)

  *   21 3.12.批量修改GLTF材质

  *   22 3.13.粮仓基地场景雾化效果设置(Fog)

  *   23 4.1.模型命名(程序与美术协作)

  *   24 4.2.粮仓基地模型命名并导出

  *   25 4.3.CSS2DRenderer标注每个粮仓

  *   26 4.4.CSS3DRenderer标注每个粮仓

  *   27 4.5.鼠标交互-射线拾取

  *   28 4.6.射线拾取弹出粮仓HTML信息标签

  *   29 4.7.火焰效果(序列帧动画)

  *   30 4.8.粮仓火焰标注

  *   31 4.9.火焰信息标签

*   07 案例—产品720展示（轿车、手机）/

  *   01 1.1.课程效果展示

  *   02 1.2.产品Web3D展示方案

  *   03 1.3.学习安排

  *   04 2.1.手机相关几个章节学习指南

  *   05 2.2.绘制产品三维模型—手机

  *   06 2.3.Blender或3dmax导出gltf格式模型

  *   07 2.4.三维软件导出产品模型注意

  *   08 2.5.Blender预览产品PBR材质的模型

  *   09 2.6.Three.js下载R125版本并使用

  *   10 2.7.threejs最小案例—模型和光源

  *   11 2.8.threejs最小案例—相机和渲染器

  *   12 2.9.渲染循环(设置产品旋转预览动画)

  *   13 2.10.产品预览旋转和缩放(相机控件OrbitControls)

  *   14 3.1.three.js加载gltf模型

  *   15 3.2.查询模型节点并设置模型PBR材质贴图

  *   16 3.3.产品展示相机参数设置注意

  *   17 3.4.环境贴图envMap

  *   18 3.5.调试场景光源参数

  *   19 3.6.手机产品旋转动画控制

  *   20 3.7.Canvas画布全屏且跟随窗口变化

  *   21 3.8.three.js代码模块化

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

  *   23 4.1.产品展示缩放和旋转范围约束

  *   24 4.2.一个720辅助显示的圆弧线—圆弧线

  *   25 4.3.一个720辅助显示的圆弧线—720符号

  *   26 4.4.UI按钮暂停手机旋转动画

  *   27 4.5.前端UI按钮切换颜色贴图

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

  *   29 4.7.颜色贴图.map切换动画

  *   30 4.8.产品特定部位标注—光点

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

  *   32 4.10.产品特定部位标注—波动光点

  *   33 4.11.HTML 2D标签标注相机热点

  *   34 4.12.HTML 3D标签标注相机热点

  *   35 4.13.射线拾取标注热点—弹出信息

  *   36 5.1.轿车3D模型基本情况简介

  *   37 5.2.加载车gltf模型1—模型和相机

  *   38 5.3.加载车gltf模型2—材质和贴图

  *   39 5.4.gltf加载颜色空间和颜色失真问题

  *   40 5.5.批量设置Mesh环境贴图

  *   41 5.6.MeshStandardMaterial金属度和粗糙度了解

  *   42 5.7.设置后视镜效果

  *   43 5.8.MeshPhysicalMaterial(车外壳、车玻璃)

  *   44 5.9.代码创建一个地面

  *   45 5.10.代码创建一个隧道

  *   46 5.11.设置雾化效果

  *   47 5.12.约束相机控件的旋转、缩放和平移

  *   48 6.1.车开关门—思路和模型问题

  *   49 6.2.车门开关—热点标注

  *   50 6.3.车门开关—射线拾取，打开或关门车门

  *   51 6.4.tweenjs库设置开关门动画

  *   52 6.5.车门开关—开关门声音

  *   53 6.7.颜色变化动画

  *   54 6.8.背景音乐设置

  *   55 6.9.旋转动画开启或关闭

  *   56 10.车前灯开关模拟

*   08 案例—智慧城市/

  *   01 1.1智慧城市案例

  *   02 1.2.技术方向和方案问题(选看)

  *   03 1.3.学习安排(必看)

  *   04 2.1.开发环境和threejs基本代码

  *   05 2.2.城市3D场景构建思路和数据问题

  *   06 2.3.加载blender导出的城市gltf模型

  *   07 2.4.访问加载场景的某些或某个模型设置材质

  *   08 2.5.ShapeGeometry解析城市几何数据

  *   09 2.6.ShapeGeometry批量渲染建筑物平面图

  *   10 2.7.经纬度转墨卡托坐标

  *   11 2.8.ExtrudeGeometry批量渲染建筑物

  *   12 2.9.代码生成的模型导出gltf格式

  *   13 3.1.根据多边形轮廓坐标构建围墙geometry

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

  *   15 3.3.围墙透明度渐变发光shader - 使用position控

  *   16 3.4.围墙geometry UV坐标生成

  *   17 3.5.围墙流动效果—texture动画

  *   18 3.6.围墙水平方向流光

  *   19 3.7.外部模型或threejs自带几何体流光效果

  *   20 3.8.自定义ShapeGeometry的UV坐标，设置水面纹理

  *   21 4.1.建筑随着高度颜色渐变shader

  *   22 4.2.建筑物雾化效果

  *   23 4.3.点阵模拟地面

  *   24 4.4.模型线框

  *   25 4.5.建筑场景扫描光带shader

  *   26 4.6.建筑场景扫描光环shader

  *   27 5.1.城市场景插入飞行的无人机

  *   28 5.2.线模型绘制轨迹线

  *   29 6.1.地面波动光圈

  *   30 6.2.旋转棱锥

  *   31 6.3.棱锥透明度渐变

  *   32 6.4.圆柱透明渐变波动效果

  *   33 6..5.透明度径向渐变球shader

  *   34 6.6.扫描雷达效果

  *   35 6.7.信号波动画

  *   36 6.8.HTML标签标注无人机和建筑物

  *   37 6.9.火焰序列帧动画

  *   38 6.10.信号飞线shader

  *   39 6.11.地铁公路流线shader

  *   40 7.1.渲染帧率测试

  *   41 7.2.几何体合并

  *   42 7.3.draco压缩模型

  *   43 8.1.与前端结合工程化开发

  *   44 9.1.城市3D场景和大屏可视化图表结合

*   09 案例—大屏3D地图可视化/

  *   01 1.1.课程完成效果展示

  *   02 1.2.技术选择(SVG、Canvas、WebGL、Three.js)

  *   03 1.3.Three.js引擎简介

  *   04 1.4.学习细节安排

  *   05 2.1.GeoJOSN数据简介和获取

  *   06 2.2.先通过Three.js实现一个基础渲染代码

  *   07 2.3.渲染非全屏(相机和渲染器)

  *   08 2.4.相机渲染范围、位置和目标

  *   09 2.5.渲染循环和相机控件OrbitControls

  *   10 2.6.解析边界线(几何体顶点和Line模型)

  *   11 2.7.Shape几何体填充行政区域

  *   12 2.8.渲染中国地图(相机参数适配)

  *   13 2.9.渲染省份或城市地图轮廓

  *   14 2.10.拉伸行政区轮廓

  *   15 2.11.经纬度转墨卡托坐标

  *   16 3.1.矩形贴图标注位置

  *   17 3.2.热点—波动光圈

  *   18 3.3.热点—旋转棱锥

  *   19 3.4.HTML元素作为标签(世界坐标转屏幕坐标)

  *   20 3.5.HTML元素作为标签(CSS2DRenderer)

  *   21 3.6.HTML元素作为标签(CSS3DRenderer)

  *   22 3.7.鼠标单击拾取选中一个行政区

  *   23 4.1.中国地图颜色深浅可视化

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

  *   25 4.3.行政区域拉伸不同高度可视化数据

  *   26 4.4.气泡图(不同颜色和大小圆圈)

  *   27 5.5.柱子可视化数据

  *   28 6.1.密集点(微博登录活动)

  *   29 6.2.飞线(轨迹线上提取一段作为飞线)

  *   30 6.3.飞线粗细设置(linewidth)

  *   31 6.4.shader实现小蝌蚪状飞线

  *   32 6.5.练习题—飞线综合案例

*   10 案例——大屏3D地球可视化/

  *   01 1.1.地球大屏数据可视化效果

  *   02 1.1.课程完成案例展示

  *   03 1.2.学习安排

  *   04 2.1.Three.js下载并使用

  *   05 2.2.一个最小Three.js代码

  *   06 2.3.渲染循环、OrbitControls、AxesHelper.

  *   07 2.4.通过纹理贴图渲染一个地球效果

  *   08 3.1.地球经纬度和球面坐标

  *   09 3.2.经纬度坐标转球面坐标推理

  *   10 3.3.解析world.json绘制所有国家边界线

  *   11 3.4.解析world.json绘制所有国家轮廓Mesh

  *   12 3.5.解析world.json程序生成纹理贴图

  *   13 3.6.球面上渲染国家边界线

  *   14 3.7.精灵模型Sprite设置地球光圈

  *   15 3.8.所有国家边界线合并为一个

  *   16 3.9密集点数据可视化

  *   17 3.10.密集点数据可视化—颜色插值明暗变化

  *   18 3.11.轨迹线可视化

  *   19 4.1.矩形平面Mesh标注球面某地

  *   20 4.2.平面Mesh标注新闻热点和机场

  *   21 4.3.光柱效果

  *   22 4.4.地球新闻热点标注光柱

  *   23 4.5.热点波动光圈-标注新闻热点

  *   24 4.6.光柱、光柱底座、波动光圈合成一个

  *   25 4.7.光柱高度、颜色和新闻热度相关

  *   26 4.8.射线拾取新闻热点模型对象

  *   27 5.1.整体思路( 生成每个国家的球面Mesh )

  *   28 5.2.多边形轮廓内生成等间距网格点

  *   29 5.3.三角剖分

  *   30 5.4.三角剖分绘制每个国家球面Mesh

  *   31 5.5.射线拾取国家Mesh，弹出国家名称HTML标签

  *   32 5.6.各个国家GDP可视化(Mesh颜色深浅不同)

  *   33 5.7.地球陆地网格点阵特效

  *   34 6.1.柱子可视化国家GDP

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

  *   36 6.3.世界人口密度—渲染所有柱子

  *   37 6.4.世界人口密度层次感—顶点颜色

  *   38 7.1.球面上两点轨迹线绘制思路

  *   39 7.2.轨迹线实现方式—贝赛尔曲线

  *   40 7.3.圆弧线ArcCurve介绍(绘制一条圆弧轨迹线)

  *   41 7.4.平面上三点确定一条圆弧

  *   42 7.5.3D空间中三点确定一条圆弧飞线轨迹

  *   43 7.6.解析经纬度坐标数据绘制轨迹线

  *   44 7.7.轨迹线上提取一段作为飞线

  *   45 7.8.shader实现小蝌蚪状飞线

  *   46 7.9.圆弧轨迹-使用圆弧绘制绘制飞线

  *   47 7.10.练习—解析数据绘制地球飞线效果

  *   48 7.11.飞线起始点标注和波动光圈

  *   49 7.12.棱锥标注飞线起点

*   11 【扩展课】CesiumJS入门教程/

  *   01 1.Cesium开发准备(文件下载、文档)

  *   02 2.第一个Cesium代码案例

*   课件资料/

  *   1.Three.js快速入门/

    *   three.js-r133.zip

    *   three.js-r139.zip

    *   必读！.txt

    *   源码.zip

    *   获取完整资料.png

  *   2.threejs从入门到精通(通用知识)/

    *   1.Threejs视频教程源码（章节1-15）/

      *   Three.js视频教程_65节源码.zip

      *   three.js-master.rar

      *   three.js-master.zip

      *   threejs视频教程课件.xmind

    *   2.Threejs高级进阶源码（章节16-18）/

      *   Threejs高级进阶案例源码.zip

    *   3.three.js实战常用技能（章节19-30）/

      *   2.Three.js教程—实战常用技巧部分.zip

      *   补充章节的源码/

        *   30.threejs工程化开发(Web前端 Vuejs).zip

  *   3.原生WebGL/

    *   WebGL视频教程源码/

      *   1.第一个WebGL程序(绘制一个点)/

        *   canvas画布.html

        *   必读！.txt

        *   着色器代码写在script标签中.html

        *   绘制一个点.html

        *   获取完整资料.png

      *   2.WebGL绘制一个矩形/

        *   绘制一个矩形.html

      *   3.WebGL坐标系(投影)/

        *   坐标系和投影.html

        *   必读！.txt

        *   获取完整资料.png

      *   4.WebGL平移变换/

        *   0.更改传入的顶点数据.html

        *   1.设置gl_Position的x分量.html

        *   2.在着色器中进行矩阵变换.html

      *   5.绘制一个立方体(WebGL旋转变换)/

        *   绘制一个线框立方体.html

      *   6.WebGL顶点索引绘制/

        *   顶点索引绘制线框立方体.html

      *   7.varying变量和颜色插值/

        *   0.颜色插值.html

        *   1.彩色三角形.html

        *   2.两个单色三角形.html

        *   3.顶点坐标和颜色数据使用一个缓冲区.html

      *   8.立方体(每个面一种颜色)/

        *   0.立方体(每个面一种颜色).html

      *   9.WebGL光照渲染立方体/

        *   0.光照立方体.html

        *   1.立方体添加点光源.html

        *   必读！.txt

        *   无光照/

          *   0.红色立方体.html

          *   1.红色立方体(每个面R值不同).html

        *   获取完整资料.png

      *   10.立方体旋转动画/

        *   立方体旋转动画.html

      *   11.WebGL绘制多个几何体/

        *   0.增加顶点数据.html

        *   1.多次执行绘制函数.html

      *   12.纹理贴图/

        *   texture.jpg

        *   纹理贴图.html

      *   13.彩色图转灰度图/

        *   0.编写着色器图片转灰度图.html

        *   1.图片映射的位置旋转变换.html

        *   texture.jpg

      *   14.切换着色器程序/

        *   0.切换着色器.html

        *   1.通过uniform传递数据不切换着色器.html

        *   glb.jpg

        *   切换着色器程序.html

      *   15.WebGL透明度与α融合/

        *   半透明三角形叠加.html

      *   16.深度测试与α融合/

        *   必读！.txt

        *   深度测试和融合.html

        *   获取完整资料.png

      *   WebGL教程课件.xmind

    *   WebGL视频教程源码.zip

  *   4.所有案例/

    *   Three.js智慧城市3D可视化/

      *   Three.js智慧城市Web3D可视化.zip

    *   产品720 Web3D展示(WebGL Three.js)/

      *   产品720 Web3D展示(WebGL Three.js) 源码.zip

      *   补充内容.zip

    *   地图Web3D可视化(WebGL Three.js)/

      *   地图Web3D可视化(WebGL Three.js).zip

    *   地球Web3D可视化(WebGL Three.js)/

      *   地球Web3D可视化(WebGL Three.js).zip

      *   飞线大屏可视化（ vue + echarts + threejs ）.zip

    *   粮仓Web3D可视化/

      *   物联网Web3D可视化(Three.js WebGL).zip

  *   5.非视频—纯源码模板教程(vue+threejs的案例)/

    *   Three.js物联网数字孪生——收费站案例/

      *   Three.js物联网数字孪生——收费站案例.zip

    *   机械模型在线预览/

      *   机械装配体模型查看预览.zip