使用 React360 制作你的第一个 VR 应用

身处科技圈，不可能不知道虚拟现实 (VR) 的兴起。如今，许多游戏系统、移动应用和 Web 应用都充分利用了 VR 的功能。更棒的是，如果您熟悉 React 生态系统，那么您可以直接开始构建 VR 应用！React 360 是一个库，它使用了大量 React Native 功能来构建 VR 应用，是 VR 开发者入门的绝佳选择。

我们将使用 React 360 搭建一个简单的交互式 VR 应用。学完本教程后，你应该已经准备好为你的 VR 应用添加更多复杂功能，使其更加用户友好。最后我会提供一些小建议，以防你需要一些快速入门。

安装 React 360 CLI

首先你需要安装 React 360 CLI。这样你就可以访问构建 VR 应用所需的命令。打开终端，导航到你想要创建此项目的文件夹。然后运行此命令。

npm install -g react-360-cli

这样就完成了全局安装，以后的项目就无需再重复此操作了。之所以要进入项目文件夹，只是为了简化下一步操作。现在，你将使用以下命令创建一个名为“vr-project”（很有创意）的新 VR 项目。

react-360 init vr-project

现在，您已经拥有一个基于 React 360 构建的全新 VR 应用！要查看它在浏览器中的样子，您可以使用终端进入 vr-project 文件夹，然后运行 ​​npm start。它应该会告诉您在浏览器中应该访问哪个位置，但如果没有，请尝试导航到http://localhost:8081/index.html。您应该会看到类似这样的内容。

让我们浏览一下项目并讨论一下代码。你需要关注的主要文件是 index.js 和 client.js。index.js 文件主要包含四个部分：导入、类、样式和注册组件。我们导入 React 以便使用它的类功能，并从 React 360 导入一些内容以便创建我们的 VR 世界。

import React from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class vr_project extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Welcome to React 360
          </Text>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  panel: {
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

AppRegistry.registerComponent('vr_project', () => vr_project);

类的语法看起来和 React 很相似，组件也和 React Native 中的类似。你可以使用 View 组件来渲染 VR 环境的不同部分，并通过 style 属性和 StyleSheet 来改变它们的外观，这与 React Native 中的用法类似，使用起来也非常像常规的 CSS。

Text 组件顾名思义，它可以向用户显示文本，并且文本可以动态显示不同类型的数据。最后，你需要将这个类注册到客户端，以便渲染它。在 client.js 文件中，你会注意到 init 函数会为你的 VR 项目创建一个新的实例，并使用 index.js 文件中的类来设置项目的渲染方法。然后，它将 VR 项目的环境设置为全景图像。最后，它会在浏览器窗口中运行 init 函数。

import {ReactInstance} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    ...options,
  });

  r360.renderToSurface(
    r360.createRoot('vr_project', { }),
    r360.getDefaultSurface()
  );

  r360.compositor.setBackground(r360.getAssetURL('simmes-start-screen.jpg'));
}

window.React360 = {init};

现在您已经了解了 React 360 应用的基本工作原理，可以开始制作您自己的自定义 VR 应用了。我们将介绍一些您可以添加到项目中的内容。

添加背景资产

您可以将环境背景更改为任何您想要的全景图像。我在这里找到了一些免费图片：https: //pixexid.com。将所有新图片添加到 static_assets 文件夹，因为 React 360 会在此查找所有静态资源，例如图像、声音和模型。您可以像这样在 client.js 文件中更新环境背景。

r360.compositor.setBackground(r360.getAssetURL('simmes-start-screen.jpg'));

资源 URL 以前是 360_world.jpg，现在已更新为我正在开发的 VR 应用的启动屏幕。有一点让我有点失望，那就是缺少内置的原始形状。你不能直接构建对象并将其放置在你的世界中。你必须在应用外部构建模型并导入它们。市面上有一些免费资源，但它们并不是最好的。所以请注意，你无法在 React 360 中构建盒子和球体。

添加一些与应用程序的交互

任何 VR 应用的乐趣都在于与它交互。您可以使用 VrButton 组件来实现这一点。我们将它添加到 index.js 文件的 imports 中，如下所示。

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton
} from 'react-360';

我们将创建一个简单的计数器来跟踪用户点击按钮的次数。为此，我们需要添加一些额外的功能。首先，我们将设置组件的初始状态，并将计数设置为 0。

state = {
  count: 0
};

然后我们将创建一个函数来像这样增加该计数。

_incrementCount = () => {
  this.setState({
    count: this.state.count + 1
  })
}

最后，我们需要将 VrButton 添加到渲染方法中。

