一、基础前端能力（你基本已具备，可快速略过）
三维前端 ≠ 脱离前端，本质还是前端工程师。
必备：
-
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 个月）
-
性能优化
-
数字孪生/大屏项目
-
能讲清楚设计与优化思路
👉 到这里，已经可以应聘三维前端 / 可视化前端。