admin 管理员组

文章数量: 1184232

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

本文标签： 入门 React

版权声明：本文标题：React 360入门介绍 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1755026397a3062169.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。