# Vue-Three-Composer

**Repository Path**: feng62/Vue-Three-Composer

## Basic Information

- **Project Name**: Vue-Three-Composer
- **Description**: 一个three就是编辑器，可以放在项目中调用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-04
- **Last Updated**: 2026-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Three Composer

**Vue Three Composer** 是一个基于 **Vue 3** 和 **Three.js** 的高性能 3D 场景构建工具包。

本项目旨在通过声明式的 Vue 组件和组合式函数（Composables），简化 Three.js 的开发流程，使开发者能够用构建 Vue 应用的方式来构建复杂的 3D 交互场景。

## 🚀 项目简介

这是一个采用 Monorepo 架构管理的仓库，包含核心库和一个功能完整的 3D 场景编辑器示例。它不仅仅是一个渲染库，更提供了一套完整的 3D 状态管理和交互解决方案。

### 核心亮点

*   **声明式编程**: 使用 `<Mesh>`, `<Camera>`, `<Light>` 等 Vue 组件构建 3D 场景，告别繁琐的命令式代码。
*   **类型安全**: 完全使用 TypeScript 编写，提供优秀的类型推断和开发体验。
*   **高性能**: 基于 Vite 构建，利用 Vue 3 的响应式系统高效管理 3D 状态。
*   **功能丰富**: 内置对 **GSAP** 动画、**Pinia** 状态管理和 **Draggable** 拖拽交互的支持。
*   **模块化设计**: 核心逻辑与 UI 分离，易于扩展和维护。

## 📂 项目结构

本项目使用 `pnpm` workspaces 管理：

| 目录 | 包名 | 说明 |
| :--- | :--- | :--- |
| **`packages/vue-three-composer`** | `@vtc/vue-three-composer` | **核心库**。封装了 Three.js 的 Vue 组件、Hooks 和工具函数。 |
| **`apps/test`** | `3d-scene-editor` | **演示应用 (3D 编辑器)**。一个基于核心库构建的 3D 场景编辑器，展示了对象操作、场景管理等功能。 |
| **`apps/docs`** | - | 项目文档（开发中）。 |

## 🛠 技术栈

*   **Core**: [Vue 3](https://vuejs.org/), [TypeScript](https://www.typescriptlang.org/)
*   **3D Engine**: [Three.js](https://threejs.org/)
*   **Build Tool**: [Vite](https://vitejs.dev/)
*   **State Management**: [Pinia](https://pinia.vuejs.org/)
*   **Animation**: [GSAP](https://greensock.com/gsap/)
*   **Interaction**: [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)

## ⚡️ 快速开始

### 前置要求
请确保本地已安装 [Node.js](https://nodejs.org/) 和 [pnpm](https://pnpm.io/)。

### 1. 安装依赖

在根目录下运行：

```bash
pnpm install
```

### 2. 启动开发环境

启动 **3D 场景编辑器** (位于 `apps/test`) 进行预览和调试：

```bash
pnpm dev:test
```

该命令会启动 Vite 服务器，通常访问 `http://localhost:5173` 即可看到编辑器界面。

### 3. 构建库文件

如果需要打包核心库：

```bash
pnpm build:libs
```

## 🤝 贡献

欢迎提交 Issue 或 Pull Request 来改进这个项目！