React-AR

React是一款来自Facebook的开源JavaScript库，它能够轻松建立交互式用户界面。React VR能够在虚拟现实中建立UI和3D场景，它将React提高到一个新的水平。
React VR 可以让您使用 JavaScript 构建 VR 应用程序。它使用与 React 相同的设计，让您经过声明式的组件构建丰富的 VR 世界和 UI。
React VR 是为 VR 应用而建立的框架，运行在 Web 浏览器中。它将现代 API（例如 WebGL 和 WebVR）与 React 的声明能力结合起来，经过各类设备提供适用于消费者的体验。

1、建立你的第一个项目

准备：

安装用于构建和管理React VR应用程序的依赖项：Node.js(4.0版本及以上)和React VR CLI

建立项目：

1. 新建一个项目，并切换到新建项目内
2. 安装React VR CLI工具，输入：npm install -g react-vr-cli
3. 使用React VR CLI工具在“WelcomeToVR”文件夹下建立一个新应用程序，并安装所需的依赖关系，输入：react-vr init WelcomeToVR
4. 将路径切换到 WelcomeToVR 项目目录:cd WelcomeToVR
5. 使用start命令初始化本地开发服务器，输入：npm statrt
6. 在浏览器中输入 http://localhost:8081/vr/index.html.将看到一个vr效果。

项目结构

 最初运行“react-vr”工具时，它会在项目目录中建立一堆文件。

• index.vr.js 是你React VR应用程序的入口。它包含了你的应用程序源码。
• static_assets包含了全部的外部资源文件。图片视频等相关资源文件都须要放置在这里。他们能够经过asset(path)方法关联相关资源文件，它将会自动解析正确的路径。
• vr包含支持应用程序运行时所必须的代码。这些文件你不须要做任何修改。这个目录下面有一个index.html的文件，它是加载你的应用程序的web 页面。
• package.json 是你的项目的配置文件。它会告诉npm如何安装项目的外部依赖。例如：React VR和OVRUI。

项目内容

在第一个初始化的项目的文件夹中能够看到index.vr.js文件。这个文件是React VR应用程序的入口文件。

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应用程序由一系列组建渲染而成 - 每个组建都会经过render函数来对本身进行渲染，与此同时也会根据响应刷新本身。 WelcomeToVR代码里面定义了一个顶级的组建，而且决定如何渲染。
代码从导入依赖关系开始。接下来，它声明了WelcomeToVR组件，包括它如何渲染。代码末尾经过AppRegistry来进行注册。() => WelcomeToVR是一个箭头函数，必须返回一个顶级组建，其他的能够放心的忽略。
咱们看下组件的结构。咱们返回一个View组件，它有两个子节点：'Pano'和'Text'： 
1. PANO在渲染了360度图片的空间里建立了一个盒子。它是一个组建，它渲染了你看见的这个案例中的环境。
2. TEXT在3D空间中渲染一个字符串。这个特别的TEXT标签已经被设计放置在整个3D空间的中央。咱们将在其余地方更详细的讲解更多的样式的使用。
3. VIEW组建一般会被用做一个容器。它们能够包含不少其余的组建，它们能够提供空间以及设计成你想要的UI样式。咱们的组件建立一个PANO和一个TEXT包裹在VIEW中。

发布你的项目

创建生产环境

React VR附带一个能够将全部内容都打包成几个您能够放在网络服务器上文件的脚本。从你的项目根目录，运行以下：npm run bundle
这将在vr中建立一个名为build的新目录。内部是您的应用程序文件的编译版本。这些能够放在Web服务器上，只要它们放在同一个目录中，它们就须要做任何改变。
若是你是用任何的外部资源(asset()),

您还须要将您的static_assets目录与文件一块儿复制，以便您的应用程序能够引用它们。此时，您的目录结构应相似于如下内容：

Web Server
├─ static_assets/
│
├─ index.html
├─ index.bundle.js
└─ client.bundle.js

　

在现有的网页中集成

若是要将VR体验嵌入到网页中，推荐的方法是使用<iframe>标签。将src属性设置为指向项目的index.html文件，并在iframe上设置适当的大小。

参考：http://react-vr.org/cn/index.html