三维前端需要会哪些东西？

一、基础前端能力（你基本已具备，可快速略过）

三维前端 ≠ 脱离前端，本质还是前端工程师。

必备：

• HTML / CSS / JavaScript（ES6+）
• TypeScript（三维项目强烈建议 TS）
• React / Vue
• 模块化、工程化（Vite / Webpack）
• 基本性能意识（渲染、内存、事件）

👉 你这里是 优势项。

---

二、三维前端【核心必会】

这是三维前端和普通前端的分水岭。

1️⃣ Three.js（绝对核心）

90% Web 三维项目都用它

必须掌握：

• 场景基础

  • Scene / Camera / Renderer

• 几何体 & 材质

  • Geometry / BufferGeometry
  • MeshBasic / MeshStandard / MeshPhysical

• 光源

  • 环境光 / 平行光 / 点光 / 阴影

• 相机

  • 透视相机 / 正交相机

• 控制器

  • OrbitControls（必会）

• 动画

  • requestAnimationFrame
  • Clock

• 事件拾取

  • Raycaster（点击/悬浮）

• 坐标系 & 向量

  • Vector3 / Euler / Matrix4

👉 能独立完成：
3D 场景 + 模型加载 + 交互点击

---

2️⃣ WebGL 基础概念（不用手写，但必须懂）

面试 & 排错必问

需要理解：

• GPU 渲染流程
• 顶点 / 片元着色器在干嘛
• 材质 ≈ shader 封装
• 深度测试、透明度
• draw call 是什么

❗ 不要求写原生 WebGL，但 不能完全不懂

---

3️⃣ 三维模型与资源

模型格式

• GLTF / GLB（重点）
• FBX（了解）

必会工具

• Blender

  • 基本操作（导入/导出）
  • 模型压缩
  • 法线 / 材质 / 贴图

Three.js 中加载

• GLTFLoader
• Draco 压缩
• KTX2 纹理压缩（进阶）

---

三、工程化 & 实战能力（拉开差距）

这部分是 「初级三维」→「能拿高薪」 的关键。

4️⃣ Three.js + React / Vue

常见方案：

• 原生 Three.js + React
• react-three-fiber（R3F） （强烈推荐）

你需要会：

• 生命周期与 Three 渲染结合
• 状态管理与 3D 交互
• 组件化封装 3D 场景

👉 R3F 对你这种 React 背景非常友好。

---

5️⃣ 动画与交互

• GSAP + Three.js
• 模型动画（AnimationMixer）
• 镜头动画（漫游、飞行）
• 热点标注 / 信息面板
• 选中高亮 / 描边效果

---

6️⃣ 性能优化（非常重要）

三维项目性能就是命门。

必须会：

• 减少面数（模型优化）
• 合批（InstancedMesh）
• LOD
• 纹理压缩
• 开关阴影
• requestAnimationFrame 控制
• 内存释放（dispose）

👉 很多公司卡在这里招人。

---

四、三维前端【常见业务方向】

你可以选 1–2 个主攻。

🧱 方向 1：可视化 / 大屏

• Three.js + ECharts
• 城市 / 园区 / 工厂
• 数据联动 3D 场景

🏭 方向 2：数字孪生

• 设备状态
• 实时数据
• 告警高亮
• 场景漫游

🚗 方向 3：产品展示 / 工业

• 3D 产品拆解
• 旋转查看
• 参数联动

---

五、加分项（高级 / 高薪）

不是必须，但会了很值钱。

• Cesium（GIS / 地图）
• Shader 编程（GLSL）
• Three.js 后期处理（Bloom、Outline）
• WebGPU（前沿）
• VR / AR（WebXR）

---

六、给你的【学习路径建议】（非常关键）

结合你背景，最省时间路线👇

第 1 阶段（1–2 周）

• Three.js 基础
• 场景 + 模型 + 点击

第 2 阶段（2–3 周）

• Three.js + React
• 动画 + 交互
• 一个完整 Demo

第 3 阶段（1 个月）

• 性能优化
• 数字孪生/大屏项目
• 能讲清楚设计与优化思路

👉 到这里，已经可以应聘三维前端 / 可视化前端。

---