React 360入门介绍

React 360是什么？

• 前身叫React VR，是Facebook和Oculus在2017年发布的项目，后来为了避免跟Oculus一个项目搞混乱，重新取名为React 360，更贴切地表达出构建360沉浸式体验的特色

• React 360 是一个用于构建VR全景360体验的网页应用框架，基于React

• React 360 提供了一些控件，用于快速创建360度沉浸式的内容

• 跨平台，支持电脑、移动设备、VR设备

• 支持多种格式的全景视频

如何部署？

• // 首先要安装 Node.js

• // 安装 React360 的 CLI
npm
  install -g react-360-cli

• // 创建工程
react-360
  init Hello360

• // 启动服务器 

  npm start

• 打开浏览器看效果，http://localhost:8081/index.html

Demo里的关键文件

• index.js

  这是应用的主要代码，负责放置所有的React代码。在此，我们可以看到界面上的内容是如何用React代码组合起来的

• client.js

  Runtime，负责连接浏览器和React应用。主要做三个事情：1、创建React360对象，加载React代码，绑定到DOM里（应用初始化参数也此设置）；2、转换React组件到三维场景里；3、加载用于loading的全景图片。

• index.html

  Web应用的入口，在这加载js代码

Runtime是什么

• 每个React 360应用都有两部分组成：React代码和 Runtime

• Runtime 负责转换React组件到三维场景里的元素

• 主要目的是解决一个问题：因为web浏览器是单线程，任何堵塞行为都会影响界面渲染，对于高度要求低延迟的VR设备来说，这是很难以接受的

• 实现方式通过两个Executors：1、Web Worker Executor；2、Iframe Executor

基本组件

• View 基本组件
• Text 文字组件
• Image 图片组件
• Entity 用于渲染三维物体
• VrButton 按钮组件

与A-Frame区别

• A-Frame提供了丰富的HTML标签组件，像球、立方体等，搭建复杂的三维场景比较简单
• React 360 比较擅长构建UI控制为主的应用

与Three.js区别

• Three.js是一个在网页上渲染三维物体的引擎，比较底层，需要自己处理网格、材质等原始文件
• React 360封装了很多接口，让开发者不用在意底层的图像渲染等操作，只需专心处理自己应用的呈现效果和交互

官网地址：https://facebook.github.io/react-360/
推荐网址：http://hidavid.cn