用React 360构建一个VR应用

前端小工
1,753 阅读6分钟

作为一个技术主管，你可能知道虚拟现实及其各种应用。视频游戏、网络和移动应用程序等都可以从VR的惊人功能中获得好处。

如果你的下一个开发目标是创建VR应用程序，并且你熟悉React生态系统，你很幸运。你现在可以使用React 360和JavaScript开发出惊人的VR体验。

在本教程中，我们将向你展示如何使用React 360开发一个简单而互动的React虚拟现实应用。到最后，你应该准备好在React中建立你的第一个VR应用。

我们将涵盖以下内容。

什么是React 360？

React 360是一个库，它利用大量的React Native功能来创建在网络浏览器中运行的虚拟现实应用程序。它使用Three.js进行渲染，并作为一个npm包出现。通过将WebGL和WebVR等现代API与React的声明性功能相结合，React 360有助于简化创建跨平台VR体验的过程。

学习如何使用React 360是启动你的VR开发事业的一个好方法。在本教程中，我们将介绍所有的基础知识，以帮助你开始使用React 360。

安装React 360

首先，你需要安装React 360 CLI。这将使你能够访问所有必要的命令，以协助你开发一个虚拟现实应用程序。

现在，通过命令终端进入所需的文件夹，运行以下命令。

npm install -g react-360-cli

这是一次性的安装，所以你不必每次都这样做。在项目文件夹中的好处是，它使下面的步骤更容易。

安装后，创建一个新的项目，名为my-project （有创意，对吗？），然后输入。

react-360 init my-project

你已经成功地用React 360创建了你的第一个虚拟现实应用。

要在浏览器中查看该应用程序，请通过终端导航到my-project 文件夹，然后运行npm start 。这将引导你到浏览器中的目的地。或者，你可以通过以下方式访问输出 [http://localhost:8081/index.html](http://localhost:8081/index.html).

下面是这个应用应该是什么样子的。

Welcome to React 360 Example

React 360模板屏幕

现在你已经建立并运行了应用程序，让我们来详细谈谈代码。我们要处理的两个重要文件是client.js 和index.js 。index.js 文件由四个部分组成。

  • 类
  • 输入
  • 样式
  • 组件注册表

我们要导入React来使用它的类功能。我们将从React 360中收集一些部件来构建一个VR环境。

import React from 'react';

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

export default class my_project extends React.Component {
  render() {
    return (
      
        
          
            Welcome to React 360
          
        
      
    );
  }
};

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('my_project', () => my_project);

类的语法和组件分别与React和React Native相当相似。View 组件允许你渲染VR世界的各个方面，如果你愿意，还可以玩玩外观和感觉。Style 属性和StyleSheet 将帮助你做到这一点。这里与React Native和CSS功能有许多相似之处。

当涉及到Text 组件时，你可以创建动态文本，为用户显示各种数据。最后，这个类需要被注册到客户端进行渲染。

你会注意到，client.js 文件中的init 函数为你的项目建立了一个新的实例，然后利用index.js 文件中的类，为这个项目分配了一个渲染方法。之后，项目环境被应用于全景图像，接着执行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('my_project', { }),
    r360.getDefaultSurface()
  );

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

window.React360 = {init};

这些就是React 360功能的基本原理，你就可以进行你的第一个VR应用开发了。现在你知道了React VR应用程序是如何制作的，让我们通过一些步骤来定制它。

添加背景资产

你可以使用React 360将任何全景图像应用到VR背景中。在这个教程中，我们使用的是一张Simmes的免费图片；你可以使用任何你喜欢的图片。

要使用全景图片作为背景，将所需的图片添加到static_assets 文件夹中。这个文件夹包含所有的静态资产，如图片、音乐和模型，React 360会在这里搜索它们。

使用下面的命令来更新背景。

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

VR互动

任何应用程序最重要和最吸引人的方面之一是互动。没有互动，一个应用程序就没有生命力。你可以在你的React VR应用中添加这一重要功能，方法是在index.js 文件的导入中添加VrButton 组件，如下。

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

接下来，添加一个计数器来记录点击次数。首先将点击次数设置为零。

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>

你已经成功地设置了这个按钮，现在你可以看到访问你的VR世界的人数。

添加身临其境的声音

不是所有你创建的应用程序都需要声音。然而，当涉及到游戏、视频和其他沉浸式体验时，声音是必不可少的。

为了给我们的VR应用添加声音，我们需要从React 360中再获取一些东西。

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

下一步是从NativeModules 中导入AudioModule ，并设置一个新的const 。

const { AudioModule } = NativeModules;

一旦设置了新的const ，我们就可以为声音的播放方式添加特定的功能。例如，我们可以让它在点击按钮时开始播放，在再次点击按钮时停止。

为了实现这个功能，我们将在状态中添加一个布尔值。

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 组件创建一个音频实例。

一旦创建，你就可以通过指定的名称播放音频。这只发生在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>

你的VR应用现在已经完成了!让我们运行这个应用程序，看看它看起来如何。

运行你的React VR应用程序

你可以通过run npm start 命令查看该应用程序。你的第一个React VR应用程序，称为 "我的项目"，应该包含你选择的背景和两个按钮。一个按钮控制音频，另一个按钮记录访问该应用程序的用户数量。

你现在可以邀请你的朋友和家人来玩你的新VR应用，并与其他程序员一起集思广益，为该应用提出新的想法。这种可能性是无穷无尽的。

我希望这个教程能帮助你更好地理解React 360。

告诉我们你使用React 360的经验。你认为创建VR应用程序的最佳方式是什么？我们很想听听你的意见。

The postBuilding a VR app with React 360appeared first onLogRocket Blog.

avatar
文章
阅读
粉丝