Three.js 场景编辑器 (Vue3 + TypeScript 实现)

Three.js 场景编辑器 (Vue3 + TypeScript 实现)

项目背景

在学习 Three.js 过程中，我发现官方编辑器虽然功能强大，但存在几个问题：

1. 源码结构复杂，新人难以理解
2. 与主流前端框架(Vue)集成度不高
3. 定制和扩展困难

因此我决定开发一个基于 Vue3 + TypeScript 的 Three.js 场景编辑器，保留核心功能的同时，提供更友好的开发体验。

项目技术栈

• Three.js 0.174：3D 渲染核心库
• Vue3：前端框架，提供响应式开发体验
• TypeScript：类型安全的 JavaScript 超集
• Vite：现代前端构建工具

在线演示

项目预览地址：https://threelab.cn/threejs-edit/

核心功能实现

1. 场景管理功能

• 场景对象的可视化添加与管理
• 对象位置/旋转/缩放的实时编辑
• 可见性、阴影等属性控制
• 对象选择与聚焦定位功能

2. 模型与几何体

• 多种基础几何体创建
• 模型导入/导出功能
• 模型动画控制系统

3. 材质与灯光

• 材质属性可视化编辑
• 多种光源类型添加与配置
• 环境光、平行光、点光源等支持

4. 相机与渲染

• 相机参数动态调整
• 第一人称视角控制
• 渲染器设置调整
• 环境效果(天气、地面等)配置

5. 场景操作

• 场景保存/加载功能
• 对象复制/删除操作
• 场景状态预览

项目优势

1. 更友好的代码结构：相比官方编辑器更易理解和扩展
2. Vue3 生态集成：适合 Vue 技术栈开发者快速上手
3. 类型安全：TypeScript 提供更好的开发体验
4. 模块化设计：功能组件可单独使用或扩展

开发目标

该项目旨在为 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.左侧展开显示