island 的项目扩展与二次开发

1. 项目的基础介绍

island 是一个基于 Three.js 的 2.5D 像素风格交互式个人简历网站。该项目通过游戏化的方式展示个人信息、项目经历和技能，旨在为用户提供一个有趣且实用的交互体验。项目优先考虑了移动端的优化，确保在多种设备上都能提供流畅的体验。

2. 项目的核心功能

• 2.5D 像素风场景：提供了独特的像素化 3D 场景，为用户带来沉浸式的视觉体验。
• 角色模型与移动：用户可以控制一个像素风格的虚拟角色在场景中自由移动。
• 对话框交互：接近特定的物体或 NPC 时，会自动弹出对话框，展示个人信息或项目介绍。
• 收集元素系统：场景中分布着代表技能或项目的可收集物品，用户可以收集并在 UI 中查看。
• 成就系统：通过设定成就目标，用户可以在达成后获得徽章或称号，增加互动乐趣。
• 日夜切换：支持一键切换场景的白天和夜晚效果，增强视觉体验。
• 响应式设计：确保网站能够适应不同设备的屏幕尺寸，特别是优化了触摸操作和加载速度。

3. 项目使用了哪些框架或库？

island 项目使用了以下框架或库：

• Three.js：用于 3D 场景的渲染。
• Vite：作为前端构建工具，提高开发效率。
• TailwindCSS：原子化的 CSS 框架，帮助快速构建界面。
• SASS/PostCSS：CSS 预处理器，用于扩展 CSS 功能。
• ESLint/Prettier：用于代码规范和格式化，确保代码质量。
• Playwright：端到端的自动化测试工具。
• Husky/Commitlint：Git 提交规范，通过钩子和提交信息格式化来维护代码库的整洁。

4. 项目的代码目录及介绍

项目的代码目录结构大致如下：

island/
├── public/                # 公共资源文件夹
├── src/                   # 源代码文件夹
│   ├── assets/            # 静态资源
│   ├── components/        # 组件
│   ├── styles/            # 样式
│   ├── utils/             # 工具函数
│   ├── views/             # 页面
│   └── main.js            # 入口文件
├── .gitignore             # Git 忽略文件
├── .prettierrc            # Prettier 配置文件
├── .eslintrc.js           # ESLint 配置文件
├── package.json           # 项目配置文件
└── README.md              # 项目说明文件

5. 对项目进行扩展或者二次开发的方向

• 增加新的互动元素：可以在场景中添加更多的互动元素，比如谜题、小游戏等，以增加用户的互动体验。
• 集成社交媒体：允许用户连接他们的社交媒体账户，直接从网站分享信息。
• 添加后台管理系统：开发一个后台管理系统，让用户可以自定义他们的个人简历内容。
• 多语言支持：扩展项目以支持多种语言，使其更具国际化的吸引力。
• 性能优化：针对不同设备和网络环境进行性能优化，确保更广泛的用户都能获得良好的体验。
• AR/VR 支持：考虑集成增强现实或虚拟现实技术，为用户提供更加沉浸的体验。