NextVR 是VR展示应用框架，该应用框架为开发者提供了一个强大、易用且功能丰富的解决方案，帮助其轻松实现VR展示的开发及服务的部署。它透明化地处理了数据处理过程，减少了开发者的工作，让他们能专注于创新和开发自身业务功能。此外，在 NextVR 迭代过程中，规范了能力的沉淀和标准化。
根据当前目录结构生成的目录树如下：
next-vr
├── ci # ci 相关目录
| ├── Makefile # 源码部署的 Makefile 文件
| └── run.sh # 源码部署的运行脚本
├── docs # 文档目录
| ├── CHANGELOG.md # 更新日志
| └── GUIDE.md # 使用指南
├── public # 纯静态资源目录
├── src # 源码目录
| ├── __mock__ # mock 数据目录
| | ├── floorplan.ts # 平面图 mock 数据
| | └── vr-info.ts # VR work mock 数据
| ├── app # Next App Router 目录
| | ├── (api) # API Routers 目录
| | | ├── api-proxy # Realsee Api Proxy 的路由
| | | └── custom-api # 自定义 API请求代理 的路由
| | | └── [...path]
| | | └── route.ts
| | ├── (vr) # VR Routers 目录
| | | ├── [code] # VR 页面路由
| | | | ├── globals.css # 全局样式
| | | | ├── layout.tsx # 页面布局
| | | | └── page.tsx # 页面组件
| | | ├── _application # VR 应用入口
| | | | ├── components # VR 公共组件
| | | | | ├── data-loading # 数据加载中组件
| | | | | ├── device-info # 设备信息组件
| | | | | ├── exhibit-tabs # 展品标签组件
| | | | | └── maps # 地图组件
| | | | ├── five # Five 相关的操作集
| | | | | ├── plugins # Five 插件
| | | | | | ├── MiniModelPlugin # MiniModel 插件
| | | | | | └── base # Five 插件基类
| | | | ├── modules # VR 应用模块
| | | | | ├── ai-player # 导览 播放器
| | | | | ├── annotation # VR 标注
| | | | | ├── brand-booth # VR 展位
| | | | | ├── brand-intro # VR 介绍
| | | | | ├── brand-logo # VR Logo
| | | | | ├── floorplan # VR 平面图
| | | | | ├── guide # VR 导览模块
| | | | | ├── guide-line # VR 路线引导
| | | | | ├── guide-panel # VR 导览面板
| | | | | ├── guide-tag-panel # VR 标签面板
| | | | | ├── infomation # VR 信息面板
| | | | | ├── main-panel # VR 主面板
| | | | | ├── map # VR 地图模块
| | | | | ├── measure # VR 测量模块
| | | | | ├── mini-map # VR 小地图
| | | | | ├── mode-tabs # VR 模式切换
| | | | | ├── multi-floor # VR 多楼层控制
| | | | | ├── opening # VR 开场动画
| | | | | ├── overlays # VR 应用覆盖层
| | | | | ├── ruler # VR 标尺
| | | | | ├── share # VR 分享
| | | | | ├── signals # VR 信号器
| | | | | ├── statement # VR 声明
| | | | | ├── tags # VR 全景标签
| | | | | ├── topbar # VR 顶部导航
| | | | | └── vr-group # VR 组
| | | | ├── stores # VR 应用状态管理
| | | | | ├── common # VR 公共状态
| | | | | | ├── env.ts # VR 运行环境状态
| | | | | | └── style.ts # VR 样式状态
| | | | | ├── ai-player.ts # 导览播放器状态
| | | | | ├── config.ts # VR 配置状态
| | | | | ├── guide-line.ts # VR 路线引导状态
| | | | | ├── guide.ts # VR 导览状态
| | | | | ├── index.ts # VR 应用状态管理入口
| | | | | ├── loading-info.ts # VR 加载信息状态
| | | | | ├── page-state.ts # VR 页面状态
| | | | | ├── toolbox.ts # VR 工具箱状态
| | | | | ├── topbar.ts # VR 顶部导航状态
| | | | | └── vr.ts # VR 应用状态
| | | | ├── utils # VR 工具集
| | | | | ├── five # Five 工具集
| | | | | | ├── getCurrentPosition.ts # 获取当前位置
| | | | | | ├── getFloorIndex.ts # 获取楼层索引
| | | | | | ├── getLngLatFromLookAtPosition.ts # 从观察位置获取经纬度
| | | | | | ├── index.ts # Five 工具集入口
| | | | | | ├── to3dPosition.ts # 3D 位置转换
| | | | | | └── vectorToCoordinates.ts # 向量转坐标
| | | | | ├── hooks # 相关的react hook
| | | | | | └── match.ts # 匹配样式断点等
| | | | | ├── symbols # vapor icon 的自定义符号
| | | | | | └── LottieMusicSymbol.ts # Lottie 音乐符号
| | | | | ├── get-host.ts # 获取主机
| | | | | ├── get-origin.ts # 获取源
| | | | | ├── get-uuid.ts # 获取 UUID
| | | | | ├── image-set.ts # 图片集
| | | | | ├── image-url-transform.ts # 图片 URL 转换
| | | | | ├── is-server.ts # 是否是服务端
| | | | | ├── listener.ts # 监听器
| | | | | ├── mouse.ts # 鼠标
| | | | | ├── sleep.ts # 睡眠
| | | | | ├── use-isomorphic-layout-effect.ts # 使用同构布局效果
| | | | | └── use-update.ts # 使用更新
| | | | ├── app.tsx # VR 应用入口
| | | | ├── front.tsx # VR 前端入口
| | | | ├── layout.tsx # VR 布局
| | | | └── provider.tsx # VR 数据状态提供者
| | | └── _data # VR 数据层
| | | ├── vr-ai-player.ts # VR 导览播放器
| | | ├── vr-annotation.ts # VR 标注
| | | ├── vr-config.ts # VR 配置
| | | ├── vr-floorplan.ts # VR 平面图
| | | ├── vr-group.ts # VR 组
| | | ├── vr-info.ts # VR 信息
| | | ├── vr-introduction.ts # VR 介绍
| | | ├── vr-loading-info.ts # VR 加载信息
| | | ├── vr-observer-guide.ts # VR 导览
| | | ├── vr-pano-video.ts # VR 全景视频
| | | ├── vr-route-list.ts # VR 路线列表
| | | ├── vr-ruler.ts # VR 标尺
| | | ├── vr-source-introduction.ts # VR 资源介绍
| | | └── vr-tag.ts # VR 标签
| | ├── (vr-list) # VR 列表
| | | └── _application # VR 列表应用入口
| | | └── app.tsx # VR 列表应用入口
| | ├── cosmos # Cosmos 相关目录
| | ├── playground # Playground 相关目录
| | ├── error.tsx # 错误页
| | ├── favicon.ico # 网站图标
| | ├── layout.tsx # 页面布局
| | ├── not-found.tsx # 404 页面
| | └── page.tsx # 根页面路由
| ├── lib # 通用库
| | ├── api # API 相关
| | | ├── open-api # Open API 相关的接口声明和调用实现
| | | ├── client.browser.ts # 浏览器端 API 客户端
| | | ├── client.server.ts # 服务端 API 客户端
| | | ├── client.ts # API 客户端
| | | ├── hooks.ts # API 相关的 React Hook
| | | └── index.ts # API 相关的入口
| | ├── config # 配置相关
| | ├── five # Five 相关
| | | ├── use-five-state-with-selector.tsx # Five 状态管理
| | | └── use-five.tsx # Five Hook
| | ├── i18n # 国际化相关
| | | ├── accept-language.ts # 获取浏览器语言
| | | ├── index.ts # 国际化入口
| | | └── server.ts # 服务端国际化
| | ├── logger # 日志相关目录
| | ├── signals # 信号器
| | └── store # ���态管理底层封装
| | └── index.ts
| ├── locales # 国际化资源目录
| ├── pages # Next Pages Router 目录
| | ├── api # API 路由
| | | └── log-endpoint.ts # 实时日志接口
| | └── log-viewer.tsx # 日志查看器
| ├── services # 数据服务目录
| | └── realsee-gateway.ts # Realsee 网关服务
| ├── shared # 共享目录
| | ├── custom-api # 自定义 API 请求相关的类型和配置
| | ├── async-cache.ts # 异步缓存
| | ├── base64.ts # Base64 编码
| | ├── cn.ts # classname 封装，兼容 tailwindcss
| | ├── css-size-to-number.ts # CSS 尺寸转数字
| | ├── use-active-path.tsx # 使用活动路径
| | ├── use-cur-floor.ts # 使用当前楼层
| | └── use-media.tsx # 使用媒体
| ├── styles # 样式目录
| ├── types # 类型声明
| | └── open.ts
| ├── ui # UI 组件目录
| ├── instrumentation.ts # 监控
| └── middleware.ts # 中间件
├── Dockerfile # Docker 镜像构建文件
├── README.md # 项目说明
├── api-gateway.openapi.json # API 网关 OpenAPI 文档
├── api.config.ts # API 配置
├── components.json # Cosmos 组件配置
├── cosmos.config.json # Cosmos 配置
├─��� cosmos.imports.ts # Cosmos 导入
├── docker-compose.dev.yml # docker-compose 开发配置
├── docker-compose.yml # docker-compose 配置
├── environment.d.ts # 环境变量声明
├── i18n.d.ts # 国际化声明
├── next-env.d.ts # Next.js 环境声明
├── next.config.js # Next.js 配置
├── package-lock.json # npm 依赖锁定
├── package.json # npm 依赖
├── postcss.config.js # PostCSS 配置
├── tailwind.config.ts # TailwindCSS 配置
├── tencentCloudInfiniteLoader.js # 腾讯数据万象图床加载器
├── tsconfig.json # TypeScript 配置- 文件命名
- 文件名全部小写，单词之间使用中划线分隔
- 代码规范
- 使用 eslint 进行代码规范检查
- 代码提交
- 遵循 Conventional Commits 规范，提交信息格式为
<type>(<scope>): <subject>，其中<type>为提交类型，<scope>为提交范围，<subject>为提交描述 - 使用 commitlint 进行提交信息检查，在commit之前会进行检查，不符合规范的提交信息会被拒绝
- 看VR
- 主面板
- 测量
- 标尺
- opening
- 错误页
- 模型小窗
- 平面图
- 导览
- 路线��导
- 分享
- 热点标签
- VR 眼镜
- 空间信息
文件 .env.template 定义了应用使用的环境变量模板。
- APP_ID 应用ID
- REALSEE_GATEWAY_ENDPOINT Realsee网关地址
- REALSEE_GATEWAY_APP_KEY Realsee网关应用Key
- REALSEE_GATEWAY_APP_SECRET Realsee网关应用Secret
- REALSEE_SOURCE Realsee企业账号 ID
- REALSEE_GATEWAY_ACCESS_DISABLED 是否禁用网关接口调用加鉴权 Token
- REALSEE_LOG_DISABLED 是否禁用日志
- REALSEE_LOG_VIEWER_DISABLED 是否禁用日志查看器
- NEXT_TELEMETRY_DISABLED 关闭 Next.js 的 Telemetry
- NEXT_PUBLIC_AMAP_API_KEY 高德地图 API Key
- NEXT_PUBLIC_BAIDU_MAP_API_KEY 百度地图 API Key
- NEXT_PUBLIC_GOOGLE_MAP_API_KEY 谷歌地图 API Key
- NEXT_PUBLIC_TENCENT_MAP_API_KEY 腾讯地图 API Key
请在部署时根据实际情况配置环境变量。
.env.development 文件是环境变量配置文件，用于本地开发环境。在部署时，可以通过环境变量配置文件或者直接设置环境变量的方式配置环境变量。
在开发时，可以通过环境变量配置文件 .env.development 配置环境变量。
# 拷贝环境变量配置文件，并根据实际情况配置环境变量
cp .env.template .env.development- 请根据实际情况配置环境变量。AK & SK 的获取请参考 Realsee 开放平台。
- 如果是私有化部署，由如视提供的私有化解决方案，则无需配置 AK & SK，但需要配置 Realsee 网关地址，并关闭网关接口调用加鉴权 Token。
- .env.development 文件是环境变量配置文件，用于本地开发环境，请不要提交到代码仓库。
- 在部署时，可以通过环境变量配置文件.env或者直接设置环境变量的方式配置环境变量。
- 请确保打包时的.env文件和生产运行时的环境变量配置一致。避免因环境变量配置不一致导致的问题。
环境要求：
- Node.js 18.x
- npm 10.x
- 安装依赖
npm install- 启动服务
npm run dev- 访问
http://localhost:1234环境要求：
- Docker 20.x
- docker-compose 1.29.x
- docker-compose 开发
docker-compose -f ./docker-compose.dev.yml up --build --remove-orphans- 访问
http://localhost:3000- 停止服务
docker-compose -f docker-compose.dev.yml down当前使用APifox作为API文档管理工具，API文档，可以找@李成杰申请权限
步骤：左侧菜单 —> 根目录 —> 更多悬浮菜单 —> 导出 —> 导出为OpenAPI 3.0
环境要求：
- Docker 20.x
- docker 镜像构建
# 以下是常规构建命令
docker build --target production -t nextvr-app .
# 以下是最大化利用宿主机资源进行构建的命令，适用于 Mac 和 Linux 平台
DOCKER_BUILDKIT=1 docker build --target production --build-arg BUILDKIT_INLINE_CACHE=1 --build-arg NODE_OPTIONS="--max-old-space-size=$([ "$(uname)" = "Darwin" ] && sysctl hw.memsize | awk '{print int($2/1024/1024*0.8)}' || free -m | grep Mem | awk '{print int($2 * 0.8)}')" --build-arg PARALLEL_JOBS=$([ "$(uname)" = "Darwin" ] && sysctl -n hw.ncpu || nproc) --compress -t nextvr-app .- docker 镜像运行
docker run --env-file .env.development --rm --name nextvr-app -d -p 3000:3000 nextvr-app - 访问
http://localhost:3000- 停止服务
docker stop nextvr-app环境要求：
- Docker 20.x
- docker-compose 1.29.x
- docker-compose 部署
docker-compose up -d --build --remove-orphans- 访问
http://localhost:3000- 停止服务
docker-compose down环境要求：
- Node.js 18.x
- npm 10.x
- 安装依赖
npm install- 构建
make -f ci/Makefile- 启动服务
sh ./dist/run.sh start- 访问
http://localhost:3000- 停止服务
sh ./dist/run.sh stop