使用 React VR 构建全景 3D 图像库

React VR是 Facebook 的一个 JavaScript 库，可以减少创建WebVR应用程序的工作量。您可以将 React VR 与Mozilla 的 A-Frame进行比较，但在 React VR 中，我们使用 JavaScript 来创建 WebVR 场景，而不是编写 HTML。  构建在 WebGL 库Three.js和 React Native 框架之上。这意味着我们可以使用 JSX 标签、React Native 组件（例如<View>或 ） <Text>或 React Native 概念（例如 Flexbox 布局）。为了简化创建 WebVR 场景的过程，React VR 内置了对 3D 网格、灯光、视频、3D 形状或球形图像的支持。 通过 GIPHY 在本文中，我们希望使用 React VR 构建球形图像的查看器。为此，我们将使用四张等距柱状照片，这些照片是我在React Conf 2017上用我的Theta S 相机拍摄的。图库将有四个按钮来交换图像，这些按钮可与鼠标和/或 VR 耳机配合使用。您可以在此处下载等距柱状图图像以及按钮图形。



最后但并非最不重要的一点是，我们将通过添加简单的按钮过渡来了解动画如何与 React VR 配合使用。 对于开发，我们在桌面上使用 Chrome 等浏览器。为了检查 VR 设备的立体渲染是否有效，我们使用配备 Gear VR 的三星手机。理论上，任何支持 WebVR 的移动浏 WhatsApp 号码数据 览器都应该能够以立体方式渲染我们的应用程序，以便与 GearVR、Google Cardboard 甚至 Google Daydream 一起使用。但该库以及 API 仍在开发中，因此支持可能并不可靠。以下是当前支持 WebVR 功能的浏览器的详细总结。 开发设置和项目结构 让我们首先安装 React VR CLI 工具。然后在名为 的新文件夹中创建一个新的 React VR 项目及其所有依赖项GDVR_REACTVR_SITEPOINT_GALLERY： npm install -g react-vr-cli react-vr init GDVR_REACTVR_SITEPOINT_GALLERY cd GDVR_REACTVR_SITEPOINT_GALLERY 要启动本地开发服务器，我们将运行 npm 脚本并 中浏览。



如果您看到一个黑白房间，有楼梯、柱子和“你好”文本平面，那么一切都是正确的。 通过 GIPHY React VR CLI 搭建的最重要的文件和文件夹是： index.vr.js。这是应用程序的入口点。目前，该文件包含 React VR 默认场景的完整源代码，正如我们已经在浏览器中看到的那样。 static_assets。该文件夹应包含应用程序中使用的所有资源。我们将把等距柱状图像和按钮图形放在这个文件夹中。 我们希望我们的项目包含三个组成部分： 一个Canvas组件，包含全球图像的代码 一个组件，它创建一个 VR 按钮来交换图像 UI组件，它用四个 Button 组件构建 UI 。 这三个组件都有自己的文件，因此让我们创建一个components文件夹来包含这些文件。然后，在开始创建 Canvas 组件之前，让我们从文件中删除脚手架示例代码，index.vr.js使其看起来像这样在前六行代码中，我们导入依赖项。然后我们声明 Canvas 组件并使用 JSX 语法定义它的渲染方式。