前面我先看了 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, 详情 »
嗯，通过最近的连载，确实自己未来一段事件都会 Focus 到 Web-VR,虽然这一个全新的领域，但是自己很开心，可以通过前端去接触更多图像学的内容，由于这个细分领域，很多开发者还是对此表示陌生，自己会可能去写一些关于 《WebVR Guide》, 去分享这一块一些细节和开发的经验；为什么会选择这一领域，自己最开始是接触 PS 的，前些天，Momoko 给我发了自己做的 2010 年的贺卡: 因为起初自己确实会偏爱图像处理一些，当然也是偶然的机会，接触到了 Web 前端，自己毕业设计也很幸运接触了 Three.js，那个时候做了火灾烟雾模拟的课题。所以自己深感自己对于这个领域的兴趣和热爱： 上面是 2018 年的贺卡，因为我还是相信任何付出和积累都或多或少能够带来回报，无论你起点是什么，加油吧～ 我们还年轻，才华无限～ 终于完结了 《请回答，1988!》。大概这是近几年看的很棒的电视剧，犹如13年看文章的《奋斗》。大概这个阶段，你更加会去辨别友情，爱情，亲情，也更能够去经历这些。话说也会怀恋小学时候，邻里孩子们聚在一起看电视的场景。当然也很遗憾， 详情 »
今天我们看下 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 详情 »
不就前写了一篇 webpack 4 升级迁移 这里简单说下 React 项目的一些配置； 首先我们新建项目 react-web ，然后进入项目初始化 package.json ； cd react-web && npm init 接下来我们安装 webpack ，这里需要注意一点，是命令行已经单独提取出来了，我们不仅需要安装 webpack 还需要安装 webpack-cli 。 npm i webpack webpack-cli --save-dev 接下来我们开始安装和 react 相关的依赖包； npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev 接下来我们初始化 babel 的配置文件。 touch .babelrc 然后把下面内容粘贴进去； { "presets": ["@babel/preset-env& 详情 »
最近做 Node 上传服务，NGINX 代理，因此本地测试没问题，但是发到线上 代理抛出异常； 其实这个也很简单，重新配置下 Nginx 的上传限制: server { ... listen 80; server_name localhost; client_max_body_size 20M; ... } 详情 »
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: 详情 »
