# WitCreateYour3DCover

**Repository Path**: WitOpenSource/wit-create-your-3D-cover

## Basic Information

- **Project Name**: WitCreateYour3DCover
- **Description**: 一个基于Vue.js和Three.js的交互式3D书籍封面在线生成工具，支持自定义书名、作者名、书籍尺寸、封面图片和背景等参数，帮助用户快速创建逼真的3D书籍展示效果。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WitCreateYour3DCover

一个基于Vue.js和Three.js的交互式3D书籍封面在线生成工具，支持自定义书籍参数、封面图片、背景设置，并提供高质量的3D渲染效果和灵活的下载选项。

## ✨ 功能特点

- 📚 **完全自定义** - 支持设置书名、作者名、书籍尺寸等多种参数
- 🎨 **丰富样式** - 可上传封面图片，自定义背景颜色或使用透明背景
- 🖼️ **高清输出** - 支持多种分辨率选择，可下载高质量的3D封面图片
- 📱 **响应式设计** - 适配不同屏幕尺寸，提供流畅的交互体验
- 🔄 **实时预览** - 参数调整后立即显示3D效果
- 🖱️ **交互控制** - 支持拖拽旋转查看书籍不同角度
- 🚀 **轻量高效** - 优化的渲染性能，确保流畅体验

## 🛠️ 技术栈

- **前端框架**：Vue.js 3
- **3D渲染**：Three.js
- **构建工具**：Vite
- **编程语言**：TypeScript
- **样式处理**：原生CSS

## 📋 快速开始

### 环境要求

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

### 安装依赖

```bash
# 克隆项目
git clone https://gitee.com/WitOpenSource/wit-create-your-3D-cover.git

# 进入项目目录
cd wit-create-your-3D-cover

# 安装依赖
npm install
```

### 开发运行

```bash
npm run dev
```

项目将在 [http://localhost:5173](http://localhost:5173) 启动开发服务器。

### 构建部署

```bash
npm run build
```

构建后的文件将生成在 `dist` 目录中，可以部署到任何静态文件服务器。

## 📖 使用说明

1. **启动应用**：访问部署的应用URL或开发服务器地址
2. **设置参数**：在控制面板中调整以下参数：
   - **封面图片**：上传自定义封面图片
   - **书籍宽度/高度**：通过滑块调整书籍的尺寸
   - **书名/作者名**：输入书籍名称和作者姓名
   - **书名大小/作者名大小**：调整文字显示大小
   - **背景颜色**：选择或输入背景颜色
   - **透明背景**：可选择启用透明背景选项
3. **下载设置**：
   - **下载分辨率**：在下载前选择所需的分辨率（1x、2x、3x）
   - 分辨率越高，生成的图片质量越好，但文件大小也会相应增加
4. **查看效果**：3D视图将实时显示效果，可通过鼠标拖拽旋转查看不同角度
5. **重置参数**：点击"重置参数"按钮恢复默认设置
6. **下载图片**：点击"下载图片"按钮保存当前3D封面效果

## 🎯 核心功能详解

### 3D渲染系统

项目使用Three.js实现高质量的3D渲染，包括：
- 书籍模型的创建和纹理映射
- 光照系统配置，模拟真实环境光照
- 相机控制，支持轨道控制和视角调整
- 性能优化，确保在不同设备上流畅运行

### 书脊文字处理

特别优化的书脊文字渲染算法，解决了小尺寸文字变形问题：
- 动态Canvas尺寸计算，确保文字清晰度
- 自适应字体大小，根据书脊尺寸调整
- 文字换行和排版优化
- 纹理映射优化，防止拉伸变形

### 多分辨率输出系统

支持多种分辨率选项的图片下载功能：
- 1x分辨率：适用于普通网页显示
- 2x分辨率：适用于高清显示和打印预览
- 3x分辨率：适用于高质量打印和专业用途
- 智能文件名生成，包含分辨率信息以便区分

### 透明背景支持

用户可以选择启用透明背景选项，方便将3D封面集成到其他设计作品中。

## 🤝 贡献指南

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件
为适应现代化需求，我们还开发了APP增强版本，详见[APP增强版本](https://gitee.com/WitOpenSource/wit-create-your-3dcover-app)，APP增强版本新增自适应移动端，美化界面和调整初始化参数，让界面看起来更美观。

## ✉️ 作者联系信息

- **微信公众号**：sharecho
- **企鹅号**：1346363063
- **邮箱**：1346363063@qq.com