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