Three.js可视化企业实战WEBGL课课程介绍

《Three.js可视化企业实战WEBGL课》课程一共有465节课程，课程时间长短不一，长的一节有60分钟，短的一节只有几分钟，平均下来一节大概有20分钟，总时长大概在90个小时。

课程价格

《Three.js可视化企业实战WEBGL课》课程价格为2880元，领取优惠劵后价格为2480元.

视频教程地址

适用人群

懂基础前端知识、需要学习和开发3d项目的前端

课程概述

全网领先的three.js的 WEB 3D可视化课程。课程全面系统的讲解WEB 3D可视化技术，涵盖目前企业开发的各种应用技术和项目案例。包含智慧园区、智慧城市、智慧工厂。学完可以直接应用在工作中，不仅仅讲three、cesium的企业项目应用，还讲底层的webgl着色器编写和修改各种材质和后期合成效果以及blender建模动画哦。

课程章节目录

1.认识three.js与开发环境搭建

如何的学习WEB可视化3D技术与课程内容演示
新增打造开放世界课程项目预览
本地搭建threejs官方网站
使用parcel搭建three.js开发环境
使用three.js渲染第一个场景和物体
如何处理运行搭建开发Three环境出现的问题
如何结合vue开发threejs

2.Three.js开发入门与调试设置

坐标辅助器与轨道控制器
物体位移与父子元素
 物体的缩放与旋转
 响应式画布与全屏控制
 应用lil-GUI调试开发3D效果
 几何体_顶点_索引_面之BufferGeometry
几何体划分顶点组设置不同材质
 threejs常见几何体
基础材质_贴图_高光_透明_环境_光照_环境遮蔽
贴图的加载与环境遮蔽贴图强度设置
 透明度贴图_环境贴图加载与高光贴图配合使用
 纹理的颜色空间
 场景的线型雾和指数雾
 加载gltf模型和加载压缩过的模型
 光线投射实现3d场景交互事件
 补间动画Tween应用

3.Geometry进阶详解

全面讲解UV与应用
法向量属性应用与法向量辅助器
几何体顶点转化_顶点位移_旋转_缩放
包围盒使用与世界矩阵转换
几何体居中与获取几何体中心
获取多个物体包围盒
边缘几何体与线框几何体

4.详解材质与纹理

初识材质与纹理
详解纹理偏移_旋转_重复
设置纹理显示算法与mipmap
透明材质与透明纹理
环境遮挡贴图与强度
详解PBR物理渲染
标准网格材质与光照物理效果
置换贴图与顶点细分设置
设置粗糙度与粗糙度贴图
设置金属度与金属贴图
法线贴图应用
如何获取各种类型纹理贴图
纹理加執进度情况
详解环境贴图
经纬线映射贴图与HDR
清除物体_几何体_材质_纹理保证性能和内存不泄漏

5.详解灯光与阴影

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

6.精通粒子特效

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

7.详解光线投射与物体交互

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

8.打造3D全屏滚动官网

设置页面结构与样式
同步屏幕滚动与相机位置
设置三屏特效
切屏触发当前屏幕物体特效
gsap控制网页切屏文字动画
鼠标控制相机摇晃特效
设置滚动条隐藏的方式

9.应用物理引擊设置物体相互作用

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

10.WEBGL与GPU渲染原理（难点）

渲染管线
细讲渲染流程
WEBGL绘制三角形
缩放矩阵与uniform变量和varying变量
着色器gis！基本规范

11.精通着色器编程

初识着色器语言
着色器插件安装与文件导入开发
认识rawShaderMaterial与 attribute_uniform_varying变量
控制顶点位置打造波浪形状
unform传递时间变量打造动画与通过uv采样纹理
着色器编写各种类型图案
着色器编写各类型图案2
shader着色器编写高级图案
shader着色器编写高级图案2
shader着色器打造漫天飞舞孔明灯1
shader着色器打造漫天飞舞孔明灯2

12.着色器打造烟雾水云效果

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

13.著色器设置点材质

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

14.炫丽烟花交互项目案例

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

15.使用着色器加工材质

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

16.效果合成与后期处理

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

17.HTML混合3D渲染

CSS渲染器基本使用
添加多个元素标签跟随物体移动
使用射线碰撞來检测标签显示隐藏

18.曲线应用与轨迹运动

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

19.变形动画

变形动画原理与实现
实现花苗生长到花开效果

20.全景看房与科技展馆

VR全景看房原理与实现
全景看房场景房间切换
房间切换之地图动画
全局加载进度管理实现页面loading
扩展提升实现科技展览馆

21.智慧城市

