IamHere

3D文件树界面程序

一个交互式的3D文件树可视化工具，允许用户输入文件夹路径并以3D形式浏览文件结构。

功能特性

• 文件夹路径输入：用户可以通过界面输入任意文件夹路径
• 3D文件树可视化：将文件夹结构以3D树状图形式展示
• 交互式浏览：支持旋转、缩放、平移等3D交互操作
• 文件类型识别：不同文件类型使用不同颜色和图标区分
• 实时更新：当文件夹内容变化时，树状图自动更新

技术栈

• 前端框架：Vue.js 3 + TypeScript
• 3D图形库：Three.js
• 后端框架：Django + Django REST Framework (DRF)
• 数据库：SQLite (开发) / PostgreSQL (生产)
• 样式框架：Element Plus 或 Vuetify
• 构建工具：Vite

项目结构

IamHere/
├── backend/                 # Django后端
│   ├── filetree_api/       # Django应用
│   │   ├── migrations/
│   │   ├── models.py       # 数据模型
│   │   ├── serializers.py  # DRF序列化器
│   │   ├── views.py        # API视图
│   │   └── urls.py         # 路由配置
│   ├── config/             # Django配置
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── manage.py
│   └── requirements.txt
├── frontend/               # Vue.js前端
│   ├── src/
│   │   ├── components/     # Vue组件
│   │   │   ├── FileTree3D/ # 3D文件树组件
│   │   │   ├── PathInput/  # 路径输入组件
│   │   │   └── Controls/   # 控制面板组件
│   │   ├── utils/
│   │   │   ├── api.js      # API调用工具
│   │   │   └── treeBuilder.js # 树状结构构建工具
│   │   ├── App.vue         # 主应用组件
│   │   └── main.js         # 入口文件
│   ├── public/
│   ├── package.json
│   └── vite.config.js
├── docs/                   # 文档
└── README.md

安装与运行

前提条件

• Python 3.8 或更高版本
• Node.js 16 或更高版本
• pip 和 npm

后端安装步骤

1. 进入后端目录

   cd backend
   

2. 创建虚拟环境并激活

   python -m venv venv
   # Windows
   venv\Scripts\activate
   # Linux/Mac
   source venv/bin/activate
   

3. 安装依赖

   pip install -r requirements.txt
   

4. 运行数据库迁移

   python manage.py migrate
   

5. 启动Django开发服务器

   python manage.py runserver
   

前端安装步骤

1. 进入前端目录

   cd frontend
   

2. 安装依赖

   npm install
   

3. 启动开发服务器

   npm run dev
   

4. 打开浏览器访问 http://localhost:5173

使用说明

基本操作

1. 输入文件夹路径：在界面顶部的输入框中输入要浏览的文件夹完整路径
2. 加载文件树：点击"加载"按钮或按Enter键生成3D文件树
3. 3D交互控制：
   • 鼠标左键拖动：旋转视角
   • 鼠标滚轮：缩放视图
   • 鼠标右键拖动：平移视图
4. 节点交互：点击文件节点查看详细信息

文件类型标识

• 📁 文件夹：蓝色立方体
• 📄 文本文件：绿色文档图标
• 🖼️ 图片文件：黄色图片图标
• 📊 数据文件：紫色表格图标
• ⚙️ 可执行文件：红色齿轮图标
• 🔧 配置文件：灰色工具图标

开发计划

第一阶段：基础功能

• 创建基本的React应用结构
• 实现文件夹路径输入界面
• 集成Three.js基础3D场景
• 实现简单的文件树数据结构

第二阶段：3D可视化

• 开发3D文件树渲染组件
• 实现交互控制（旋转、缩放、平移）
• 添加文件类型图标系统
• 优化3D性能和大文件树处理

第三阶段：增强功能

• 添加文件搜索功能
• 实现文件操作（重命名、删除等）
• 添加主题切换
• 支持多语言界面

贡献指南

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

开发环境设置

1. Fork 项目仓库
2. 克隆你的fork到本地
3. 创建功能分支：git checkout -b feature/新功能
4. 提交更改：git commit -am '添加新功能'
5. 推送到分支：git push origin feature/新功能
6. 创建Pull Request

代码规范

• 使用ES6+语法
• 遵循项目现有的代码风格
• 添加适当的注释
• 确保代码通过ESLint检查

许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

联系方式

如有问题或建议，请通过以下方式联系：

• 提交GitHub Issue
• 发送邮件至：your-email@example.com

更新日志

v1.0.0 (计划中)

• 初始版本发布
• 基础3D文件树功能
• 文件夹路径输入界面
• 基本的交互控制