# threejs 3d模型可视化编辑器

**Repository Path**: tmgb/Three.js3D

## Basic Information

- **Project Name**: threejs 3d模型可视化编辑器
- **Description**: three.js开发的3D模型可视化编辑器
包含模型加载，模型文件导入导出，模型背景图，全景图，模型动画，模型灯光，模型定位，辅助线，模型辉光，模型拖拽，模型拆解，
模型材质等可视化操作编辑系统，模型编辑数据保存预览和代码嵌入
前端技术:Vue3+Typescript+Pinia+Threejs
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 393
- **Created**: 2024-03-06
- **Last Updated**: 2024-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



### 🌱 基于Three.js+Vue3+Typescript+Element-Plus开发的3d模型可视化编辑系统

<a href='https://gitee.com/ZHANG_6666/Three.js3D/stargazers'><img src='https://gitee.com/ZHANG_6666/Three.js3D/badge/star.svg?theme=dark' alt='star'></img></a> <a href='https://gitee.com/ZHANG_6666/Three.js3D/members'><img src='https://gitee.com/ZHANG_6666/Three.js3D/badge/fork.svg?theme=dark' alt='fork'></img></a>

### 📦️ 分支介绍
1. master: `Vue3+Pinia+Javascript` (最新的功能issues和修复的bug都在这个分支)
2. ts-master: `Vue3+Pinia+Typescript` (master分支的typescript版本)
3. develop: `Vue3+Pinia+Javascript` (一些不确定的功能和代码重构会在这个分支开发)
4. gh-pages: `git-pages 线上包分支` (忽略即可)

### 🌐 安装/启动/打包
```
 yarn  / yarn serve  / yarn build

```
### 🎨 预览
- 1.注意:部分模型文件较大,首次加载需要等待较长时间
- 2.线上访问:[https://zhang_6666.gitee.io/three.js3d](https://zhang_6666.gitee.io/three.js3d)

### 🎵 主要技术栈
| 名称                | 版本  | 名称        | 版本   |
| ------------------- | ----- | ----------- | ------ |
| Vue                 | 3.2.x | Axios | 1.5.0  |
| Vite                | 4.3.x | Element-plus | 2.4.x |
| Three               | 0.160.x | Pinia       | 2.1.x  |
| Vue3-Draggable-Resizable| 1.6.x | Mitt     | 3.0.x |
| 详见 `package.json` | 😁    | 🥰         | 🤗    |

### 🌺 开发环境:

| 名称 | 版本    | 名称    | 版本  |
| ---- | ------- | ------- | ----- |
| node | 18.19.0| npm     | 10.2.3 |
| yarn | 1.22.21  | windows | 10    |

###	🍻 问题/功能
1. 任何问题bug和功能需求欢迎提issues
2. 更多功能持续更新中...


###	🗃️ 功能简介
- 1.📌背景:背景图,背景颜色,全景图的可视化编辑,外部全景图资源加载
- 2.🚀动画:模型自带动画的播放功能,动画播放速度,动作幅度,循环方式的可视化编辑
- 3.🔥属性:模型轴旋转,模型位置,模型骨架,模型坐标轴的可视化编辑
- 4.🎉灯光:环境光,点光源,聚光灯,半球光的可视化编辑
- 5.📦️材质:模型材质贴图修改,材质类型修改,材质颜色,透明度,网格的可视化编辑,外部材质资源加载
- 6.✨后期:模型辉光效果,场景色调,模型拆解,模型材质拖拽、缩放、旋转的可视化编辑
- 7.⚡️模型导入编辑功能 `（.glb, .obj, .gltf, .fbx, .stl)`格式
- 8.🌼模型编辑效果预览
- 9.🍻支持模型编辑的数据保存，支持多个3d模型组件拖拽配置和编辑效果预览
- 10.🔥 支持模型加载进度条显示,模型封面下载，模型文件导出（.glb,.gltf）
- 11.👷 支持几何体模型拖拽添加，删除和数据配置可视化编辑
- 12.👷 支持模型编辑效果嵌入外部项目代码功能

### 💥 注意

1. 部分功能的使用对电脑的内存依赖较高，如有卡顿等场景请确保有足够的内存使用空间
2. 建议使用谷歌浏览器`（chrome）`
3. 模型数据编辑配置存储在`localStorage`如有数据相关报错清除本地数据缓存重新进入即可
4. 外部模型不支持效果预览，和数据保存
5. 3d模型对性能依赖较高,模型库组件配置过`(>4)`,可能导致浏览器崩溃
6. 部分特殊模型文件和大模型文件加载可能会导致系统卡顿很长时间,如遇到这种情况`（欢迎提issues）`

### 💚 如果觉得该项目对你有帮助留个star也是不错的⭐
### 🥰 或者请作者喝杯咖啡吧,这将是我持续更新的动力,相信这肯定比打赏主播更有意义
![输入图片说明](public/image/code.jpg)

### 👷 界面
![输入图片说明](public/image/7.png)
![输入图片说明](public/image/2.png)
![输入图片说明](public/image/3.png)
![输入图片说明](public/image/4.png)
![输入图片说明](public/image/6.png)

### 🍻 相关链接

###### Three.js:[https://threejs.org/](https://threejs.org/)
###### Element-Plus:[https://element-plus.gitee.io/zh-CN/](https://element-plus.gitee.io/zh-CN/)
###### 模型下载网站 [https://sketchfab.com/feed](https://sketchfab.com/feed)
###### 贴图素材网站 [https://polyhaven.com/](https://polyhaven.com/)
###### 图片格式转换网站 [https://onlineconvertfree.com/zh/convert/hdr/](https://onlineconvertfree.com/zh/convert/hdr/)