章节1: 19.模型射线拾取、标签(源码下载 网易云私信) 课时1 视频 模型标注—平面Mesh((每节课源码下载 网易云私信)) 14:49 可课时2 视频 模型标签——精灵模型对象Sprite 05:38课时3 视频 模型的标签——HTML元素 15:50课时4 视频 HTML元素标签位置更新 09:49课时5 视频 模型标签—HTML、CSS实现一个好看的UI效果 08:28 可课时6 视频 模型标签——Canvas技术与threejs结合 11:33课时7 视频 Canvas作为精灵或网格模型标签的贴图 09:09课时8 视频 CSS2DRenderer—HTML元素标签 15:12课时9 视频 CSS3DRenderer 15:35课时10 视频 标签坐标问题—局部、世界坐标 09:27课时11 视频 标签坐标问题—几何体顶点坐标 14:24课时12 视频 标签坐标问题—加载外部模型标注案例 10:19课时13 视频 标签坐标问题—几何体偏移 06:06课时14 视频 射线投射器Raycaster和射线Ray介绍 07:22课时15 视频 射线Raycaster—鼠标点击选中拾取网格模型 08:43课时16 视频 点Points线Line精灵Sprite—拾取 07:43课时17 视频 射线碰撞检测相关 12:22课时18 视频 射线拾取、模型标签坐标变换—局部渲染 07:02章节2: 20.WebGL渲染器相关课时19 视频 全屏和局部区域渲染 09:43课时20 视频 Threejs画布自适应窗口尺寸变化(窗口事件) 12:43课时21 视频 Three.js背景(图片作为背景或设置颜色) 05:13课时22 视频 Three.js背景透明度(模型悬浮在网页上) 06:41课时23 视频 WebGL渲染器锯齿问题 08:09课时24 视频 帧缓冲区(颜色、深度、模板) 18:28课时25 视频 材质控制渲染管线(深度测试) 11:57课时26 视频 Three.js渲染视口.setViewport() 09:59课时27 视频 渲染管线剪裁测试( 剪裁方法`.setScissor()` 13:25课时28 视频 渲染管线—模板测试 23:50课时29 视频 剪裁剖切模型(.clippingPlanes属性) 09:11课时30 视频 添加剖切面封口(模板测试) 14:42课时31 视频 Three.js渲染结果保存为图片 07:31课时32 视频 Three.js渲染更新总结 14:22课时33 视频 模型闪烁解释( 两个平面重合或非常接近 ) 07:12课时34 视频 透视投影相机导致的模型闪烁Z-fighting 05:27课时35 视频 渲染顺序(.sortObjects和.renderOrder) 12:22章节3: 21.相机Camera相关课时36 视频 相机动画( .position 和 .lookAt() ) 11:23课时37 视频 相机不同方向的投影视图 06:12课时38 视频 旋转canvas画布渲染结果( .up 相机上方向) 05:25课时39 视频 相机漫游视线和轨迹相切( 沿已知坐标的轨迹 ) 11:49课时40 视频 练习小案例—管道漫游 15:26课时41 视频 获得相机当前视线方向，并沿着视线移动 05:55课时42 视频 OrbitControls.js相机控件 08:14课时43 视频 浏览器控制台辅助选择相机视角(OrbitControls) 06:16课时44 视频 同步两个相机的位置视线等信息 07:08课时45 视频 地图导航控件MapControls 04:38课时46 视频 鼠标单击目的地，相机飞行漫游 09:07课时47 视频 相机控件与.lookAt()无效( .target属性 ) 11:01课时48 视频 模型无法渲染或渲染不完整( 相机参数不匹配 17:26课时49 视频 包围盒功能辅助你合理设置相机参数 15:13课时50 视频 正投影相机自适应居中和全屏渲染模型 13:35课时51 视频 透视投影相机自适应居中和全屏模型渲染 14:08课时52 视频 判断mesh是否位于相机视锥体Frustum内 09:29章节4: 22.材质Material和渲染效果 课时53 视频 渲染Mesh三角形边线和顶点 04:53课时54 视频 渲染模型边界线EdgesGeometry 07:58课时55 视频 几何边线和半透明渲染模型 05:20课时56 视频 模型隐藏( .visible ) 05:05课时57 视频 雾化效果(Fog) 07:02课时58 视频 练习小案例—简约地面效果 11:08 可课时59 视频 线宽lineWidth无效( 扩展库解决线宽 ) 07:10课时60 视频 模型高亮发光描边(后期处理OutlinePass) 09:15章节5: 23.PBR材质课时61 视频 1.PBR材质简介 12:44课时62 视频 2.PBR材质渲染金属效果例子 13:29课时63 视频 3.PBR材质环境贴图(金属效果例子) 12:16课时64 视频 4.解析外部PBR模型(金属度和粗糙度贴图) 08:22课时65 视频 5.alphaMap透明度贴图 05:02章节6: 24.纹理贴图相关 课时66 视频 1.序列帧动画(多张图) 08:25课时67 视频 2.序列帧动画(单张图，UV坐标) 12:42课时68 视频 3.矩形Mesh加背景透明png贴图(场景标注) 06:35课时69 视频 4.光柱效果 06:18 可课时70 视频 5.球体Mesh渲染全景图 04:59课时71 视频 6.渲染全景图(矩形Mesh拼接立方体空间) 09:37课时72 视频 7.一个贴图加载完再加载另一个(Promise和async) 09:07课时73 视频 8.优先加载视锥体内Mesh的全景贴图 07:42课时74 视频 9.矩形图片剪裁为圆形渲染(CircleGeometry) 05:59章节7: 25.着色器shader相关案例 课时75 视频 1.position控制片元 06:08课时76 视频 2.纹理贴图像素值混合叠加 03:55课时77 视频 3.随着高度透明度渐变(onBeforeCompile二次开发材质) 16:54课时78 视频 4.onBeforeCompile修改Phong着色器代码(灰度图) 08:45课时79 视频 5.PointsMaterial方点变圆点 06:22课时80 视频 6.练习小案例—波浪特效1 23:43 可课时81 视频 7.练习小案例—波浪特效2(圆点渲染) 11:06课时82 视频 8.练习小案例-波浪特效3(波峰波谷点大小不同) 13:41章节8: 26.顶点、曲线、几何体 课时83 视频 1.绘制三角函数曲线和波动动画 13:10课时84 视频 2.BufferGeometory构建一个加号 06:32课时85 视频 3.ShapeGeometry填充加号轮廓 05:14课时86 视频 4.样条曲线绘制心形轮廓 05:56课时87 视频 5.几何体表面积计算 10:46课时88 视频 6.多个几何体合并为一个BufferGeometryUtils 06:45课时89 视频 7.山脉地形高度可视化(顶点颜色插值) 11:33 可课时90 视频 8.一段曲线颜色渐变 12:23课时91 视频 9.一段曲线逐渐绘制出来(.setDrawRange) 08:05课时92 视频 10.细线飞线和飞线轨迹 11:57课时93 视频 11.粗线飞线 08:15课时94 视频 12.粗头细尾飞线(自定义着色器) 12:45课时95 视频 13.轨迹线生成带状平面Mesh 15:38课时96 视频 14.getSpacedPoints和getPoints曲线上取点区别 09:46课时97 视频 15.轨迹线生成带状平面Mesh(CurvePath直线不细分) 07:51课时98 视频 16.直线拐角自动圆角化(贝赛尔曲线转弯) 13:53课时99 视频 17.直线拐角自动圆角化(圆弧转弯) 20:15课时100 视频 18.光点或小球沿着任意轨迹线运动 04:49课时101 视频 19.练习小案例—纯代码模拟树和小树林 12:50章节9: 27.外部模型加载解析课时102 视频 1.三维模型、美术、分工 15:56课时103 视频 2.三维模型导出格式问题 14:43课时104 视频 3.three.js编辑器editor简介 16:35课时105 视频 4.three.js editor设置材质和贴图 11:45课时106 视频 5. GLTF格式简介 (Web3D领域JPG) 13:22课时107 视频 6.加载GLTF格式文件 11:06课时108 视频 7.相机渲染范围和外部模型尺寸匹配(美术与程序) 25:41课时109 视频 8.美术是否居中导出模型问题. 09:08课时110 视频 9.模型导出角度和姿态调整问题(美术导出注意) 09:04课时111 视频 10.导出gltf格式是否包含光源对象(gltf.scene结 14:25课时112 视频 11.解析层级模型批量设置材质颜色、环境贴图等 12:30课时113 视频 12.加载gltf包含外部贴图.bin等文件 08:10课时114 视频 13.程序与美术协作(模型命名) 18:13课时115 视频 14.获取模型加载进度设置进度条 08:46课时116 视频 15.解析外部模型骨骼关键帧动画(GLTF) 07:10课时117 视频 16.模型压缩(gltf-pipeline、Draco) 08:07课时118 视频 17.包围盒计算模型位置(平移模型居中) 09:44章节10: 28.渲染性能优化课时119 视频 1.查看渲染性能(stats.js计算渲染帧率FPS) 09:06课时120 视频 2.资源占用和性能瓶颈(CPU、内存、GPU、显存) 16:33课时121 视频 3.控制redner执行减少GPU资源占用 10:08课时122 视频 4.remove()移除场景不需要的对象 05:29课时123 视频 5.浏览器控制台查看geometry内存占用 07:16课时124 视频 6.three.js对象CPU内存占用释放 06:52课时125 视频 7.GPU内存释放.dispose() 10:37课时126 视频 8.几何体和材质尽量共享 06:12课时127 视频 9.几何体合并 06:56课时128 视频 10.尽量选择BufferGeometry 06:37课时129 视频 11.多细节层次模型Lod 09:45章节11: 29.动画库tweenjs课时130 视频 1.动画库tweenjs简介和引入项目 06:27课时131 视频 2.第一个threejs和tweenjs结合案例 10:29课时132 视频 3.多段tween动画串联起来.chain() 07:47课时133 视频 4.批量创建tween动画片段并串联 05:02课时134 视频 5.tween开始、暂停、继续、延迟、重复 05:38课时135 视频 6.动画不同阶段回调函数(开始、执行中、完成) 05:34课时136 视频 7.一段tween完成后多个tween同步执行 03:54课时137 视频 8.缓动算法.easing() 09:46课时138 视频 9.模型颜色渐变动画 04:18课时139 视频 10.模型或标签淡入淡出. 05:55课时140 视频 11.相机运动动画 02:59章节12: 30.threejs工程化开发(Web前端 Vuejs)课时141 视频 1.Web3D项目实战开发(three.js与web前端结合) 05:43课时142 视频 2.threejs与前端框架结合(Vue、react、angular) 08:41课时143 视频 3.vue-cli4项目文件引入three.js 10:20课时144 视频 4.CSS z-index层叠问题 04:38课时145 视频 5.vue前端UI与3D场景交互—改变颜色 04:22课时146 视频 6.vue创建threejs HTML标签组件 07:55