智慧城市和项目介绍
Vue创建智慧城市项目并配置glsl写法支持
项目基础代码结构分解
生成城市建筑模型
城市模型科技感渐变效果
多层着色器特效合并与城市光圈扩散效果
直线光带掠过城市效果
从下向上扫描城市特效
利用tube特性生成带纹理图案飞线
飞线方案2—着色器绘制酷炫飞线
函数翻折实现彗星型飞线动画
edgeGeometry生成建筑线框特效
智慧城市光墙特效
智慧城市雷达扫描特效
封装3D警告标识与点击提示事件
添加智薏城市天空盒子和设置抗锯齿效果
智慧城市大屏样式与结构
置Pointer-events穿透事件
智慧城市动态数字面板动画
通过接口生成城市事件列表
城市事件列表动态生成雷达—飞线—光墙
大屏HTML元素与场景物体数据交互与特效展现

22.blender基础

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

23.blender操作教学

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

24.blender建模

点线面基本搡作
剻除点线面基本搡作
法向与法向翻转
挤出功能使用
倒角
环切与切割
多边形与旋转
光滑和随机以及滑移
推拉_球形化_隔离顶点

25.blender修改器使用

阵列修改器
倒角修改器
布尔修改器
镜像修改器
实体化修改器
表面细分修改器
字体3D添加与中文字体

26.材质与智慧园区物体实现

原理化BSDF
原理化BSDF各种属性使用
使用纹理贴图创建大厦
物体设置2种材质打造大厦屋顶
使用image插件快速搭建房子
通过现实照片打造摩天大楼
使用建筑生成插件快速生成建筑
制作园区树木
制作照亮路面的路灯
根据地图打造马路
根据地图创建多边形建筑

27.打造智慧园区

资产库打造智慧园区
沃罗诺伊纹理种出随机草地
烘焙计算好光照阴影的纹理
模型优化与材质优化
如何优化导出模型
draco解压模型与场景摄像设置
优化模型渲染逼近真实物理展示效果
园区热气球动画
设置单一物体热气球多种动画
设置大屏控制物体运动模式
设置园区汽车运行轨迹与动画
园区多相机视角切换
自定义园区观览模式—轨道—飞行模式—第一人称

28.骨骼动画

创建骨骼与顶点组
骨骼动画制作
人物的骨骼动画
如何切换控制器聚焦位置与拉近视角

29.打造智慧工厂

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

30.地理数据生成3D物体与地图

GEOJSON与地图下载
通过GEO数据生成3D地图
与3D地图进行交互
通过GEO生成地图3D线

31.Cesium入门到精通

打造第一个cesium应用
Cesium基础设置
详讲viewer查看器
cesium天空盒
Cesium自定义地图与地图叠加
添加地形与添加自定义地形
坐标系与坐标系数值转换
相机的方向和位置
相机动画与相机动态交互
添加物体与3D建筑物
标签与广告牌
3D模型添加与设置
椭圆_走廊_圆柱体添加与设置
多边形_体积折线_矩形_椭球体设置
Primitive创建图像物体
Primitive多个实体与颜色修改
与entity和primitive物体交互
entity材质使用materialProperty
entity折线材质设置
Appearance外观与材质
primitive材质类型与设置
fabric自定义着色器设置材质
cesium着色器自带函数与变量
Appearance编写着色器修改外观
编写自定义MaterialProperty材质
加载渲染GEOJSON数据
 自定义GEOJSON生成物体的样式
 KML数据生成3D地理标记
 初识CZML数据与应用
 CZML时间动态图形场景
 追踪航班跨洋飞行
 3DTiles与性能监控
 根据不同条件设置3D_tiles样式
 3D_tlles高级样式设置与条件渲染

32.Cesium智慧广州项目实战

项目介绍
制作获取地图经纬度插件
指南罗盘与比例尺
修改着色器实现酷炫地图颜色
编写着色器实现建筑物渐变特效
编写着色器实现滚动光环特效
实现酷炫光锥动画
着色器实现科技感流光飞线特效
地理小工具生成道路汽车行驶轨迹线
着色器编写流光四溢轨迹线
纹理采样设置酷炫轨迹飞线
色器实现五彩斑焖雷达特效
六边形光波扩散特效
 着色器编写区域光墙
粒子实现广州塔小蜜腰烟花特效

33.打造元宇宙虚拟世界

元宇宙项目搭建与准备
元宇宙项目物理环境
元宇宙碰撞检测实现
控制物体运动与阻尼
运用叉积控制左右水平运动
相机跟随任务运动与跳跃实现
让人物爬坡爬楼梯原理
LOD多细节分层次优化场景模型展示
巧用空对象完成相机左右跟随人物
人物前后视角切换
人物动作控制
根据速度流畅切换走路与跑步动作
大场景渲染大量相同物体的实例化网格
threejs合并物体工具提升渲染性能
真实物理材质与新增彩虹折射效果
真实动态映射环境物体纹理
镜面反射与原理
canvas绘制纹理生成动态3d文字
alpha贴图与视频纹理
视频纹理与canvas动态结合打造酷炫3D文字界面
LOD不同精细模型制作
场景多个位置生源音效
项目结构与代码编写模式
场景动态云雾制作
粒子群优化渲染体积云
通过着色器修改水面材质源码实现海洋效果
加载元宇宙场景与灯光
元宇宙场景人物控制与物理碰撞
视频纹理实现场景位置目标光阵效果
视觉投影修改UV实现酷炫流光光阵特效
人物抵达光阵或位置触发自定义事件
canvas纹理创建场景聊天框
自定义酷炫3D动效文字框
修改开源着色器网站shaderToy开源代码编写酷炫篝火
场景火焰实时跟着音乐律动与音乐距离衰减

