React-360 框架使用和经典实践总结。
8 篇文章由于 react-360 已经很久没有进行代码变动了，让人都很怀疑这个项目是不是快要关停了，最近 OC6 也没有发布新的 设备，让人还是很担心这个项目的未来。 不过最近开发者一，统一回复了大家 传送门 #75 作者回答了关于 WebXR 的集成和最近一些变化, 大概总结下: 作者表示一直在默默的工作，但是需要有明显的变化才会加快目前代码的变动，新的架构方式，可以关注 packages 增加内容 WebXR 草案上周才刚刚结束，因此我们会保持等待的姿势等待 WebXR 正式推出，当前代码的设计会非常方便的进行对 WebXR 的支持 计划取消掉 React-Native 的引入，我们会自己实现模块管理和渲染的方式，这位有助于提升在 Oculus go 或者 Oculus Quest 上的渲染速度 总之，大家需要等待，并保持耐心。 详情 »
react-360 二次开发的一些心得 前面花了一些时间介绍 《React-360 源码阅读 - 一张图带你理解 React-360 结构》，有兴趣可以阅读下。但是 React-360 相对我们而言，目前也还不是足够稳定，以及有的需求点他们也并未实现，因此很有可能我们需要进行二次开发； 因此我们首先需要去他们 Github 上 fork 一份， https://facebook.github.io/react-360/ 我们 clone 到本地的时候，可以通过相对目录来实现我们项目对二次开发的 React-360 的引入了。 然后我们在本地项目里通过软连接来实现 node_module 的文件替换: cd node_modules && rm -rf react-360-web # 建立 react-360-web， 目录根据实际情况传入 ln -s ../../react-360/React360 react-360-web 初次之外，我们需要在 rn-cli.config. 详情 »
前面我先看了 React-360 源码阅读【5】- 核心 Compositor 里的内容，其中里面涉及了 video 作为背景的内容，今天分析一下 video 目录里面的内容；实际上我们如果要设置全景视频，可以直接通过调用; // Creating a Video Player const player = r360.compositor.createVideoPlayer('myplayer'); // Set the video to be played, and its format player.setSource('path/to/video.mp4', '2D'); 当然，这里我们主要分析 video 目录下的文件都做了什么事情。 getSupportedFormats.js const FORMATS = { ogg: 'video/ogg; codecs="theora, 详情 »
今天我们看下 compositor。顾名思义，compositor 应该是你第一个接触到的 访问属性，我们不妨回顾下官方代码 Client 里面的内容: function init(bundle, parent, options = {}) { const r360 = new ReactInstance(bundle, parent, { // Add custom options here fullScreen: true, ...options, }); // Render your app content to the default cylinder surface r360.renderToSurface( r360.createRoot('hello_360', { /* initial props */ }), r360.getDefaultSurface() ); // Load the initial environment r360.compositor.setBackground(r360.getAssetURL('360_ 详情 »
react-360-web 顾名思义，就是在 web 端 运行的 react-360 的 SDK. 就像文档里面描述的; react-360-web 是 React 360 的环境运行时，它可以完成应用在 Web 端的渲染；它通过 Canvas 以及 WebVR API 来实现在 头显设备和浏览器的运行。 接下来直接看 React360.js // 用于定位 react vr 打包后的 bundle 地址 import bundleFromLocation from './js/bundleFromLocation'; import createRootView from './js/createRootView'; // 用于坐标的变换 import Location from './js/Compositor/Location'; // 一些常用的数学类库封装 import 详情 »
React-360 源码阅读【3】 上一篇简单说了下 scripts 目录究竟用来做什么，今天我们开始进入到正题，我们看下Libraries 下究竟做了什么； 其实和 react-native 下的目录一致，罗列我们可用的组件和模块文件；比如: Pano Camera Sound ... 我们看下入口文件 react-360.js const React360 = { // React Native overrides get View() { return require('View'); }, get Image() { return require('Image'); }, get Text() { return require('Text'); }, // VR Components and modules get AmbientLight() { return require('AmbientLight'); }, get Box() { return require('Box'); }, get LiveEnvCamera( 详情 »
接着前文 《React-360 源码阅读【1】》，下面主要分析构建这一部分业绩是 /scripts 目录下的内容； 结构 - build-packages.js - bump-versions.js - bundle.js - install-deps.js install-reps.js 在说这片代码之前，我们需要先去 packages/react-360-cli/src/getPackager.js 了解下如何判断是否支持 yarn。 const child_process = require('child_process'); let packager = null; function getPackager() { if (packager !== null) { return packager; } try { child_process.execSync( /^win/.test(process.platform) ? 'yarn 详情 »
终于开始准备连载这一系列，React-360 前身就是 React-VR。大概在 2.0.0 的时候还是使用 React-vr 来命名，但是随后重新开始了命名；因此安装的一些包的名称也有变化了。 比如我们在初始化的项目时候，需要安装 $ npm install -g react-360-cli 小插曲 为什么更名？ 2017 年 Facebook 发布了 JavaScript 框架 react-vr ，它是基于 JS 来实现用于在浏览器创建 VR 内容的框架。但是在同时， oculus 开始基于 C++ 开始编写 API ，因此为了避免两者出现一些困扰，我们重新命名了框架 react-360, 专注于创建 沉浸式的 VR 内容，同时支持 PC, 手机以及 VR 设备； 阅读之前 在具体阅读之前，建议了解下下面内容; React(https: 详情 »
