# Vue3_Threejs_Editor **Repository Path**: web86/vue3_threejs_editor ## Basic Information - **Project Name**: Vue3_Threejs_Editor - **Description**: 基于 Three.js + Vue3 + Typescript + Element-Plus + Tailwind CSS + Pinia 开发的 3d 模型可视化编辑系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2024-11-07 - **Last Updated**: 2025-07-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### 🎉 项目介绍 ##### 1. 项目名：Vue3_Threejs_Editor ##### 2. 项目描述：基于 Three.js + Vue3 + Typescript + Element-Plus + Tailwind CSS + Pinia 开发的 3d 模型可视化编辑系统 ##### 3. 项目情况：该项目为个人学习项目，仅为前端项目，目前已经完成了基本的功能开发，后续会持续更新功能和优化代码 ### 📦️ 分支介绍 ##### 1. master: (最新的功能 issues 和修复的 bug 都在这个分支) ### 🚀 项目启动 ##### 1. 安装 npm install / yarn / npm i ##### 2. 启动 npm run dev / yarn run dev (详见 package.json) ##### 3. 打包 npm run build / yarn run build (详见 package.json) ### 🎵 主要技术栈 | 名称 | 版本 | 名称 | 版本 | |--------------------------|---------|--------------|-------| | Vue | 3.5.x | Axios | 1.7.7 | | Vite | 5.4.x | Element-plus | 2.8.x | | Three | 0.167.x | Pinia | 2.2.x | | Vue3-Draggable-Resizable | 1.6.x | Mitt | 3.0.x | | 详见 `package.json` | 😁 | 🥰 | 🤗 | ##### 注：1.项目使用了 Tailwind CSS 作为主要的样式框架，如有不适应的地方请自行修改 ##### 2.Element-plus为完整引入，如需按需引入请自行配置（按需引入参考网址：https://element-plus-docs.bklab.cn/zh-CN/guide/quickstart.html ） ### 🌺 开发环境: | 名称 | 版本 | 名称 | 版本 | | ---- |---------| ------- |--------| | node | 20.11.1 | npm | 10.2.4 | | yarn | 1.22.22 | windows | 11 | ### 🥰 项目地址 ##### gitee:[https://gitee.com/web86/vue3_threejs_editor](https://gitee.com/web86/vue3_threejs_editor) ### 🍻 问题/功能 ##### 1. 任何问题 bug 和功能需求欢迎提 issues ##### 2. 更多功能持续更新中... ### 💥 注意 ##### 1. 部分功能的使用对电脑的内存依赖较高，如有卡顿等场景请确保有足够的内存使用空间 ##### 2. 建议使用谷歌浏览器`（chrome）` ##### 3. 模型数据编辑配置存储在`localStorage`如有数据相关报错清除本地数据缓存重新进入即可 ##### 4. 外部模型不支持效果预览，和数据保存 ##### 5. 3d 模型对性能依赖较高,模型库组件配置过`(>4)`,可能导致浏览器崩溃 ##### 6. 部分特殊模型文件和大模型文件加载可能会导致系统卡顿很长时间,如遇到这种情况`（欢迎提issues）` ### 🗃️ 功能模块介绍 | 模块名称🚀 | 功能简介 | 功能简介 | 功能简介 | 功能简介 | | -------------- | ---------------- | ------------------------- |---------------------------| ----------------- | | 背景 | 背景图加载 | 全景图加载 | 外部全景图（hdr,jpeg,png） | 外部视频（video） | | 材质 | 材质类型切换 | 材质选中效果 | 材质属性修改（颜色，网格，透明度） | 材质贴图修改 | | 后期处理 | 模型分解 | 模型材质拖拽，缩放，平移 | 辉光效果（颜色，强度，半径 ） | | | 模型灯光 | 环境光编辑 | 平行光编辑 | 点光源编辑 | 聚光灯编辑 | | 模型动画 | 动画播放 | 动画配置修改 | 动画轴旋转（x,y,z） | | | 辅助线/轴配置 | 轴旋转（x,y,z） | 模型位置修改 | 网格辅助线 | 坐标轴辅助线 | | 几何体模型配置 | 几何体模型选中 | 几何体模型配置修改 | | | | 3d标签配置 | 标签拖拽加载渲染 | 标签选中 | 标签内容编辑 | | | 多模型配置 | 多模型选中效果 | 多模型位置,轴旋转修改 | 多模型大小缩放 | | | 左侧操作栏 | 编辑模型场景切换 | 几何体模型添加 | 外部模型加载 | 多模型拖拽 | | 顶部操作栏 | 模型预览 | 模型导出（.glb,obj,usdz） | 嵌入代码 | 编辑数据保存 | | 模型库 | 模型编辑效果展示 | 模型拖拽添加 | three.js3d模型在可视化大屏上展示 | | ### 💚 如果觉得该项目对你有帮助留个 star 也是不错的 ⭐ ### 🥰 或者请作者喝杯咖啡吧,这将是我持续更新的动力,相信这肯定比打赏主播更有意义 ![输入图片说明](public/image/vxpay.jpg) ### 🎉 个人微信：pengqi19991114(欢迎加微信交流学习) ### 🎉 个人博客：https://blog.csdn.net/Miller777_?spm= ### 👷 界面 ![输入图片说明](public/image/1.png) ![输入图片说明](public/image/2.png) ![输入图片说明](public/image/3.png) ![输入图片说明](public/image/4.png) ![输入图片说明](public/image/6.png) ![输入图片说明](public/image/7.png) ![输入图片说明](public/image/8.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/)