Three.js 入门实战：基于 Vue3 做一个可拖拽的 3D 编辑器

前言

如果你是第一次接触 Three.js，这篇文章会带你从 0 到 1 建立完整认知：

1. Three.js 到底是什么。
2. 核心概念有哪些。
3. 怎么在真实项目里用起来。
4. 新手最容易踩哪些坑。

本文不是纯理论，而是结合我自己写的一个真实项目 drag-3D-three 来讲解。这个项目是一个 3D/2D 可视化大屏编辑器，Three.js 部分支持拖拽创建几何体、加载模型、选择元素、修改属性和保存案例。

技术栈：Vue 3 + TypeScript + Vite + Three.js + Pinia

---

一、Three.js 是什么

Three.js 是一个运行在浏览器中的 3D 图形库，它基于 WebGL 做了高级封装。

你可以把它理解成：

1. WebGL 是底层图形 API，能力强但很底层。
2. Three.js 是更易用的“3D 开发工具箱”。
3. 你不需要直接写复杂着色器，也能快速搭建 3D 场景。

Three.js 适合做什么：

1. 3D 数据可视化。
2. 数字孪生大屏。
3. 在线 3D 编辑器。
4. 模型展示页。
5. 小型网页 3D 互动。

---