Three.js 场景编辑器 (Vue3 + TypeScript 实现)
Three.js 场景编辑器 (Vue3 + TypeScript 实现)
项目背景
在学习 Three.js 过程中，我发现官方编辑器虽然功能强大，但存在几个问题：
- 源码结构复杂，新人难以理解
- 与主流前端框架(Vue)集成度不高
- 定制和扩展困难
因此我决定开发一个基于 Vue3 + TypeScript 的 Three.js 场景编辑器，保留核心功能的同时，提供更友好的开发体验。
项目技术栈
- Three.js 0.174：3D 渲染核心库
- Vue3：前端框架，提供响应式开发体验
- TypeScript：类型安全的 JavaScript 超集
- Vite：现代前端构建工具
在线演示
项目预览地址：https://threelab.cn/threejs-edit/
核心功能实现
1. 场景管理功能
- 场景对象的可视化添加与管理
- 对象位置/旋转/缩放的实时编辑
- 可见性、阴影等属性控制
- 对象选择与聚焦定位功能
2. 模型与几何体
- 多种基础几何体创建
- 模型导入/导出功能
- 模型动画控制系统
3. 材质与灯光
- 材质属性可视化编辑
- 多种光源类型添加与配置
- 环境光、平行光、点光源等支持
4. 相机与渲染
- 相机参数动态调整
- 第一人称视角控制
- 渲染器设置调整
- 环境效果(天气、地面等)配置
5. 场景操作
- 场景保存/加载功能
- 对象复制/删除操作
- 场景状态预览
项目优势
- 更友好的代码结构：相比官方编辑器更易理解和扩展
- Vue3 生态集成：适合 Vue 技术栈开发者快速上手
- 类型安全：TypeScript 提供更好的开发体验
- 模块化设计：功能组件可单独使用或扩展
开发目标
该项目旨在为 Three.js 学习者提供一个更易理解、更易集成的场景编辑器参考实现，同时也可作为实际项目中的 3D 编辑工具使用。
一、几何模型和模型导入，场景新建按钮增加
丰富的菜单管理
二、提供场景内容的可视化编辑功能
支持以下操作：
位置、大小、缩放调整：通过鼠标操作或输入框进行修改。
可见性、阴影设置：开关控制。
材质编辑：根据材质类型，显示可编辑内容。
贴图上传：支持本地上传 .jpg、.png、.hdr 格式。
三、渲染器场景，地面，天气等动态修改
支持动态修改渲染器配置、场景设置、地面类型及天气效果，可灵活适配多种用户场景，满足不同需求，提升应用的通用性和用户体验。
四、第一人称和第三人称切换
可以支持第一人称和第三人称相互切换，第一人称角度 通过W/S/A/D 键控制摄像机移动
五、支持模型导入和动画模型播放
当用户选中最外层的模型时，若该模型包含动画，系统将自动展示其动画列表。用户可以从中选择并播放任意动画，同时支持多个模型的多个动画同时播放，实现复杂的动画组合效果，满足多样化的动画展示需求，提升创作灵活性和效率。
六、 支持模型导入和导出
目前系统支持多种主流三维模型格式的导入与导出。导入支持 .glb、.obj、.gltf、.fbx、.stl、.usdz 格式，满足不同来源模型的加载需求。导出支持 .glb、.obj、.gltf、.stl、.usdz 格式，方便用户将编辑后的模型以多种格式输出，适配更多应用场景。
七、 场景导入，导出
当你花费大量时间搭建出一个满意的模型场景后，肯定不希望因为不小心关闭浏览器窗口而丢失所有数据。为了避免这种情况，系统提供了一个实用的解决方案：导出场景功能。你可以将当前场景的所有数据导出为 .json 格式，并将其下载到本地。下次使用时，只需将这个 .json 文件导入，就能快速恢复整个场景，包括模型的位置、大小、材质、动画等所有设置，让你的创作成果得以安全保存，随时可以继续编辑和调整。
继续迭代更新
“没想到编辑器功能的热度能冲上全网TOP7！用户的热情彻底点燃了我的开发动力。在收集反馈后，终于发现阻碍创作效率的终极痛点——操作链路断裂：调参数→等渲染→再调整的死循环该终结了！本次更新带来革命性的拖拽式工作流，并附赠开箱即用的模型资源库。”
萌生了拖动搭建的想法，增加了拖动功能。但是模型怎么办，不是threejs引擎自带的几何体或者模型，需要加载外部模型，于是做了几个实例模型的预设，从其他网站找了几个模型作为预处理
更新内容：
1.拖动模型
2.拖动几何体
3.拖动灯光
4.左侧展开显示
