这是一个使用 @realsee/vapor 组件库构建的如视 VR 看房应用示例。该项目展示了如何使用 Vapor 组件库创建美观、交互丰富的 Web 应用，特别是如何与 @realsee/five VR 引擎集成，实现沉浸式看房体验。
本示例项目演示了一个完整的 VR 看房应用，包括以下主要功能：
- 🏠 VR 全景看房核心功能
- 🔄 多种浏览模式切换（全景、户型图等）
- 🧭 空间导航与房间切换
- 🎮 交互控制（缩放、旋转等）
- 🎨 美观的 UI 界面与动画效果
- 📱 响应式设计，适配不同设备尺寸
- React 18 - 用户界面库
- TypeScript - 类型安全的 JavaScript
- Vite - 现代构建工具
- @realsee/vapor - 如视 VR 前端组件库
- @realsee/five - 如视 VR 引擎
- Sass - CSS 预处理器
- Lottie - 矢量动画库
- Node.js >= 16.0.0
- npm >= 8.0.0
npm install启动开发服务器：
npm run dev默认情况下，服务器将在 http://localhost:5173 上运行。
构建生产版本：
npm run build构建产物将输出到 dist 目录。
npm run previewvapor-sample/
├── public/ # 静态资源目录
├── src/ # 源代码目录
│ ├── vr/ # VR 相关组件
│ ├── front/ # 界面前景组件
│ ├── bottom/ # 底部控制组件
│ ├── main-panel/ # 主面板组件
│ ├── overlays/ # 浮层组件
│ ├── stores/ # 状态管理
│ ├── data-source/ # 数据源
│ ├── utils/ # 工具函数
│ ├── App.tsx # 主应用组件
│ ├── Store.tsx # 全局状态管理
│ └── main.tsx # 应用入口
├── index.html # HTML 模板
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
└── vite.config.ts # Vite 配置
vr/: 包含 VR 场景渲染和控制相关组件front/: 前景 UI 组件，包括顶部导航栏和标题bottom/: 底部控制栏组件，提供模式切换等功能main-panel/: 主面板组件，包含详细信息展示overlays/: 浮层组件，如对话框、工具栏等stores/: 状态管理逻辑，基于 Context APIdata-source/: 数据源，包含 VR 场景数据utils/: 通用工具函数和助手方法
负责渲染和控制 VR 场景，集成了 @realsee/five 引擎。
处理顶部导航栏、标题和控制按钮，提供用户交互入口。
提供模式切换、房间选择等功能。
显示详细信息，如房间数据、户型说明等。
提供各种覆盖在主界面上的交互层，如分享对话框、工具栏等。
<Vapor width='100%' height='100%' theme='arc_beauty'>
{/* 应用内容 */}
</Vapor><ZStack width='100%' height='100%'>
{/* VR 内容 */}
<VR />
{/* 前景 UI */}
<Front />
</ZStack><Button
icon={<Icon symbol={ShareSymbol} />}
onClick={() => dispatchShare({})}
/>Vapor 支持三种内置主题：
arc_beauty- 柔美弧形主题（默认）square_simple- 简约方形主题minimalist- 极简主题
可以通过 Vapor 组件的 theme 属性进行设置。
本示例项目使用 Vapor 的响应式 API 进行布局适配：
const { match, orientation } = useDimension()
// 根据屏幕尺寸调整样式
const padding = match('sm') ? '16px' : match('md') ? '24px' : '32px'A: 请确保安装了所有依赖，并且 Node.js 版本符合要求。
A: 可以在 src/data-source/work.ts 文件中修改场景数据。
A: 在 App.tsx 中修改 Vapor 组件的 theme 属性。
欢迎贡献代码、报告问题或提供改进建议！
- Fork 项目仓库
- 创建特性分支:
git checkout -b feature/amazing-feature - 提交更改:
git commit -m 'Add some amazing feature' - 推送到分支:
git push origin feature/amazing-feature - 提交 Pull Request
本项目由 BEIKE REALSEE TECHNOLOGY (HK) LIMITED 开发和维护。