大屏三维场景与WebGL实战

01

WebGL基础入门 开篇

什么是WebGL · OpenGL关系 · 浏览器支持 · 第一个点

02

图形管线与着色器

渲染管线 · 顶点/片元着色器 · 编译链接

03

绘制基础图形

点线三角形 · 矩形多边形 · drawArrays/drawElements

04

颜色与缓冲区

顶点颜色插值 · 缓冲区传递 · 多属性 · 混合透明度

05

矩阵与变换

平移旋转缩放 · 矩阵乘法 · gl-matrix · 模型视图投影

06

3D空间与透视

2D→3D · 透视/正交投影 · 视口 · Z-buffer

07

纹理映射

纹理坐标 · 加载图像 · 过滤环绕 · 多纹理单元

08

光照与材质

环境/漫反射/镜面 · 冯氏模型 · 法线矩阵

09

Three.js入门

简介 · Scene/Camera/Renderer · 第一个3D场景

10

Three.js几何体与材质

Box/Sphere几何体 · 材质类型 · 纹理贴图

11

Three.js光源与阴影

环境/平行/点/聚光 · 阴影映射配置

12

Three.js动画与交互

requestAnimationFrame · 旋转移动 · Raycaster拾取

13

大屏场景设计原则

视觉规范 · 色彩布局 · 层次感 · 性能优化初步

14

粒子系统

Points原理 · PointsMaterial · 纹理颜色动画

15

3D图表与数据可视化

柱状/饼图/折线3D化 · 动态数据过渡

16

地球与地图可视化

球体贴图 · 经纬度转3D · 飞线 · 热力图

17

模型加载与展示

GLTF/GLB · GLTFLoader · 模型动画控制

18

后期处理特效

EffectComposer · 辉光/景深/抗锯齿

19

大屏交互与动效

滚动触发 · 悬停高亮 · 弹窗 · 场景切换

20

性能优化实战

Draw Call · 几何体合并 · LOD · Mipmap

21

多场景与场景管理

切换逻辑 · 状态管理 · 预加载 · 内存释放

22

大屏数据对接

WebSocket · REST API · 数据驱动 · 模拟/真实切换

23

响应式大屏适配

分辨率适配 · 视口单位 · CSS+3D联动 · 触控

24

大屏项目架构设计

目录结构 · 模块化 · Zustand/Redux · Vite/Webpack

25

大屏安全与异常处理

跨域 · 加密鉴权 · WebGL上下文丢失 · 降级

26

大屏部署与发布

打包优化 · CDN · Nginx · HTTPS安全头

27

实战项目一：智慧城市大屏 (上)

需求分析 · 场景搭建 · 建筑群 · 交通流量

28

实战项目一：智慧城市大屏 (下)

数据对接 · 交互完善 · 性能调优上线

29

实战项目二：电商数据大屏 (上)

场景设计 · 3D商品 · 销售图表 · 热力图

30

实战项目二：电商数据大屏 (下)

实时看板 · 动效过渡 · 多端适配 · 复盘