React VR 快速入门完全教程

React VR 快速入门

什么是React

React是一个开放源代码的JavaScript库，为HTML呈现的数据提供了视图渲染。React视图通常使用指定的像HTML标签一样的组件来进行UI渲染。它目前是最流行的JavaScript库之一，它拥有强大的基础和庞大的社区。

创建一个React App

$ npm install -g create-react-app
$ create-react-app my-app

$ cd my-app
$ npm start

效果图

什么是React Native？

React Native是仅使用Javascript的移动应用构建框架。它使用与React相同的设计，包含丰富的UI库和组件声明。

它使用与常规iOS和Android应用程序相同的基本UI构建块。

使用React-Native最赞的地方是还可以通过原生的Objective-C, Java, 或者Swift来构建组件。

• React VS React Native：

• React Native bridge：

创建一个React Native App

• 环境安装

查看官网http://facebook.github.io/react-native/docs/getting-started.html

• 创建项目

$ react-native init my-rn-app

• 运行项目

To run your app on iOS:
   cd /Users/liyuechun/Pictures/my_rn_app
   react-native run-ios
   - or -
   Open ios/my_rn_app.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/liyuechun/Pictures/my_rn_app
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

• 效果图

iOS	Android

联系我

开始使用React VR

React VR旨在允许Web开发人员使用React的声明方法(特别是React Native)来创作虚拟现实（VR）应用程序。

React VR使用Three.js 来支持较低级别的WebVR 和 WebGL API. WebVR是用于访问Web上VR设备的API。 WebGL（Web图形库）是一种无需使用插件即可用于在任何兼容的Web浏览器中渲染3D图形的API。

React VR类似于React Native，因为它使用View，Image和Text作为核心组件，并且支持Flexbox布局。 此外，React VR还将Pano，Mesh和PointLight等VR组件添加相关库中。

在本篇文章中，我将带领大家创建一个简单的VR应用程序来学习如何创建一个全景图片，3D对象模型，按钮和flexbox布局的使用场景。我们的模拟应用程序基于React VR的两个网格和布局的官方示例。

该应用程序将渲染一个能够放大和缩小的地球和月球的3D模型，效果图如下所示：

这些模型中，它们的尺度和旋转不是地球-月球系统的真实复制品。 这种关系只是为了展示React VR的工作原理。 与此同时，我们将解释一些关键的3D建模概念。 一旦掌握了ReactVR，就可以随意创造更多的作品。

你能够从 GitHub找到最后的项目源代码。

要求

到目前为止，虚拟现实是一项相当新的技术，开发或测试我们的VR应用程序的方法很少。

WebVR 和 Is WebVR Ready? 可以帮助您了解哪些浏览器和设备支持最新的VR规范。

但是你也不必过于担心， 你现在不需要任何特殊的设备，例如： Oculus Rift, HTC Vive, 或者 Samsung Gear VR 来测试一个WebVR APP。

下面是你现在 所需要 准备的：

• 一台Windows／Mac电脑。

• Google浏览器。

• 最新版本的Node.js

如果您也有Android设备和Gear VR耳机，您可以安装Carmel Developer Preview浏览器来探索您的React VR 应用程序。

创建项目

首先，我们需要使用NPM来安装React VR CLI工具：

$ npm install -g react-vr-cli

使用React VR CLI来创建一个名字叫做EarthMoonVR的新项目：

$ react-vr init EarthMoonVR

在创建过程中您需要等一会儿，这将创建一个EarthMoonVR目录，目录里面就是相关项目文件，如果希望创建速度快一些，您可以安装 Yarn 来提高速度。

一旦项目创建完毕，可以通过cd切换到EarthMoonVR文件路径下面：

$ cd EarthMoonVR

在终端通过npm start来启动程序以便查看效果：

$ npm start

在浏览器中输入http://localhost:8081/vr。稍微等一会儿，即可查看到VR效果：

React VR

下面是初始化的React VR新项目的项目结构:

+-__tests__
+-node_modules
+-static_assets
+-vr
\-.babelrc
\-.flowconfig
\-.gitignore
\-.watchmanconfig
\-index.vr.js
\-package.json
\-rn-cli-config.js
\-yarn.lock

我将index.vr.js文件呈现高亮状态，它包含了您应用程序的源码，static_assets目录包含像图片和3D模型的外部资源文件。

你可以从这里了解更多项目结构。

index.vr.js 文件的内容如下:

import React from 'react';
import {
  AppRegistry,
  asset,
  StyleSheet,
  Pano,
  Text,
  View,
} from 'react-vr';

class EarthMoonVR extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={
   {
            backgroundColor:'blue',
            padding: 0.02,
            textAlign:'center',
            textAlignVertical:'center',
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

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

我们可以看到React VR使用了ES2015 和 JSX。

这个代码通过React Native packager进行预编译，它提供了(ES2015, JSX)编