# IOIBabylonEditor

**Repository Path**: laozhanggitee/ioi_babylon_editor

## Basic Information

- **Project Name**: IOIBabylonEditor
- **Description**: 这是一个基于 Vue 3 + Babylon.js 的 免费开源三维引擎及可视化编辑器，面向 Web 端三维应用、数字孪生与实时交互场景。
项目在 Babylon.js 实时渲染能力的基础上，构建了统一的三维编辑、运行与扩展体系，内置 动画系统、World UI 三维面板系统，并提供 插件化架构 以支持功能扩展与二次开发。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://editor.ioimeta.com/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-09
- **Last Updated**: 2026-02-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# IOI 3D Editor

基于 Vue 3 + TypeScript + Babylon.js 开发的 3D 数字孪生编辑器与可视化平台。

## 简介

IOI 3D Editor 是一个功能强大的 Web 端 3D 场景编辑器，支持 3D 场景的构建、编辑以及大屏可视化预览。项目采用现代化的前端技术栈，结合 Babylon.js 强大的渲染能力，为用户提供流畅的 3D 编辑体验。

👉 **查看文档**: [https://editor-doc.ioimeta.com/](https://editor-doc.ioimeta.com/)


## 加入社区

通过以下方式获取最新动态和技术支持：qq群 1079951312

![编辑器界面](src/assets/images/3d.png)

## 核心功能

- **3D 场景编辑**：支持模型的加载、拖拽、变换（平移、旋转、缩放）。
- **资产管理**：内置资产库，支持模型预览与管理。
- **属性配置**：实时编辑选中对象的属性。
- **预览模式**：支持场景的实时预览，集成数据可视化仪表盘（ECharts）。

![预览模式](src/assets/images/preview.png)

- **版本管理**：支持本地草稿保存与加载（及预留的后端版本接口）。
- **交互控制**：支持主世界视角与跟随组件视角的切换。

## 技术栈

- **核心框架**: [Vue 3](https://vuejs.org/)
- **构建工具**: [Vite](https://vitejs.dev/)
- **语言**: [TypeScript](https://www.typescriptlang.org/)
- **3D 引擎**: [Babylon.js](https://www.babylonjs.com/)
- **UI 组件库**: [Element Plus](https://element-plus.org/)
- **状态管理**: [Pinia](https://pinia.vuejs.org/)
- **路由管理**: [Vue Router](https://router.vuejs.org/)
- **图表库**: [ECharts](https://echarts.apache.org/)

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

启动后访问: `http://localhost:5173` (或终端显示的端口)

### 项目打包

```bash
npm run build
```

构建产物将输出到 `dist` 目录。

### 本地预览打包产物

```bash
npm run preview
```

## 目录结构

```
src/
├── assets/          # 静态资源 (图片, 模型)
├── components/      # 公共组件 (资产库, 属性面板, 顶部栏等)
├── core/            # 3D 核心逻辑 (Babylon.js 封装)
├── router/          # 路由配置
├── services/        # 业务服务 (场景服务, 数据模拟)
├── stores/          # Pinia 状态管理
├── types/           # TypeScript 类型定义
├── views/           # 页面视图 (编辑器, 预览页)
└── main.ts          # 入口文件
```


## 许可协议

本项目采用 Apache License 开源协议，使用时请遵守协议条款及以下补充条款：

✅ 允许：个人学习/二次开发
⚠️ 需要版权声明
⚠️ 商业用途需要授权