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

🔹 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 的原因：

1. 前端生态完善（Vue 组件化集成简单）
2. 性能可控（按需加载模块）
3. 社区活跃（问题解决效率高）

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）+ 云端资产库

学习资源推荐

1. Three.js 官方文档：https://threejs.org/docs/
2. GLB 模型资源：Sketchfab、Poly Haven
3. PBR 材质理论：Learn OpenGL 教程
4. 数字孪生案例：Digital Twin Consortium

总结

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

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