Three.js企业3D可视化实战项目WEBGL系统体系课程

课程老师

陈鹏
前端大咖
我是老陈，一个有趣有料有内涵的IT老男人。玩过前端，弄过Java，搞过Python，撩过Node，干过产品。

你将获得

深入掌握WEBGL与Three.js库
掌握blender建模技术搭建真实城市
掌握企业级智慧城市项目开发
掌握企业级智慧园区和工厂项目开发

课程大纲

01.认识three.js与开发环境搭建（6节）

1.课程介绍
2.本地搭建threejs官方网站
3.使用parcel搭建three.js开发环境
4.使用three.js渲染第一个场景和物体
5.关于运行搭建three出现的问题
6.轨道控制器查看物体

02.Three.js开发入门与调试设置（10节）

1.添加坐标轴辅助器
2.设置物体移动
3.物体的缩放与旋转
4.应用requestAnimationFrame
5.通过Clock跟踪时间处理动画
6.Gsap动画库基本使用与原理
7.Gsap控制动画属性与方法
8.根据尺寸变化实现自适应画面
9.调用js接口控制画布全屏和退出全屏
10.应用图形用户界面更改变量

03.全面认识threejs物体（4节）

1.掌握几何体顶点_UV_法向属性
2.BufferGeometry设置顶点创建矩形
3.生成酷炫三角形科技物体
4.常用网格几何体

04.详解材质与纹理（5节）

1.初识材质与纹理
2.详解纹理偏移_旋转_重复
3.设置纹理显示算法与mipmap
4.透明材质与透明纹理
5.环境遮挡贴图与强度

05.详解PBR材质纹理（10节）

1.详解PBR物理渲染
2.标准网格材质与光照物理效果
3.置换贴图与顶点细分设置
4.设置粗糙度与粗糙度贴图
5.设置金属度与金属贴图
6.法线贴图应用
7.如何获取各种类型纹理贴图
8.纹理加载进度情况
9.详解环境贴图
10.经纬线映射贴图与HDR

06.详解灯光与阴影（4节）

1.灯光与阴影的关系与设置
2.平行关阴影属性与阴影相机原理
3.详解聚光灯各种属性与应用
4.详解点光源属性与应用

07.精通粒子特效（8节）

1.初识Points与点材质
2.深度解析点材质属性
3.应用顶点着色打造绚丽多彩的星空
4.通过封装与相机裁剪实现漫天飞舞的雪花
5.运用数学知识打造复杂形状臂旋星系01
6.运用数学知识打造复杂形状臂旋星系02
7.运用数学知识打造复杂形状臂旋星系03
8.运用颜色收敛方法设置星系臂旋渐变

08.详解光线投射与物体交互（1节）

1.精讲投射光线实现3维物体交互

09.打造3D全屏滚动官网（7节）

1.设置页面结构与样式
2.同步屏幕滚动与相机位置
3.设置第三屏特效
4.切屏时候触发当屏物体特效
5.gsap控制网页切屏文字动画
6.鼠标控制相机摇晃
7.设置滚动条隐藏的方式

10.应用物理引擎设置物体相互作用（7节）

1.认识物理引擎与cannon安装
2.使用物理引擎关联Threejs物体
3.设置固定不动的地面与小球碰撞
4.监听碰撞事件和控制碰撞音效
5.关联材质设置摩擦与弹性系数
6.立方体相互碰撞后旋转效果
7.给物体施加力

11.入门着色器编程（5节）

1.初识着色器语言
2.着色器插件安装与文件导入开发
3.认识着色器变量
4.控制顶点位置打造波浪形状
5.传递变量打造动画与uv采样纹理

12.进阶着色器编程（6节）

1.着色器编写各类型图案
2.着色器编写各类型图案2
3.shader着色器编写高级图案
4.shader着色器编写高级图案2
5.shader着色器打造漫天飞舞孔明灯1
6.shader着色器打造漫天飞舞孔明灯2

13.着色器打造烟雾水云效果（7节）

1.烟雾水效果介绍与代码准备
2.sin函数与噪声函数混合
3.设置sin与噪声参数
4.时间打造流动效果
5.设置水流和波纹方向与速度
6.使用官方提供的水模型
7.打造沙滩_水池

14.着色器设置点材质（7节）

1.着色器设置点材质基本设置
2.点着色器图形设置原理
3.使用纹理设置点着色器材质
4.Points中生成不同点图案
5.根据视图Position设置点图案大小
6.着色器设置顶点旋转打造臂旋星系
7.着色器设置顶点颜色打造渐变星系

15.炫丽烟花交互项目案例（3节）

1.点着色器设置炫丽烟花项目案例01
2.点着色器设置炫丽烟花项目案例02
3.点着色器设置炫丽烟花项目案例03

