|
课程培训
|
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.纹理贴图像素值混合叠加(4分钟) 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.直线拐角自动圆角化(圆弧转弯)(21分钟) 18.光点或小球沿着任意轨迹线运动 19.练习小案例—纯代码模拟树和小树林 免费试学
九、外部模型加载解析 1.三维模型、美术、分工 2.三维模型导出格式问题 3.three.js编辑器editor简介 4.three.js editor设置材质和贴图 5. GLTF格式简介 (Web3D领域JPG) 6.加载GLTF格式文件 7.相机渲染范围和外部模型尺寸匹配(26分钟) 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同步执行(4分钟) 8.缓动算法.easing() 9.模型颜色渐变动画 10.模型或标签淡入淡出 如果您想学习本课程，请预约报名
如果没找到合适的课程或有特殊培训需求，请订制培训 除培训外，同时提供相关技术咨询与技术支持服务，有需求请发需求表到邮箱soft@info-soft.cn,或致电4007991916 技术服务需求表点击在线申请 服务特点： 海量专家资源，精准匹配相关行业，相关项目专家，针对实际需求，顾问式咨询，互动式授课，案例教学，小班授课，实际项目演示，快捷高效，省时省力省钱。 专家力量： 中国科学院软件研究所，计算研究所高级研究人员 oracle,微软，vmware，MSC,Ansys，candence,Altium,达索等大型公司高级工程师，项目经理，技术支持专家 中科信软培训中心，资深专家或讲师 大多名牌大学，硕士以上学历，相关技术专业，理论素养丰富 多年实际项目经历，大型项目实战案例，热情，乐于技术分享 针对客户实际需求，案例教学，互动式沟通，学有所获 |
|
