three.js3D模型场景编辑器

基于Vue3+Typescript+Three.js0.174实现的3d模型场景编辑器

three.js为浏览器提供了加载和渲染3d模型文件的功能，也提供了很多针对3d模型参数和效果修改的方法如：模型材质贴图，颜色，金属度，粗糙度，缩放，位置，旋转，动画，阴影，灯光，选中效果等。

基于three.js提供的这些功能的背景下，也衍生了很多关于three.js模型场景操作功能

但是传统的开发和代码调试会使three.js项目的开发效率变得十分缓慢和效率低下。

在基于这个需求背景下作者决定开发一款three.js3d模型场景编辑器来解决这一需求痛点

项目技术栈：Vue3+TypeScript+Three.js174

项目预览链接：https://three3d-0gte3eg619c78ffd-1301256746.tcloudbaseapp.com/threejs-model-edit-pro/

主要实现的功能：
1.模型和灯光拖拽加载功能，根据当前鼠标在场景中的位置来添加
2.场景内容，位置，大小，缩放，可见性，阴影，模型材质相关内容可视化编辑修改
3.场景内容选择效果，场景内容选中聚集定位
4.场景内容删除，复制功能
5.相机数据动态修改
6.渲染器，场景，地面，天气等动态修改
7.第一人称视角移动
8.新增，预览，保存，导入，导出场景功能
9.模型导入，导出功能
10.模型动画播放功能

一、模型和灯光拖拽加载功能，根据当前鼠标在场景中的位置来添加

灵活化的添加模型内容，可通过鼠标拖拽的方式来定义模型的大小，缩放，旋转等属性也可以通过输入框手动调整

二、场景内容，位置，大小，缩放，可见性，阴影，模型材质相关内容可视化编辑修改

根据当前模型材质的类型，列举出材质可编辑的内容

贴图内容支持本地上传（.jpg,.png,hdr）格式

三、渲染器，场景，地面，天气等动态修改

支持动态修改渲染器配置，场景配置，地面类型，和天气类型等可适配多种用户场景

四、第一人称视角移动

切换第一人称角度 通过W/S/A/D 键控制摄像机移动

五、模型动画播放

如果当前模型带有动画则选中最外层的模型后可查看当前模型的动画列表，支持同时播放不同模型的的多个动画

六、 模型导入和导出

目前系统支持（.glb,.obj,.gltf,.fbx,.stl,.usdz）格式的模型导入 。
支持 （.glb,.obj,.gltf,.stl,.usdz）格式的模型导出

七、 场景导入，导出

当你花费大量时间搭建出了一个令你满意的模型场景后，总不希望一不小心将浏览器窗口关闭后整个场景的数据都没有了吧

通过导出场景功能，将当前场景数据导出为 .json格式。 将json文件下载本地下次再使用时在导入进场景中去