16.使用着色器加工材质（4节）

1.three框架材质原理与应用
2.修改物理光照材质制作人物被打效果01
3.修改物理光照材质制作人物被打效果02
4.修改物理光照材质制作人物被打效果03

17.效果合成与后期处理（5节）

1.合成效果原理与设置
2.抗锯齿_点效果_发光_屏幕闪动等特效
3.使用shaderPass实现自定义合成效果
4.使用法向纹理合成特色渲染镜头
5.运用时间打造水底波浪动态渲染效果

18.HTML混合3D渲染（3节）

1.CSS2D渲染器基本使用
2.添加多个元素标签跟随物体移动
3.使用射线碰撞来检测标签显示隐藏

19.曲线应用与轨迹运动（2节）

1.曲线使用与绘制流程
2.让物体与相机沿着曲线轨迹运动

20.智慧城市项目准备与模型生成（5节）

1.智慧城市和项目介绍
2.创建智慧城市项目并配置glsl写法支持
3.项目基础代码结构分解
4.生成城市建筑模型
5.城市模型科技感渐变效果

21.智慧城市各类型特效（10节）

1.多层着色器特效合并与城市光圈扩散效果
2.直线光带掠过城市效果
3.从下向上扫描城市特效
4.利用tube特性生成带纹理图案飞线
5.飞线方案2-着色器绘制酷炫飞线
6.函数翻折实现彗星型飞线动画
7.生成建筑线框特效
8.智慧城市光墙特效
9.智慧城市雷达扫描特效
10.封装3D警告标识与点击提示事件

22.智慧城市大屏互动（7节）

1.添加智慧城市天空盒子和设置抗锯齿效果
2.智慧城市大屏样式与结构
3.设置Pointer-events穿透事件
4.智慧城市动态数字面板动画
5.通过接口生成城市事件列表
6.城市事件列表动态生成雷达-飞线-光墙
7.大屏HTML元素与场景物体数据交互与特效展现

23.blender基础（8节）

1.blender下载与语言渲染设置
2.blender大纲选项开关与保存启动文件
3.界面布局与工具栏侧边栏
4.3d界面查看与相机视图
5.相机视图和透视与正交
6.局部视图与隐藏物体
7.添加与删除物体和添加物体的操作面板
8.ExtraObject插件添加额外石头物体

24.blender操作教学（10节）

1.物体选择
2.物体移动旋转缩放设置
3.变换坐标系与变换轴心点
4.吸附功能使用
5.模式切换与物体吸附
6.物体合并与分离
7.设置物体的父级和子级
8.叠加层与快速收藏夹
9.平滑与平直着色
10.各种视图着色预览使用

25.blender建模（9节）

1.点线面基本操作
2.删除点线面基本操作
3.法向与法向翻转
4.挤出功能使用
5.倒角
6.环切与切割
7.多边形与旋转
8.光滑和随机以及滑移
9.推拉_球形化_隔离顶点

26.blender修改器使用（7节）

1.阵列修改器
2.倒角修改器
3.布尔修改器
4.镜像修改器
5.实体化修改器
6.表面细分修改器
7.字体添加

27.材质与原理化BSDF（2节）

1.原理化BSDF
2.原理化BSDF各种属性使用

28.智慧园区建模（8节）

1.使用纹理贴图创建大厦
2.物体设置2种材质打造大厦屋顶
3.使用image插件快速搭建房子
4.通过现实照片打造摩天大楼
5.使用建筑生成插件快速生成建筑
6.创建树
7.制作照亮路面的路灯
8.根据地图打造马路

29.打造智慧园区（7节）

1.资产库打造智慧园区
2.沃罗诺伊纹理种出随机草地
3.烘焙计算好光照阴影的纹理
4.模型优化与材质优化
5.如何优化导出模型
6.draco解压模型与场景摄像基础设置
7.优化模型渲染逼近真实物理展示效果

30.智慧园区动画与多种游览模式（6节）

1.园区热气球动画
2.设置单一物体热气球多种动画
3.设置大屏控制物体运动模式
4.设置园区汽车运行轨迹与动画
5.园区多相机视角切换
6.观览模式之轨道观览-飞行模式-第一人称模

31.打造智慧工厂（10节）

1.根据户型图搭建户型结构墙体
2.平面上创建发光灯带
3.厂房楼层材质光效优化与模型加载
4.楼层结构与房间用3D科幻悬浮框标注
5.根据需要微调科幻标注的位置
6.大屏控制各楼层展开显示
7.战斗机产品打散变形与组装恢复动画特效
8.将产品物体变成粒子特效
9.递归复原复杂模型生成战斗机粒子特效
10.产品爆炸破碎特效与产品爆炸恢复效果