Three.js3D场景编辑器

three.js 3d场景

一直在公司负责可视化平台的设计研发工作。公司可视化需求的大量增加，又想少开发写代码。就慢慢衍生出了2款编辑器。可视化编辑器，3D场景编辑器。最近把2款编辑器进行了简单的融合。最终达到了以上示例效果。

可视化编辑器技术栈：
vue3，element-plus，antv x6， IndexedDB， vite

3D场景编辑器技术栈：

vue3, three.js, element-plus, webworker, IndexedDB, vite
快捷键使用：
模型场景快捷键：

1. a:左移。
2. d:右移。
3. w:前进。
4. s:后退。
5. q:下降。
6. e:上升。

选中模型后：

1. r:控制模型位置。
2. t:控制模型角度。
3. y:控制模型大小。

鼠标右键长按转向。
滚轮放大缩小。
双击设备模型飞到设备模型位置。

基于以上编辑器衍生出了
visualization-view 可视化解析器有vue2，vue3。2个版本
scene-view 3d场景解析器vue3版本。
解析器使用方式：

<template>
<threeView url="/场景模型 (4).zip"></threeView>
</template>
<script setup>
import {threeView} from 'scene-view/lib'
import 'scene-view/lib/style.css'

场景编辑器：
https://download.csdn.net/download/qq_35304110/88440838?spm=1001.2014.3001.5503

线上演示环境：

Vite + Vue