基于 Vue3 + Three.js 打造工业级 3D 场景编辑器 | 开源实战

mmc123125

2496人浏览 · 2025-12-11 10:09:55

mmc123125 · 2025-12-11 10:09:55 发布

基于 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 = 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')  // 切换工具模式

在这里插入图片描述

🏗️ 架构设计

组件化分层

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)
})

在这里插入图片描述

2. 场景大纲树

实现层级展示与批量操作：

<template>
  <div v-for="model in models" :key="model.id" class="outliner-item">
    <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 = 'wuchen © 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)
    }
  }
}

在这里插入图片描述

🚀 快速上手

本地开发

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 = true
function animate() {
  if (needsRender) {
    renderer.render(scene, camera)
    needsRender = false
  }
  requestAnimationFrame(animate)
}

transformControls.addEventListener('change', () => {
  needsRender = true
})