前言   

混迹VR届的发烧友兼开发者们一定不要错过这款FaceBook推出的跨端VR开发框架——React360，称为360全景体验框架更为准确，因为其前身是FaceBook和Oculus2017年发布的一个叫作“Racet VR”的JS库，用来在web端创建3D和VR体验。后来Oculus使用该框架的原生C++版本构建自己部分应用，随着时间推移，由于要求框架解决不同需求，项目的APIs开始发生分叉。为了避免两个系统的混淆，开源框架重命名为React360，这更好地反映它的使用场景：创建横跨PC，移动端，VR设备上的沉浸式360体验。

可以先看一下官方示例效果，这是一个稍复杂的应用，加入了3D模型，在3D模型和2D面板间共享数据。

体验

工作原理

官方提供了构建工具react-360-cli，内部使用和ReactNative一样的打包工具Metro，基于JS Bundle在自己的JS Runtime中进行解析，通过事件机制与客户端通信，其实该框架还有很多方面相像或依赖于RN。构建一个React360应用程序需要完成两部分，需要渲染的Raect组件和Runtime定义（这种角色划分直接借鉴于React Native）。这也很清楚地反映出React360的工作流程，可以参见下图：
（工作流程图）

基于java script Core/V8引擎，React360提供了Runtime需要的APIs，在客户端（头戴设备，移动端，浏览器等）完成构建界面，web端的渲染底层依赖于Three.js，这是业界较为成熟的3D图形框架，一般需要手动设置3D网格和纹理，而框架中的react-360-web模块隐藏了这些细节。当创建了新的React组件，框架会指示Runtime将它们添加到3D场景中，当用户提供输入将作为事件通过Runtime传递给React，这两部分相互合作形成一个凝合系统。如果想在系统中分享数据，就需要借助框架提供的Native Modules。

需要注意的是，由于JS运作在浏览器中是单线程的，应用中任何阻碍行为都有可能造成渲染延迟，这对于VR这种即时性很强的体验是十分致命的，所以框架将React组件和渲染过程放在分离的上下文中情有可原。

默认情况下，React360使用Web Worker执行你的React代码，而不是标准浏览器，这就意味着在组件定义的文件中访问不到原生window.location这类APIs。并不是严格意义上的无法访问，事实上当你打印window对象时React360提供了一个DedicatedWorkerGlobalScope类型实例，它包装了window的一些内容。

Surfaces
Surfaces实际上是一个载体，允许你添加2D内容到3D场景，开发者依据像素定义Surfaces宽高，React360获取信息产生合适尺寸的对象，官方介绍了两种类型的Surfaces，Cylinder和Flat。一个Cylinder Surface让2D内容投射到半径为4m的Cylinder内部，其实是假想的圆柱模式。一个Flat Surface位于4m半径的球体外侧，一个假想的球体模式。APIs也提供了像yaw（垂摇），pitch（纵摇），roll（横摇）这些物体自由度控制信息。

为了将React组建附着在Surface上，需要使用AppRegistry注册组件，又一次与ReactNative相似。这会告知Runtime你的组件通过id字段被唯一确定。

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

同时在Runtime文件中引用。

r360.renderToSurface(
  r360.createRoot('MyAppName'),
  r360.getDefaultSurface(),
  'default' /* 可选项，引用的surface的名称 */
);

Components

官方提供了呈现2D，3D内容的展示组件和交互按钮组件。

• View：UI构建最基本的元素，被用来组织实体或其他View元素，也是输入事件的容器。
• Image：呈现2D图像
• ENtity：渲染3D对象，支持obj，mtl，gltf格式文件
• VrButton：是一个实用程序类，是捕获事件的包装器。可以检测各种输入设备上单击类型操作，这是通过一个可以监听按键事件的内部状态机做到的。

Layout 

支持2D Surface布局，完全以Flexbox格式布局，又是一个和RN相似的点。支持3D Space布局，使用Entity组件时候，通过transform完成3D对象放置，x轴指向用户右侧，y轴指向上方，z轴指向用户后方。

APIs
官方提供了常见的APIs，例如来自React Native的Animated；键值对存储系统AsyncStorage；值得一提的是提供的ControllerInfo可以被用来响应控制器的connect/disconnect事件，获取关于所连接的游戏手柄和控制器的静态信息，比如唯一标识符，按钮，轴数等信息。环境API Environment用来改变场景的背景，包括图片，音频，视频。

实例解读

利用react-360-cli生成的项目中主要有这三个文件：

• index.js：放置应用的主要代码，React组件的地方，在这里可以组织拆分多个组件
• client.js：也就是Runtime的配置，这部分连接浏览器环境和React应用。根据代码示例看到主要完成三件事：（1）创建React360一个新实例，加载并附加React代码到DOM特定位置，这里也是传递初始化选项的地方。（2）将你的代码挂载到3D场景中，在index.js中声明的挂载点附着在应用程序的默认曲面。（3）添加背景信息，这个部分可选，允许代码仍在加载过程中展示图片，让用户尽快看到一些内容。
• index.html：提供安装JS代码的挂载点。

import {ReactInstance} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    ...options,
  });

  r360.renderToSurface(
    r360.createRoot('SlideshowSample', {
      photos: [
        {uri: './static_assets/360_world.jpg', title: '360 World1', format: '2D'},
        {uri: './static_assets/360_world2.jpg', title: '360 World2', format: '2D'},
        // Add your own 180 / 360 photos to this array,
        // with an associated title and format
      ],
    }),
    r360.getDefaultSurface(