01
数字孪生概述
什么是数字孪生 · 发展历程 · 核心价值与典型应用（工业制造、智慧城市、医疗健康）
概念应用场景
02
三维可视化基础
三维空间坐标系 · 图形渲染管线 · 主流引擎对比（Three.js/Babylon/Unity）
坐标系引擎
03
开发环境搭建
Node.js & npm · Vue3 初始化 · Three.js 引入 · VS Code + 插件推荐
环境Vue3
04
Three.js 核心入门
Scene/Camera/Renderer · 第一个3D立方体案例
Three.js入门
05
几何体与材质
内置几何体 · MeshStandardMaterial · 纹理贴图基础
几何体材质
06
光源系统
环境光/平行光/点光源/聚光灯 · 效果对比
光照阴影
07
相机控制与交互
OrbitControls · 鼠标点击/悬停 · Raycaster 拾取
交互射线
08
动画与粒子系统
requestAnimationFrame · Tween.js · 粒子系统（烟雾/星空）
动画粒子
09
模型加载与解析
GLTF/GLB · GLTFLoader · 模型优化与压缩
3D模型加载
10
数字孪生数据体系
IoT传感器 · MQTT/HTTP · 时序数据库 InfluxDB
数据IoT
11
前端数据可视化
ECharts 集成 · 实时折线图/柱状图 · 仪表盘布局
图表ECharts
12
数字孪生场景搭建
场景布局 · 坐标对齐与比例 · 多模型层级管理
场景组合
13
数据驱动动画
实时数据绑定位置/旋转/颜色 · 阈值触发动画
数据驱动动画
14
交互式面板开发
Vue3 控制面板 · 滑块/开关/按钮 · 双向数据绑定
UIVue3
15
数字孪生中的UI/UX设计
HUD设计 · 信息层级 · 响应式布局适配
UI/UXHUD
16
性能优化策略
LOD · InstancedMesh · 纹理压缩 · 帧率监控
优化LOD
17
数字孪生中的物理引擎
Cannon.js · 刚体与碰撞检测 · 重力与约束
物理Cannon
18
数字孪生中的路径规划
A*算法 · 3D寻路 · 路径可视化与动态避障
寻路A*
19
数字孪生中的热力图
热力图数据生成 · Three.js热力图插件 · 温度/压力场
热力图可视化
20
数字孪生中的时间轴
时间滑块 · 历史数据回放 · 时间序列动画
时间轴回放
21
数字孪生中的标注系统
CSS2DRenderer · 标注点聚合 · 标注交互
标注CSS2D
22
剖切与爆炸图
ClippingPlane · 爆炸图动画 · 内部结构展示
剖切爆炸图
23
多视图与联动
多相机多视图 · 视图联动 · 画中画效果
多视图联动
24
AR/VR 集成
WebXR · AR模型放置 · VR沉浸式漫游
ARVR
25
GIS 集成
Cesium.js · 3D地图融合 · 地理坐标转换
GISCesium
26
视频融合
VideoTexture · 实时视频叠加 · PTZ相机控制
视频融合
27
平台后端架构
Node.js+Express · WebSocket · RESTful API
后端API
28
平台部署
Docker · Nginx · HTTPS · CDN加速
部署Docker
29
综合实战：智慧工厂
设备监控 · 产线模拟 · 告警联动
实战工厂
30
综合实战：智慧园区
楼宇管理 · 能耗监控 · 安防联动
实战园区