Viro React: 使用React Native开发VR、AR程序

Viro React 是一个供开发人员快速构建增强现实 (AR) 和虚拟现实 (VR) 体验的平台。开发人员使用 React Native 进行编写，Viro 在所有移动 VR（包括 Google Daydream、Samsung Gear VR 以及适用于 iOS 和 Android 的 Google Cardboard）和 AR（iOS ARKit 和 Android ARCore）平台上本地运行他们的代码。更多信息在这里。

该项目包含 Viro React 的完整源代码和各种示例 Viro 项目。

该平台可以免费使用，没有分发限制。

使用 Testbed 应用程序运行示例项目的说明：

按照我们的快速入门指南中的说明设置依赖项，以便使用 Viro Media App 尝试这些示例项目。
使用 git: 将 repo 克隆到您的工作区git clone https://github.com/viromedia/viro.git。
进入代码示例目录。
npm install从这个项目的根运行。
npm start从这个项目的根运行。
打开 Viro Media App，滑出左侧面板并选择“进入测试平台”。
在终端顶部的文本字段中输入整个 ngrok URL 输出 (xxxxxx.ngrok.io) 并点击“GO”
您现在应该在应用程序中！享受！

要从源代码重建测试平台应用程序，请参阅此处的测试平台存储库。

将示例代码作为独立项目运行的说明（没有 Testbed 应用程序）：

通过我们的 Testbed 应用程序尝试了示例，现在想尝试将示例代码作为独立应用程序部署到您的设备吗？下面的这些快速步骤应该可以帮助您入门：

按照上面的步骤 1 - 4（使用 Testbed 应用程序的说明）
对于 Android，请确保您已从此处下载并安装 Android Studio以获取构建 android 应用程序所需的 SDK 和平台工具确保您已设置所需的环境变量 - $ANDROID_HOME，并将其添加platform-tools到$PATH变量中。如果不，
```
export ANDROID_HOME=/YOUR_PATH_TO/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH
```
通过从项目的根目录执行以下命令来构建和启动 android 应用程序
```
react-native run-android --variant=gvrDebug
```
对于iOS，在Xcode中打开ViroSample.xcworkspace的ios/目录。在 Hit play下选择正确的“团队”ViroSample和ViroSampleTest目标，General -> Signing以在您的 iOS 设备上构建和启动应用程序

在样本之间更改

在文本编辑器中打开 App.js。
对于 AR，在第 44 行设置 showARScene=true。
对于 VR，修改第 61 行：scene: scenes['360 Photo Tour'],到scenes第 30 行字典中定义的场景。
重新加载/重新启动应用程序。

从 Mainline 使用 CI 构建的 Viro React 平台的说明：

您还可以尝试包含前沿功能和修复的最新主线版本。请记住，主线构建可能不如发布构建稳定。为此，只需：

转到此项目的Viro 操作工作流。
您应该会看到“Viro Bridge CI Pipeline”工作流列表。
单击最新成功构建的工作流管道（旁边应该是复选标记）。
下载最新构建的 ViroReact.tgz artiface。
使用 git: 将此 repo 克隆到您的工作区git clone https://github.com/viromedia/viro.git。
进入代码示例目录。
npm install从这个项目的根运行。
删除从 npm 安装中下拉的 ViroReact 框架（您将使用预先构建的框架）。
npm install ../path/to/your/downloadedArtifact.tgz

手动搭建 Viro React 平台的说明：

构建 iOS Viro React：

按照我们的快速入门指南中的说明设置依赖项。
使用 git: 将 repo 克隆到您的工作区git clone https://github.com/viromedia/viro.git。
使用Virocore 存储库中概述的构建说明构建我们的 iOS 渲染器。
验证您是否看到在ios/dist文件夹中创建的新文件。
在ios/文件夹中安装 Pod ：
```
cd ios
pod install
```
在 test 文件夹中安装 node_modules：
```
cd test
npm install
```
在ViroExample文件夹中安装 pods ：
```
cd test/ios/ViroExample
pod install
```
ViroExample.xcworkspace在 Xcode 中打开。（确保您打开 .xcworkpace 文件，而不是* .xcodeproj 文件！）
选择产品->方案。如果您没有看到React方案，请点击Manage Schemes...。在对话框中，添加React方案。
对 scheme 进行构建配置（Debug 与 Release）React，ViroReact并ViroExample确保它们都是 Release 或 Debug，具体取决于您尝试构建的内容。