34.海景酒店日夜交替全景展示

着色器实现海景酒店日夜切换效果实现
太阳升起与降落
太阳照射镜头的光晕效果
夜景LED酒店外墙光幕效果

35.3D图表

搭建3D坐标轴
3D条形图
3D扇形图
3D折线图

36.可视化物理模拟仿真

物理引擎的用途和基本使用
物理引擎基础碰撞讲解
材质与摩擦系数设置
弹性与接触材质详解
碰撞与碰撞组
监听碰撞事件和获取碰撞信息
物体休眠与休眠事件
实现多个形状组合物体
Trimesh实现复杂模型的物理碰撞模拟
多种方式给物体施加作用力
添加LockConstraint物体约束
添加PointToPointConstraint物体约束实现门帘效果
添加DistanceConstraint按距离约束物体运动
使用距离约束实现布料模拟
使用弹簧约束2个物体运动
物理破坏效果约束失效案例
铰链关节约束与应用
流体模拟
实现模拟驾驶刚体车辆
模拟拥有恳架的车辆
控制车辆行进_转弯_漂移

37.WEB端打造开放虚拟世界

课程项目介绍
项目目录和模块介绍
初始化开放世界
物理世界初始化与输入管理模块
天空模块和物理世界
加载管理和UI界面管理
给场景加载模型和各类型碰撞体
场景初始化与场景空对象解析
加载默认场景和总是重生交通工具
场景渲染的执行流程
更新世界的执行流程
更新物理世界和界限判断与角色重生
角色初始化
角色状态更新
输入管理与角色动作状态和动画
更换模型和动画
添加关卡触发点
触发机制与注册世界更新表
人物角色进入车辆过程
AI操控比赛竞速
封裝移动端手指点地移动操作
适配移动端touch事件控制角色移动
场景光阵交互完成传送角色—收看攒劲节目—情景切换

38.React-Three-Fiber库使用详解

React基础开发threejs方式 React-three-fiber库的安装与使用 React-three-fiber控制器的使用 useFrame设置动画
useThree与事件交互模型加载与背景设置
纹理材质应用
3D水晶文字和软阴影

39.项目效果提升

飞机场馆展示案例
普通阴影—接触阴影—级联阴影—烘焙阴影—PCSS阴影优缺点屏幕空间反射
后期环境光遮蔽处理
提升渲染效果具体细节实现流程多后期效果合成1个通道综合运用发光和轮廓混合交互特效
发光辉光的注意事项与处理

小程序3D_XR应用开发

微信小程序3DXR开发第一个案例
材质_灯光_阴影
资源加载与纹理
动态加载纹理
环境纹理加载与视频纹理
动画和关键帧的编写
加载模型与播放动画
事件交互
三维空间坐标转为屏幕坐标
组件通讯实现文字跟随3D元素
AR混合现实开发

程序化节点材质打造逼真科技展馆

多物体多材质烘焙到1张贴图
法向_粗糙度_AO各种物理材质纹理贴图烘焙
sketchup草图大师模型转blender模型优化
threejs程序化节点材质
threejs高阶材质节点各函数讲解
threejs材质节点开发
threejs程序材质节点实现珠光漆材质
threejs程序节点实现碳纤维材质
threejs程序节点噪声函数材质应用
科技馆物理世界搭建
操控机器人
虚拟按键操控机器人
创建展馆碰撞体
展馆材质物理程序节点设置

WebGPU与WGSL入门与原理-（可跳，学下一章）

认识WEBGPU
WEBGPU绘制三角形
WEBGPU的基本配置详解
WGSL变量类型与指定
WGSL常用语法
WEBGPU多重采样与抗锯齿
立方体数据创建与缓冲区写入数据
WGSL属性_uniform_顶点与片元传递数据方式
WEBGPU实现多彩旋转立方体
WEBGPU纹理采样
WEBGPU视频纹理

THREEjs应用WEBGPU与最新程序化节点开发

Threejs应用WebGPU渲染的第一个场景
WebGPU-环境贴图
WebGPU程序化节点材质基础节点
节点材质的纹理与透明度节点
WebGPU封装自定义程序化节点函数
WebGPU着色器函数编写
WebGPU程序节点材质时间节点控制动画
WebGPU灯光与阴影
WebGPU粒子节点材质与随机数节点
WebGPU程序节点打造粒子烟雾特效
WEBGPU汽车展馆搭建
汽车加载与阴影纹理程序节点设置
WEBGPU车身材质效果优化设置
WEBGPU车机系统视频展示
汽车展示与交互功能

学习笔记