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

图片[1]-Three.js+Vue3+Typescript+Element-Plus 开发的 3d 模型可视化编辑系统 - 盘古CG网-盘古CG网

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

star
fork
github-starts
github-fork

📦️ 分支介绍

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

🌐 安装/启动/打包(详见 package.json)

 yarn  / yarn serve  / yarn build(yarn build:pro)

 pnpm install / pnpm serve / pnpm build(pnpm build:pro)

🎨 预览

项目地址

🎵 主要技术栈

名称版本名称版本
Vue3.5.13Axios1.5.0
Vite4.3.xElement-plus2.4.x
Three0.169.xPinia2.1.x
Vue3-Draggable-Resizable1.6.xMitt3.0.x
详见 package.json😁🥰🤗

🌺 开发环境:

名称版本名称版本
node21.3.0npm10.2.4
yarn1.22.21windows10
pnpm9.15.1windows10

🍻 问题/功能

  1. 任何问题 bug 和功能需求欢迎提 issues
  2. 更多功能持续更新中…
  3. 当前项目three.js版本跟随官方版本持续同步,如有版本升级导致bug请提issues

🗃️ 功能模块介绍

模块名称🚀功能简介功能简介功能简介功能简介
背景背景图加载全景图加载外部全景图(hdr,jpeg,png)外部视频(video)
材质材质类型切换材质选中效果材质属性修改(颜色,网格,透明度)材质贴图修改
后期处理模型分解模型材质拖拽,缩放,平移辉光效果(颜色,强度,半径 )
模型灯光环境光编辑平行光编辑点光源编辑聚光灯编辑
模型动画动画播放动画配置修改动画轴旋转(x,y,z)
辅助线/轴配置轴旋转(x,y,z)模型位置修改网格辅助线坐标轴辅助线
几何体模型配置几何体模型选中几何体模型配置修改
3d标签配置标签拖拽加载渲染标签选中标签内容编辑
多模型配置多模型选中效果多模型位置,轴旋转修改多模型大小缩放
左侧操作栏编辑模型场景切换几何体模型添加外部模型加载多模型拖拽
顶部操作栏模型预览模型导出(.glb,obj,usdz)嵌入代码编辑数据保存
模型库模型编辑效果展示模型拖拽添加three.js3d模型在可视化大屏上展示

💥 注意

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

💚 如果觉得该项目对你有帮助留个 star 也是不错的 ⭐

🥰 或者请作者喝杯咖啡吧,这将是我持续更新的动力,相信这肯定比打赏主播更有意义

输入图片说明

🥰又或者该↓项目能满足你的需求,也可联系咨询作者购买vx:answer_2027

3D模型场景编辑器(Vue3/React18): 获取授权

👷 界面

输入图片说明
输入图片说明
输入图片说明
输入图片说明
输入图片说明
输入图片说明
输入图片说明

🍻 相关链接

Three.js:https://threejs.org/
Element-Plus:https://element-plus.gitee.io/zh-CN/
模型下载网站 https://sketchfab.com/feed
贴图素材网站 https://polyhaven.com/
图片格式转换网站 https://onlineconvertfree.com/zh/convert/hdr/
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容