一、Web3D 都展示什么、用来干什么（从简单→复杂）
✅ L1 极简静态模型展示（入门）
用途 ：电商详情页嵌入模型、官网产品卡片，只能旋转缩放，无复杂交互
- 例子：耳机、水杯、灯具、工业配件，网页打开鼠标拖拽旋转、滚轮缩放，加载 loading
- 商业价值：报价 1000~2500；很多淘宝 / 工厂商家需求
- 技术点：scene/camera/renderer 基础、GLB 模型加载、OrbitControls、基础灯光
就是你计划的第一个 Demo！
✅ L2 带交互的产品查看器（接单主力，最常见）
用途：产品零件点击弹出说明、热点标注、自动旋转、重置视角
- 例子：工业控制柜、设备，点击不同零件，弹出参数卡片；产品多角度查看
- 商业价值：报价 2500~4000；工厂设备、医疗器械、五金产品需求多
- 新增技术：射线拾取 Raycaster、UI 联动、模型加载进度、阴影、PBR 材质
✅ L3 产品在线选配器（高价值接单项目）
用途：换颜色、切换配件、更换材质（金属 / 哑光），预览不同配置的成品
- 例子：家具、机箱、灯具、汽车轮毂，选择不同配件实时预览；生成截图
- 商业价值：报价 4000~7000，电商、设备厂商需求
- 新增技术：材质切换、模型显隐切换、GSAP 平滑动画、模型轻量化优化
✅ L4 虚拟展厅 / 室内漫游（中等难度）
用途：线上展厅、样板间、展馆，第一人称在场景内走动，点击展品查看详情
- 商业价值：报价 6k~12k；地产、展会、博物馆项目
- 新增技术：角色控制器、碰撞检测、场景大模型 LOD 分层加载、多模型管理
✅ L5 工厂 / 园区静态数字孪生（求职热门，唐山运营商 / 国企可视化岗）
用途：园区、厂房、设备三维可视化，模型是静态，点击设备查看基础信息，展示布局
注意：只是静态 3D 模型展示，还没有接入实时物联网数据（很多公司招聘写的数字孪生就是这一档）
- 商业价值：1w~3w，政企项目
- 新增技术：大规模场景优化、实例化渲染、分层显示、GIS 简单结合
✅ L6 虚实映射数字孪生（高阶，企业大型项目）
用途：3D 模型对接后端 IoT 传感器，设备状态实时同步（温度、开关状态），模型颜色随数据变化
- 商业价值：十几万起，一般团队开发，很少个人接
- 新增技术：websocket 实时数据流、状态驱动模型、告警可视化、性能深度调优
✅ L7 高阶仿真孪生（顶级难度）
物理模拟、流体、预测仿真，可以在网页模拟设备运行、故障推演；一般是大厂团队项目，个人很少独立完成。
二、分阶段学习路线（6 个月规划，循序渐进，边学边做作品集）
🟢阶段 1：基础理论 + L1 项目（2 周，目标：完成第一个产品静态展示 Demo）
- 核心概念：Scene 场景、Camera 相机、Renderer 渲染器、几何体、材质、光源（环境光 / 方向光）
- 学习：创建立方体、球体，理解坐标系；添加 OrbitControls 控制器；HDR 环境贴图提升质感
- 项目：加载一个 GLB 单品模型，实现拖拽旋转、滚轮缩放、loading 进度条
- 交付：部署在线链接，作品集第一个案例
🟡阶段 2：交互核心 + L2 项目（3 周，接单主力技能）
- 重点攻克：射线拾取 Raycaster（点击模型零件，弹出信息面板，外包高频需求）
- 学习：阴影、PBR 材质、模型结构遍历、模型压缩 DRACOLoader
- 项目：升级产品 Demo，给零件命名，点击零件弹出悬浮信息卡片
- 交付：作品集案例升级；这个 Demo 就可以放到猪八戒店铺投标接单
🟠阶段 3：动画 + 选配功能 L3 项目（3 周，提升报价能力）
- 学习：GSAP 动画、材质切换、模型显隐、贴图替换、截图导出
- 项目：产品选配器，切换颜色、切换配件，一键模型爆炸拆解动画（工业产品加分项）
- 交付：高级作品集，这个 Demo 可以接 4k + 的单子
🔴阶段 4：大场景与性能优化 L4/L5（1.5 个月，面向求职数字孪生岗位）
- 学习：LOD、实例化渲染 InstancedMesh、模型减面优化、内存释放、大场景分块加载
- 项目：小型园区 / 厂房静态数字孪生 Demo，建筑、道路、设备，点击设备查看信息
- 拓展：简单第一人称漫游（可选）
- 交付：求职核心项目，面试重点展示
🟣阶段 5：实时数据对接 L6（剩余时间，高阶能力）
- 学习：WebSocket、数据驱动模型状态、告警颜色变化
- 项目：简易 IoT 孪生 Demo，后端推送设备温度，模型颜色随温度变化
- 目标：冲击企业数字孪生岗位
👉节奏建议：不要提前学 Shader、粒子这些炫技内容，商业接单很少用到，优先掌握上面这套，把接单和求职刚需功能吃透。
三、资源查找清单（教程、模型、贴图，全部免费可用）
📖学习教程
- Three.js 官方文档 + 示例库（最重要） ：threejs.org examples 里面几百个 demo，需要什么功能直接搜代码，复制修改调试
- 中文：郭隆邦 Three.js 教程（B 站 / 博客，中文入门友好）
- 英文系统课：Three.js Journey（Bruno Simon，公认最好系统课，付费，可选）
- B 站：搜索
Three.js 产品展示、Three.js射线拾取，大量实战项目拆解
🧩3D 模型资源（优先下载 GLB/GLTF 格式，网页原生格式）
- Sketchfab ：Sketchfab - The best 3D viewer on the web 筛选条件：
glTF、Free、Commercial use（免费商用！重点），下载单品设备、工业模型，就是你项目用的模型源 - Poly Haven：HDR 环境贴图（免费商用，用来打光，产品渲染质感提升巨大）
- Texture Haven：免费 PBR 材质贴图
🛠️模型处理工具
- Blender（免费）：用来简化模型、重命名零件、减面、修复模型、导出 GLB；不用精通，只学基础模型清理就够用（不需要从零建模）
- glTF Viewer 网页工具：在线预览 GLB，检查模型结构、零件名称，调试模型
📦代码工具
- Vite + Vue3：你的开发环境
- 库：three、gsap
- 部署：Vercel / Netlify，免费托管，生成在线演示链接，简历、投标直接粘贴
四、避坑提醒
- 模型优先选 GLB 格式，不要 FBX/OBJ；GLB 是 Web3D 标准，加载最快，支持 Draco 压缩
- 模型不要面数太高！网页端模型面数控制：单品产品尽量 10 万面以内，大场景要更低，否则手机卡顿
- 商业接单，尽量约定客户提供 GLB 模型；建模单独报价，不要打包低价全包，建模耗时远大于前端开发
五、下一步行动建议
立刻启动阶段 1：
- Vite 新建 Vue3 项目，安装 three
- 去 Sketchfab 下载一个免费商用低面工业控制柜 GLB 模型
- 搭建基础场景模板，实现模型加载、拖拽旋转缩放