基于 Vue3 + Three.js 打造工业级 3D 场景编辑器 | 开源实战
基于 Vue3 + Three.js 打造工业级 3D 场景编辑器 | 开源实战
作者：wuchen
在线体验：3D Editor Demo
📖 前言
在智慧工地、数字孪生、工业仿真等领域，3D 场景编辑器是核心底座工具。本文将带你从零实现一个功能完整的 Web 3D 编辑器，支持模型导入、实时变换、材质编辑、场景导出等专业功能。
项目技术栈：
- Vue 3 + Vite 构建现代化前端架构
- Three.js 实现 WebGL 渲染与交互
- Element Plus 提供工业级 UI 组件
- Canvas 实现水印保护机制
适合人群：前端工程师、3D 可视化开发者、数字孪生从业者
🎯 项目亮点
1. 完整的编辑器工作流
- ✅ 模型库管理：内置设备库 + 自定义模型导入（GLB/GLTF）
- ✅ 实时变换控制：移动/旋转/缩放工具，支持网格吸附
- ✅ 场景大纲树：层级管理、多选、批量操作
- ✅ 属性面板：坐标/尺寸精确编辑
- ✅ 材质编辑器：PBR 材质调节、预设库、发光/透明效果
- ✅ 快捷键系统：Ctrl+Z 撤销、W/E/R 工具切换等
- ✅ 导出功能：支持 GLB 格式导出
2. 工业级技术实现
🔹 Three.js 核心渲染架构
// 场景初始化核心代码片段 scene =newTHREE.Scene() camera =newTHREE.PerspectiveCamera(50, aspect,0.1,2000) renderer =newTHREE.WebGLRenderer({antialias:true,alpha:true}) renderer.toneMapping =THREE.ACESFilmicToneMapping renderer.toneMappingExposure =1.2 renderer.shadowMap.enabled =true🔹 TransformControls 交互系统
实现拖拽式对象变换，支持三种模式（translate/rotate/scale）：
const transformControls =newTransformControls(camera, renderer.domElement) transformControls.addEventListener('dragging-changed',(event)=>{ orbitControls.enabled =!event.value // 拖拽时禁用相机}) transformControls.setMode('translate')// 切换工具模式
🏗️ 架构设计
组件化分层
Model3DEditor (主容器) ├── EditorHeader (顶部工具栏) ├── ModelLibrary (左侧模型库) ├── Viewport (中央渲染视口) │ ├── TransformControls (变换控制器) │ ├── OrbitControls (相机控制) │ └── GridHelper (网格辅助) ├── OutlinerPanel (场景大纲) └── PropertiesPanel (属性面板) 数据流管理
使用 ref + emit 实现父子组件通信：
// 选中对象状态管理const selectedModelId =ref(null)const selectedModel =computed(()=> placedModels.value.find(m=> m.id === selectedModelId.value))// 子组件触发选中事件emit('select', modelId)💡 核心功能实现详解
1. 模型导入与加载
支持拖拽导入 GLB/GLTF 文件，使用 GLTFLoader：
import{ GLTFLoader }from'three/examples/jsm/loaders/GLTFLoader.js'const loader =newGLTFLoader() loader.load(url,(gltf)=>{const model = gltf.scene model.traverse(child=>{if(child.isMesh){ child.castShadow =true child.receiveShadow =true}}) scene.add(model)})
2. 场景大纲树
实现层级展示与批量操作：
<template> <div v-for="model in models" :key="model.id"> <el-checkbox @change="handleSelect(model.id, $event)" /> <el-icon @click="toggleVisibility(model.id)"> {{ model.visible ? 'View' : 'Hide' }} </el-icon> <span>{{ model.label }}</span> </div> </template> 支持功能：
- 🔘 多选（Ctrl/Shift + 点击）
- 👁️ 显示/隐藏切换
- 🔒 锁定/解锁编辑
- 📋 批量删除/复制
3. 水印保护机制
使用 Canvas 绘制防盗用水印：
functiondrawWatermark(){const canvas = watermarkCanvas.value const ctx = canvas.getContext('2d') ctx.font ='14px Arial' ctx.fillStyle ='rgba(150, 150, 150, 0.15)' ctx.rotate(-20* Math.PI/180)const text ='wuchen © 2025'const gap =180for(let y =-canvas.height; y < canvas.height *2; y += gap){for(let x =-canvas.width; x < canvas.width *2; x += gap){ ctx.fillText(text, x, y)}}}
🚀 快速上手
本地开发
npm run dev # 访问 http://localhost:2288部署上线
npm run build 📦 技术选型对比
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Three.js | 生态成熟、学习成本低 | 需手动管理渲染循环 | Web 端轻量级 3D |
| Babylon.js | 集成度高、内置编辑器 | 包体积较大 | 游戏开发 |
| Unity WebGL | 功能最强大 | 初始加载慢 | 重度 3D 应用 |
本项目选择 Three.js 的原因：
- 前端生态完善（Vue 组件化集成简单）
- 性能可控（按需加载模块）
- 社区活跃（问题解决效率高）
🎨 UI/UX 设计亮点
1. 暗色主题设计
参考专业 3D 软件（Blender/Maya）风格：
:root{--bg: #1e1e2e;--bg-panel: #252536;--accent: #6366f1;--text: #e2e8f0;}2. 快捷键提示
内置快捷键面板（按 H 唤起）：
W/E/R- 切换变换工具Del- 删除选中对象F- 聚焦选中对象Ctrl+D- 复制对象
🔧 性能优化实践
1. 模型优化
- ✅ 自动简化高面数模型（LOD 分级）
- ✅ 纹理压缩（Basis Universal）
- ✅ Draco 几何压缩
2. 渲染优化
// 视锥剔除 renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))// 按需渲染（无交互时停止刷新）let needsRender =truefunctionanimate(){if(needsRender){ renderer.render(scene, camera) needsRender =false}requestAnimationFrame(animate)} transformControls.addEventListener('change',()=>{ needsRender =true})🌟 未来规划
- 支持动画时间线编辑
- 物理引擎集成（Ammo.js）
- 多人协同编辑（WebRTC）
- VR/AR 模式支持
- Python 后端（FastAPI）+ 云端资产库
📚 学习资源推荐
- Three.js 官方文档：https://threejs.org/docs/
- GLB 模型资源：Sketchfab、Poly Haven
- PBR 材质理论：Learn OpenGL 教程
- 数字孪生案例：Digital Twin Consortium
📄 开源协议
本项目采用 MIT License，可自由用于商业项目。
版权声明： Copyright © 2025 wuchen. All rights reserved.
🎉 总结
本文从架构设计到核心实现，详细讲解了如何构建一个工业级 Web 3D 编辑器。项目代码已开源，可直接用于：
- 🏗️ 智慧工地场景编排
- 🏭 工厂数字孪生
- 🏙️ 城市规划可视化
- 🎮 轻量级游戏编辑器
如果本文对你有帮助，欢迎：
- ⭐ Star 项目
- 👍 点赞收藏
- 💬 评论交流
- 🔗 分享给更多开发者
下期预告： 《Three.js 性能优化实战：百万级模型场景渲染》
