Interesting 互动体验容器

此项目是一个基于 Vue 3 + TypeScript + Vite 的前端互动体验容器，旨在长期收纳和管理各种 3D、WebGL、Canvas、CSS 以及 iframe 类型的互动特效和场景。它提供统一的路由、状态管理、体验注册、搜索、收藏和配置能力，方便后续逐步接入更多互动体验模块。

技术栈

• Vue 3：主框架，用于构建界面与组件。
• TypeScript：提供类型安全与可维护性。
• Vite：极速开发和构建工具。
• Vue Router：基于 hash 的路由系统。
• Pinia：状态管理。
• UnoCSS：原子化 CSS 引擎。
• Three.js / TresJS：未来用于 3D/WebGL 场景的基础。
• Howler.js：音频控制。
• Fuse.js：本地搜索。

架构概览

仓库采用分层设计：

层级	作用
app	应用入口、路由、布局、状态
components	通用 UI 组件
pages	页面级组件
runtime	体验注册表、事件总线、音频、3D 等
experiences	各个互动体验模块及其元数据
styles	全局样式、主题变量、过渡动画
public	静态资源、旧项目 iframe

体验模块协议

每个体验模块需要提供一个 meta.ts 文件导出 ExperienceMeta，其中包含 id、标题、分类、技术栈、加载方式等元数据。非 iframe 体验应提供 index.vue 作为组件入口，支持异步加载和运行时卸载。

本地开发

pnpm install   # 安装依赖
pnpm dev       # 启动开发服务器
pnpm build     # 构建生产代码
pnpm preview   # 本地预览构建结果

部署

项目可部署到 Vercel 等静态托管平台。由于使用 hash 路由，不需要额外的回退配置。vercel.json 提供了将所有路由重写到 index.html 的设置，以支持未来切换为 history 路由。

版权和来源

本仓库内的体验模块可能会参考或整合开源项目，接入时需保留原作者和来源信息。所有外部代码均需符合其许可证要求。

当前状态

此仓库处于初始化阶段，已经创建了应用骨架和几个占位体验（圣诞节、漂浮爱心、发光爱心和 Legacy Demo）。未来将逐步接入更多互动特效并完善 3D 渲染能力。