        Threejs实战常用技巧培训

 

 

 

一、模型射线拾取

1.模型标注(热点)——平面网格模型Mesh

2.模型标签——精灵模型对象Sprite

3.模型的标签——HTML元素

4.HTML元素标签位置更新

5.模型标签—HTML实现一个好看的UI效果

6.模型标签——Canvas技术与threejs结合

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

8.CSS2DRenderer—HTML元素标签

9.CSS3DRenderer

10.标签坐标问题—局部、世界坐标

11.标签坐标问题—几何体顶点坐标

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

13.标签坐标问题—几何体偏移

14.射线投射器Raycaster和射线Ray介绍

15.射线Raycaster—鼠标点选网格模型

16.点Points线Line精灵Sprite—拾取

17.射线碰撞检测相关

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

二、20.WebGL渲染器相关

1.全屏和局部区域渲染

2.Threejs画布自适应窗口尺寸变化(窗口事件

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

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

5.WebGL渲染器锯齿问题

6.帧缓冲区(颜色、深度、模板)

7.材质控制渲染管线(深度测试)

8.Threejs视口.setViewport

9.剪裁测试( 剪裁方法setScissor )

10.渲染管线—模板测试(24分钟)

11.剪裁剖切模型(.clippingPlanes)

12.添加剖切面封口(模板测试)

13.Three.js渲染结果保存为图片

14.Three.js渲染更新总结

15.模型闪烁解释-两个平面重合或非常接近

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

17.渲染顺序

三、相机Camera相关

1.相机动画

2.相机不同方向的投影视图

3.旋转canvas画布渲染结果

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

7.OrbitControls.js相机控件

8.OrbitControls辅助选择相机视角

9.同步两个相机的位置视线等信息

10.地图导航控件MapControls

11.鼠标单击目的地，相机飞行漫游

12.相机控件与.lookAt无效

13.模型无法渲染或渲染不完整(相机参数）

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

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

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

17.判断mesh是否位于相机视锥体Frustum内

四、材质Material和渲染效果

1.渲染Mesh三角形边线和顶点

2.渲染模型边界线EdgesGeometry

3.几何边线和半透明渲染模型

4.模型隐藏( .visible )

5.雾化效果(Fog)

6.练习小案例—简约地面效果

7.线宽lineWidth无效( 扩展库解决线宽 ).

8.模型高亮发光描边

五、PBR材质

1.PBR材质简介

2.PBR材质渲染金属效果例子

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

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

5.alphaMap透明度贴图

六、纹理贴图相关

1.序列帧动画(多张图)

2.序列帧动画(单张图，UV坐标)

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

4.光柱效果 免费试学

5.球体Mesh渲染全景图

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

7.一个贴图加载完再加载另一个(Promise)

8.优先加载视锥体内Mesh的全景贴图

9.矩形图片剪裁为圆形渲染

七、着色器shader相关案例

1.图片剪裁渲染为圆形(gl_PointCoord)

2.纹理贴图像素值混合叠加

3.透明度渐变(onBeforeCompile)

4.onBeforeCompile(灰度图)

5.PointsMaterial方点变圆点

6.练习小案例—波浪特效1(24分钟)

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

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

八、顶点、曲线、几何体

1.绘制三角函数曲线和波动动画

2.BufferGeometory构建一个加号

3.ShapeGeometry填充加号轮廓

4.样条曲线绘制心形轮廓

5.几何体表面积计算

6.多个几何体合并为一个

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

8.一段曲线颜色渐变

9.逐渐绘制(.setDrawRange)

10.细线飞线和飞线轨迹

11.粗线飞线

12.粗头细尾飞线(自定义着色器)

13.轨迹线生成带状平面Mesh

14.getSpacedPoints

15.轨迹线生成带状平面Mesh

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

17.直线拐角自动圆角化(圆弧转弯)

18.光点或小球沿着任意轨迹线运动

19.练习小案例—纯代码模拟树和小树林

九、外部模型加载解析

1.三维模型、美术、分工

2.三维模型导出格式问题

3.three.js编辑器editor简介

4.three.js editor设置材质和贴图

5. GLTF格式简介 (Web3D领域JPG)

6.加载GLTF格式文件

7.相机渲染范围和外部模型尺寸匹配

8.美术是否居中导出模型问题

9.模型导出角度和姿态调整问题美术导出注意

10.导出gltf格式是否包含光源对象

11.解析层级模型批量设置材质(GLTF)

12.加载gltf包含外部贴图.bin等文件

13.程序与美术协作(模型命名)

14.获取模型加载进度设置进度条

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

16.模型压缩(Draco)

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

十、渲染性能优化

1.查看渲染性能(stats.js计算渲染帧率)

2.资源占用和性能瓶颈CPU、内存、GPU、显存

3.控制redner执行减少GPU资源占用

4.remove()移除场景不需要的对象

5.浏览器控制台查看geometry内存占用

6.three.js对象CPU内存占用释放

7.GPU内存释放.dispose()

8.几何体和材质尽量共享

9.几何体合并

10.尽量选择BufferGeometry

11.多细节层次模型Lod

十一、动画库tweenjs

1.动画库tweenjs简介和引入项目

2.第一个threejs和tweenjs结合案例

3.多段tween动画串联起来.chain()

4.批量创建tween动画片段并串联

5.tween开始、暂停、继续、延迟、重复

6.动画不同阶段回调函数开始、执行中、完成

7.一段tween完成后多个tween同步执行

8.缓动算法.easing()

9.模型颜色渐变动画

10.模型或标签淡入淡出