WEB前端全景体验框架React360——用React创建360全景VR体验

混迹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的工作流程，可以参见下图：

（工作流程图）

基于JavaScript 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这类