开始使用 React-VR

React-VR 是 Facebook 团队推出的使用JavaScript来开发VR应用的框架,和 React 相似,你可以通过编写组件的形式来进行程序的开发。(写过 React-Native的应该可以很快上手吧。)

快速开始

首先我们需要安装脚手架程序:

npm install -g react-vr-cli

安装成功后,我们就可以开始创建项目了。

react-vr init vrexamples

如果初始化过程中,遇见了提示 yarn 依赖安装的问题,你可以进入项目目录,重新安装就好。
初始化成功后,我们进入项目,然后输入npm start ,
访问: http:/localhost:8081/vr/ 就可以看到web上的内容了。如果你有VR的设备,你也可以戴上体验下。

编辑代码

这个时候我们打开编辑器, 查看index.vr.js 的源码,写过React-Native的是不是有种泪奔的感觉,的却是这样写的:

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

class WelcomeToVR extends React.Component {
  render() {
    // Displays "hello" text on top of a loaded 360 panorama image.
    // Text is 0.8 meters in size and is centered three meters in front of you.
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

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

既然有 React 这个关键词,大家应该也就能够理解基本的结构了,其中 View 可以看到有两个子组件,PanoText

Pano 表示渲染一个360度照片的和盒子,你可以环绕四周看到周围的景色。

Text 顾名思义,就是渲染一段文本,你可以定义它的样式和位置。

AppRegistry 最后我们需要把这个组件注册App中。

我们可以试着改变一下Pano的图片,使用 游戏的房子 试下效果:

React VR 官方提供了演示的 Demo 如果 Amazon S3 被墙了可以下载这个 https://pan.baidu.com/s/1eR5BAeQ。

核心组件

  • View是程序中可能用到的最多的组件,它可以使用 flex 布局,以及颜色边框这些样式。

  • Image 用于展示图片,你可以设置它的背景,边框以及 transform 这些。其中 crop 可以指定显示的 UV 范围。

比如我们添加一个 钢铁侠图片

 <View>
        <Pano source={asset('vrcase02.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
        <Image
          style={{
            width: 1,
            height: 1,
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            transform: [{translate: [0, 0, -3]}],
          }}
          source={require('./static_assets/Iron-Man.png')}
        />
      </View>
  • Text 用于展示文本,你可以指定它样式和位置。

React VR 还有很多其他组件 Model 可以用来渲染 3D对象,Scene 场景,VrButton 按钮等。我们可以关注 F8 的大会的最近分享了解更多。

官方文档