就是这样！现在为构建 React 方案Generic iOS Device，然后为同一目标构建ViroReact 方案。笔记：

11.a If you want the ability to run on Simulator, change target to any of the `iOS Simulator` targets instead of `Generic iOS Device`.
11.b If in your own app project setup, you prefer to include Viro React as a static library rather than relying on `use_frameworks!` - build scheme `ViroReact_static_lib` instead of `ViroReact` as mentioned above in step #11.

您应该会libViroReact.a在ios/dist/lib/libViroReact.a.
要运行 Viro React 测试，请ViroExample在插入的 iOS 设备上运行方案。

构建 Android Viro React：

在 viro 目录下，运行./prepareRelease.sh.
您的 android 桥现在应该是在 release 下构建的。
您应该会看到在 android/react_viro/react_viro-release.aar 中创建的新文件

构建 android 发布测试：

$ cd test/android
$ ./gradlew assembleGvrRelease

将 app-gvr-release.apk 从test/android/app/build/output/gvr/app-gvr-release.apk插入的 Android 设备上安装。

将构建的 iOS 和 Android 捆绑并使用到单个 npm tar 包中：

将./prepareRelease.sh你在上面跑Android的建立反应的桥梁和捆绑iOS和Android的桥进入一个react-viro-*.tgz文件。* 来自package.json文件的当前版本。

示例代码

Figment AR（完整的开源应用程序）

包含完整源代码的存储库，使用 ViroReact 和 React Native 构建，用于 Viro Media 屡获殊荣的 Figment AR 应用程序。在Google Play和App Store上可用。

正在上传…重新上传取消

在GitHub - viromedia/figment-ar: This repository contains the entire source code, built using ViroReact and React Native, for Viro Media's Figment AR App.下载完整源代码

示例代码概述

带有显示“Hello World”的 360 度全景照片的场景。

360 度摄影之旅

360 度全景照片示例，向您展示如何显示带有可点击热点的 360 度全景照片。

人体

此示例展示了 3d 对象。绕着 3d 心脏旋转，从不同的角度看它！

虚拟现实媒体播放器

了解如何使用可以播放、暂停和停止的交互式播放控件来显示和播放 2d 和 360 度视频。

产品展示

了解如何使用可以播放、暂停和停止的交互式播放控件来显示和播放 2d 和 360 度视频。关于如何为电视制作交互式购物应用程序的演示。将 flexbox 用于带有动画的 UI 和 3d 对象。

增强现实样本

在场景中检测到的 ARKit 平面上显示对象、文本和动画的场景。

AR汽车标记演示

一个 ARScene 寻找这个图像并添加一个能够改变其颜色的汽车模型。

AR驾驶汽车演示

一个 ARScene，允许用户将汽车放置在一个表面上并驾驶它环游世界。请参阅项目目录中的说明以启用演示。

AR海报演示

搜索此垂直标记并渲染 Black Panther 跳出标记的 ARScene 。

AR 跟踪名片演示 - 仅限 iOS

使用图像跟踪连续跟踪此名片的 ARScene 。

AR 完整示例应用程序

带有 Viro AR 示例应用程序的完整 React Native。演示如何在现实世界中放置、拖动和缩放对象，同时提供 2D UI 反馈。

转存失败重新上传取消

教程

如何在 5 分钟内构建一个交互式 AR 应用程序

如何在 5 分钟内构建 AR 门户

将类似 Snapchat 的 AR 镜头添加到任何应用程序