# three-scene-editor

**Repository Path**: yejinyun/three-scene-editor

## Basic Information

- **Project Name**: three-scene-editor
- **Description**: 一个基于Three.js和Vue 3的3D场景编辑器，根据模型直观构建的3D场景、编辑和管理功能。可与低代码平台结合
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-09-03
- **Last Updated**: 2025-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Threejs, 3d, Vue, TypeScript

## README

# Three.js 3D场景编辑器

一个基于Three.js和Vue 3的现代化3D场景编辑器，提供直观的3D场景构建、编辑和管理功能。

由于公司项目研发周期较短，我们曾尝试在网上寻找可二次开发的现成方案，但相关开源项目数量较少且难以完全满足需求。因此本项目提供可复用的示例与实践参考，便于在此基础上按需裁剪、扩展与二次开发。


## ✨ 功能特性

- 🎨 **3D场景编辑** - 支持3D模型的导入、编辑和场景构建
- 🌳 **场景树管理** - 层级化的场景对象管理
- 🎭 **材质系统** - 完整的材质编辑和配置功能
<!-- - 🎬 **动画控制** - 支持关键帧动画和动画时间轴 -->
- 📊 **数据源集成** - 支持外部数据源的动态绑定
- 🚶 **漫游配置** - 自定义相机路径和漫游体验
- 🎯 **属性面板** - 详细的3D对象属性编辑
- 📱 **响应式设计** - 支持多种屏幕尺寸和设备

## 🚀 技术栈

- **前端框架**: Vue 3 + TypeScript
- **3D引擎**: Three.js
- **UI组件**: Element Plus
- **状态管理**: Pinia
- **构建工具**: Vite
- **样式预处理**: SCSS
- **动画库**: Tween.js

## 📦 安装和运行

### 环境要求
- Node.js >= 16.0.0
- pnpm (推荐) 或 npm

### 安装依赖
```bash
# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install
```

### 开发模式
```bash
pnpm dev
```

### 构建生产版本
```bash
pnpm build
```

### 预览构建结果
```bash
pnpm preview
```

## 🏗️ 项目结构

```
src/
├── components/          # 组件目录
│   ├── AnimationPanel/  # 动画面板
│   ├── DataSource/      # 数据源管理
│   ├── Material/        # 材质编辑器
│   ├── ObjectPropertyPanel/ # 对象属性面板
│   ├── ProjectConfigPanel/  # 项目配置面板
│   ├── SceneTree/       # 场景树组件
│   ├── SceneView/       # 3D场景视图
│   ├── SideBar/         # 侧边栏
│   ├── TopBar/          # 顶部导航栏
│   └── WanderConfigPanel/ # 漫游配置面板
├── constants/           # 常量定义
├── store/               # 状态管理
├── types/               # 类型定义
├── utils/               # 工具函数
│   ├── BaseThreeScene.ts    # 基础3D场景类
│   ├── threejsScene.ts      # 3D场景实现
│   └── threeVRScene.ts      # VR场景实现
└── views/               # 页面视图
    ├── edit.vue         # 编辑器页面
    └── preview.vue      # 预览页面
```

## 🎮 主要功能模块

### 场景编辑器
- 3D场景的实时渲染和编辑
- 支持GLB/GLTF模型导入
- 场景对象的添加、删除、变换
- 相机控制和视角调整

### 材质系统
- 材质属性编辑
- 纹理贴图管理
- 材质预览和实时更新

<!-- ### 动画系统
- 关键帧动画编辑
- 动画时间轴控制
- 动画曲线编辑 -->

### 数据源管理
- 外部数据源配置
- 动态数据绑定
- 实时数据更新

### 漫游配置
- 相机路径设置
- 漫游点编辑
- 漫游体验配置


## 🙏 致谢

- [Three.js](https://threejs.org/) - 强大的3D图形库
- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
- [Element Plus](https://element-plus.org/) - Vue 3组件库

## 📞 联系方式

如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件
- 参与讨论

---

⭐ 如果这个项目对你有帮助，请给我们一个星标！