查看详情

React-360 源码阅读【6】- Video 分析

前面我先看了 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, 详情 »

查看详情

创业日记-20180916

嗯,通过最近的连载,确实自己未来一段事件都会 Focus 到 Web-VR,虽然这一个全新的领域,但是自己很开心,可以通过前端去接触更多图像学的内容,由于这个细分领域,很多开发者还是对此表示陌生,自己会可能去写一些关于 《WebVR Guide》, 去分享这一块一些细节和开发的经验;为什么会选择这一领域,自己最开始是接触 PS 的,前些天,Momoko 给我发了自己做的 2010 年的贺卡: 因为起初自己确实会偏爱图像处理一些,当然也是偶然的机会,接触到了 Web 前端,自己毕业设计也很幸运接触了 Three.js,那个时候做了火灾烟雾模拟的课题。所以自己深感自己对于这个领域的兴趣和热爱: 上面是 2018 年的贺卡,因为我还是相信任何付出和积累都或多或少能够带来回报,无论你起点是什么,加油吧~ 我们还年轻,才华无限~ 终于完结了 《请回答,1988!》。大概这是近几年看的很棒的电视剧,犹如13年看文章的《奋斗》。大概这个阶段,你更加会去辨别友情,爱情,亲情,也更能够去经历这些。话说也会怀恋小学时候,邻里孩子们聚在一起看电视的场景。当然也很遗憾, 详情 »

查看详情

React-360 源码阅读【5】

今天我们看下 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 源码阅读【4】- 初试 React-360-Web

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 项目迁移 Webpack Babel7

不就前写了一篇 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& 详情 »

解决 Nginx 413 Request Entity Too Large

最近做 Node 上传服务,NGINX 代理,因此本地测试没问题,但是发到线上 代理抛出异常; 其实这个也很简单,重新配置下 Nginx 的上传限制: server { ... listen 80; server_name localhost; client_max_body_size 20M; ... } 详情 »

查看详情

React-360 源码阅读【3】

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 源码阅读【2】

接着前文 《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-360 结构

终于开始准备连载这一系列,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: 详情 »