基于 Vue3 与 Three.js 构建工业级 3D 场景编辑器

基于 Vue3 与 Three.js 构建工业级 3D 场景编辑器 | 极客日志

基于 Vue3 与 Three.js 构建工业级 3D 场景编辑器

![3D 场景编辑器界面]

前言

在智慧工地、数字孪生、工业仿真等领域，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 = new THREE.Scene()
camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 2000)
renderer = new THREE.WebGLRenderer({antialias:true,alpha:true})
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1.2
renderer.shadowMap.enabled = true

🔹 TransformControls 交互系统

实现拖拽式对象变换，支持三种模式（translate/rotate/scale）：

const transformControls = new TransformControls(camera, renderer.domElement)
transformControls.addEventListener('dragging-changed',(event)=>{
  orbitControls.enabled = !event.value // 拖拽时禁用相机
})
transformControls.setMode('translate')// 切换工具模式

![3D 场景编辑器界面]

架构设计

组件化分层

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 = new GLTFLoader()
loader.load(url,(gltf)=>{
  const model = gltf.scene
  model.traverse(child=>{
    if(child.isMesh){ child.castShadow =true child.receiveShadow =true}
  })
  scene.add(model)
})

![3D 场景编辑器界面]

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 绘制防盗用水印：

function drawWatermark(){
  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 ='© 2025'
  const gap =180
  for(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)
    }
  }
}

![3D 场景编辑器界面]

快速上手

本地开发

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 - 复制对象

![3D 场景编辑器界面]

性能优化实践

1. 模型优化

✅ 自动简化高面数模型（LOD 分级）
✅ 纹理压缩（Basis Universal）
✅ Draco 几何压缩

2. 渲染优化

// 视锥剔除
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
// 按需渲染（无交互时停止刷新）
let needsRender =true
function animate(){
  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

总结

本文从架构设计到核心实现，详细讲解了如何构建一个工业级 Web 3D 编辑器。项目代码已开源，可直接用于：

🏗️ 智慧工地场景编排
🏭 工厂数字孪生
🏙️ 城市规划可视化
🎮 轻量级游戏编辑器

基于 Vue3 与 Three.js 构建工业级 3D 场景编辑器