混迹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代码,而不是