快速上手

欢迎使用 IOI 3D Editor！本文档将帮助您了解项目结构、完成安装配置，并快速启动开发环境。

📖 项目简介

IOI 3D Editor 是一个基于 Vue 3 和 Babylon.js 构建的开源三维可视化编辑器。它旨在为数字孪生、工业可视化和 3D 场景编辑提供一套轻量、高效的解决方案。

核心能力：

• 🎨 所见即所得：直观的 3D 场景编辑与拖拽式操作。
• 🔧 工程化架构：模块化的核心设计 (src/core)，分离渲染引擎与业务逻辑。
• 🚀 完整前后端：提供基于 Node.js 的轻量级后端服务，支持场景保存与模型上传。

---

🛠️ 安装与运行

环境要求

• Node.js: v16.0 或更高版本
• npm: v7.0 或更高版本

1. 获取代码

git clone https://gitee.com/laozhanggitee/ioi_babylon_editor.git
cd ioi_babylon_editor

2. 安装依赖

项目包含前端编辑器和后端服务，建议分别安装。

# 安装前端依赖
npm install

# 安装后端服务依赖
cd service
npm install
cd ..

3. 启动开发环境

我们需要同时启动前端编辑器和后端 API 服务。

# 终端 1: 启动后端服务 (运行在 3000 端口)
node service/index.js

# 终端 2: 启动前端开发服务器 (运行在 5173 端口)
npm run dev

启动成功后，访问 http://localhost:5173 即可进入编辑器。

---

📂 项目结构

.
├── src/                    # 前端源代码
│   ├── core/               # 核心引擎逻辑 (Babylon.js 封装)
│   │   ├── BabylonCore.ts  # 引擎初始化与渲染循环
│   │   ├── EditorCore.ts   # 编辑器交互逻辑 (Gizmo, 选中)
│   │   └── ...
│   ├── components/         # Vue UI 组件
│   │   ├── Canvas3D.vue    # 3D 画布容器
│   │   ├── PropertyPanel.vue # 右侧属性面板
│   │   └── ...
│   ├── stores/             # Pinia 状态管理
│   └── views/              # 路由页面 (Editor, Preview)

---

📦 构建与部署

构建前端

npm run build

构建产物将生成在 dist 目录下。

部署建议

1. 静态托管: 将 dist 目录部署到 Nginx、Vercel 或 Netlify。
2. API 服务: 将 service 目录部署到 Node.js 环境（如 PM2 托管）。
3. 反向代理: 配置 Nginx 将 /api 请求转发至后端服务端口（默认 3000）。

---

下一步

• 阅读 编辑器使用手册 熟悉界面操作。
• 了解 核心特性 探索更多功能。