<View style={styles.panel}>
        <VrButton
          onClick={this._incrementCount}
          style={styles.greetingBox}>
          <Text style={styles.greeting}>
            {`You have visited Simmes ${this.state.count} times`}
          </Text>
        </VrButton>
</View>

注意，我们为 VrButton 添加了 onClick 事件，该事件会调用 _incrementCount 函数。这就是我们处理用户输入的方式。然后，我们为按钮赋予了与更改之前保存文本的视图相同的样式。您会注意到的另一个变化是，我们将 Text 组件中的文本更新为模板字符串。我们返回用户的点击次数，并告知他们访问 Simmes VR 世界的次数。

为应用程序添加声音

并非所有 VR 应用都需要声音，但对于游戏或完全沉浸式的世界，你可能需要添加声音。为了将声音添加到此项目，我们需要在 index.js 文件中从 React 360 导入一些其他内容。

import {
  asset,
  AppRegistry,
  NativeModules,
  StyleSheet,
  Text,
  View,
  VrButton
} from 'react-360';

接下来我们需要从 NativeModules 中获取 AudioModule，我们将通过创建一个新的 const 来实现。

const { AudioModule } = NativeModules;

我们要实现的音频功能会在用户点击按钮时播放声音，如果用户再次点击同一按钮，则会停止播放。为了实现这一点，我们将为状态添加一个布尔值。

state = {
  count: 0,
  playSound: false
};

然后我们可以添加另一个函数来处理声音的播放方式。

_playSound = () => {
    this.setState({
      playSound: !this.state.playSound
    });

    if (this.state.playSound) {
      AudioModule.createAudio('sza', {
        source: asset('brokenclocks.mp3'),
        volume: 0.5
      });

      AudioModule.play('sza');
    }
    else {
      AudioModule.stop('sza');
    }
  }

当此函数被触发时，它首先会更新 playSound 状态，该状态初始为 false。根据 playSound 的值，您可以开始播放声音或停止播放。如果需要开始播放声音，您可以创建一个音频实例来使用。createAudio 方法接受一个名称以及您想要传入的任何选项。您至少需要传入一个源文件。这就是我们从 React 360 导入资源文件的原因。这样我们可以轻松地从 static_assets 文件夹中获取文件。

创建音频实例后，您可以通过引用为其指定的名称来播放它。当 playSound 为 true 时，就会发生这种情况。当它为 false 时，您将停止声音，并删除音频实例。这就是为什么我们每次 playSound 为 true 时都会创建一个新的实例。

最后，我们将添加一个播放或停止声音的按钮。

<View style={styles.panel}>
 <VrButton
    onClick={this._incrementCount}
    style={styles.greetingBox}>
    <Text style={styles.greeting}>
     {`You have visited Simmes ${this.state.count} times`}
  </Text>
 </VrButton>
 <VrButton
   onClick={this._playSound}
   style={styles.greetingBox}>
   <Text style={styles.greeting}>
     {'You can play the music of your people'}
   </Text>
  </VrButton>
</View>

它只是另一个 VrButton，但这次 onClick 监听器调用了 _playSound 方法。除此之外，它与其他 VrButton 几乎完全相同。您可以稍微发挥一下想象力，根据 playSound 的值更改播放/停止按钮上显示的文本。现在您已经添加了声音功能，这个简单的应用就完成了！现在是时候构建它了。

运行应用程序并试用

运行 npm start 看看你的新应用是什么样子。它可能和我之前的样子不一样，不过这是我截的图。

你已经创建好了背景和两个按钮，一个是计数器，另一个是音频控制按钮。现在，你可以尽情发挥你的想象力，探索你的新世界，并开始思考想要添加的内容。你可以制作一款精彩的VR游戏，也可以制作一些辅助人们无障碍体验的东西。凭借一点创造力和想象力，你可以在这个项目的基础上构建很多东西。

希望这能为你使用 React 360 打下良好的基础。这是一个很棒的库，可以帮助你进入 VR 开发领域。你无需购买昂贵的头显来测试你的应用。你可以在浏览器中直接进行测试。不过，不要指望在 DevTools 中看到太多内容，因为所有内容都渲染在画布上。不像你想象的那样，里面没有单独的元素。

你认为VR开发值得学习吗？还是只会昙花一现？如果有一个网页版的AR库就太酷了，但这究竟该如何实现呢？这些都是新兴领域，目前还处于探索阶段。既然你已经了解了开发VR应用所需的技术技能，不妨尝试专注于VR应用的创意方面。

嘿！你应该在 Twitter 上关注我，理由如下：https://twitter.com/FlippedCoding