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