这一节开始，将整理Pano2VR软件的基本操作，软件使用版本为：Mac Pano2VR pro 5.0.2-64bit。

感谢持续关注的朋友们，让我们一起努力爱学习吧！

一、Hello VR&VT

与程序猿开始学习一门语言一样，第一个demo必然是HelloWorld，那我们的Pano2VR学习也从Hello VR&VT开始。

首先我们要准备一张全景图，360°或者720°的全景都行，这里我准备了一张720°的全景图如下所示：

前一篇文章有写全景图需要使用全景相机拍摄或者由多张图片拼接而成，那暂时没有设备的同学们怎么办？

答案就是用手机就行，目前市面上也有许多全景合成拍摄的App，例如得图的“转转鸟”就是一款傻瓜式的球形全景相机App。当然用手机App拍摄合成出来的全景图像质量就各有千秋了，不过用来做demo还是可以的，亲测转转鸟感觉挺不错的，最主要的是操作简单。(ps:强调说明一下，我不是得图的员工哈~)

有了一张全景图后，我们来打开Pano2VR软件进行处理，假设大家也已经完成了破解，软件打开界面如下所示：

软件顶部的菜单栏包括Input(导入)、Edit(编辑)、View(视图)和Tools(工具)，中间部分左侧区域为导入菜单及参数设置界面，正中间带网格的(Front)则为我们的全景漫游图处理区域，中间部分右侧区域为导出文件设置界面，软件底部则为各全景图像文件预览区。

下面我们点击Input选择导入一张全景图，导入后正中间的全景图处理区域则有了预览效果，我们通过拖动鼠标就可以查看整个漫游全景了，如下图所示：

接下来我们在右侧的导出区域选择HTML5，然后选择Generate Output，如果项目还没有保存会先提示你进行保存，保存后按提示生成相应的导出文件即可。相关的文件导出之后，软件会自动用浏览器打开，我们的Hello VR&VT demo就做出来了，拖动鼠标可以查看全景如下图：

二、小结

本节内容主要是简单整理一下Pano2VR生成全景漫游的操作，导出的文件为HTML5格式，全景图拍摄可以使用手机App进行拍摄合成。接下来的一节，将具体对导入导出文件的相关参数设置，以及导出文件的资源文件进行详细的整理。

本节完！

8网友装修日记

08我家网从2008年成立至今，沉淀了1W多篇来自网友真实记录分享的原创装修日记，这些日记中分享的宝贵经验帮助了无数网友顺利完成装修。

今天为同学们分享到的是来自08网友@山水有相逢的日记，他在装修日记里记录了自己如何一步步搭建入门级家庭影院。

搭建思路

1.屏幕的选择

电视的画质无疑比投影好得多，但是视觉是这样的，同尺寸二千多的小米不放在八千多的sony边，一般人应该感觉不到小米有多差，但是屏幕的大小一下就能感受大。所以选择了能投大屏又相对便宜的投影。

投影又分激光和传统灯泡投影，激光的超短焦搭配固定抗光幕不适合我家电视柜，激光智能微投性能又相对较差，所以还是选择了传统的灯泡投影。

我家电视柜最大能放120寸，再大就没地方放音箱了，透声幕也不是我这个入门级玩的，于是尺寸就定在120寸。但是我家做完电视柜后两面之间只有3米6左右，要投120寸只能用短焦的。1080分辨率的短焦选择很多，热门的明基1070,1120都是短焦，但是4k的短焦很少。装修时水电到入住一般还有段时间，就先埋了支持4k的线，留着120寸幕布的位置。

2.音箱的选择

以前听音响论坛的前辈说过，玩声音是3分器材，7分环境，烧器材烧到最后都会变成烧房子。

我家也没有专门的影音室，客厅地上还是贴着瓷砖漫反射严重，加上高层怕领居投诉，所以什么功率，音质，混响延时，7.1,5.1.2全景声都不考虑了，唯一的要求就是能听出前后左右的响声就行了，俗称“听个响”。所以选择入门的功放＋5.1音箱应该就够了。

3.座椅的选择

买的功能沙发，芝华士，6千多；隔壁乐至宝2万多的那套去试坐时短时间也没试出什么名堂，考虑到家里沙发的利用率不会很高，就选了便宜的。

以上就是大概的搭建想法，投影加支架预算10000，幕布预算3000，音箱加功放预算6000，播放器预算1000，硬盘预算1000，电影片源预算500，预埋线材预算1000，沙发反正要买的不算，搭建一个入门的短焦4k+5.1系统加起来总共大概22500。当然还有很多隐性细节，比如客厅用吊装投影就不能装吊灯了，都是要在设计时就考虑进去的。

线材选购

我家的线材主要是音箱线（喇叭线）和HDMI线。

音箱线买的50米200芯，后来才知道其实入门级买50芯的都足够了，线太粗反而导致我后面音箱壁挂穿孔时遇到了很大的麻烦。

hdmi线买了两根，接不同的点，其实这种预埋又容易出问题的线最好一路埋两根。

我家的布局思路

目前新的功放一般都带hdmi多路输入和多路输出，支持4k@60hz，很适合作为整个系统的中枢。

所以布局时可以把功放放在投影幕布下方的电视柜里，输入设备如电视机顶盒，高清播放器，游戏机，htpc，nas都可以放在边上，直接用短的hdmi明线接功放，通过控制功放来切换输入源。

功放的视频输出可以直接接电视，也可以通过预埋的长hdmi暗线走到沙发后面墙上的投影处。功放的音频输出通过预埋的音频线直接通到前面的左中右三个音箱和沙发后面的后置音箱处。低音炮一般会自带一根特殊的音频线，可以预留走线的洞连接功放。

5.1的五个无源音箱只需要接音箱线不需要再接电源，只有低音炮的位置要预设电源插座。

▲标准的5个无源音箱摆放方式，低音炮放在前方的任意位置都可以，功放和播放器一般就放在中置音箱附近。

电线方面，主要是记得预先看好投影幕布尺寸，在吊顶边留好投影幕布和投影仪的电源线。电视柜里面我没留太多插座，因为考虑到设备多了后肯定要用到智能插座，直接买几个插线板放柜子里面会更方便。

幕布丨播放器丨硬盘

1.幕布

讲起幕布就很心酸，因为物流不上楼，是自己和物业一步步抬上楼的。电梯是不可能进的，即使是走应急楼梯，也几乎没有空间了，一路卡着墙上楼，再长10厘米就只能吊上楼了。建议要买的朋友先量下自家楼梯的尺寸。

▲我家选的是这个拉线幕布，相对会比较平整

如果家里准备要装幕布，要注意三个节点：

1.在设计时考虑灯光问题，客厅吊灯太低会影响吊装投影，还有幕布那一侧有筒灯或射灯的话最好单独设一个开关，我家就吃了这个亏。

2.在水电定位时就留好电线，预埋暗盒。以前还要预埋幕布和投影联动的控制线，现在可以用万能射频遥控器替代，可以不埋了。

3.在吊顶交底时和木工师傅讲好投影凹槽的具体尺寸，不能只留幕布宽度，还要考虑插座的空间。不管幕布是侧装还是顶装，都要在相应的吊顶处留足够厚的板子保证能够承重。

2.播放器

在芝杜z9s、海美迪q5plus之间徘徊了，最后选的芝杜，主要看中他的openwrt系统，可以兼做下载机用。

到手之后发现确实盒子操作比较人性化，一个遥控器就可以完成各类操作，海报匹配，视频，音轨，字幕，快进快退的设置都很简单，不像pc上那些播放器难上手。

3.硬盘

4k原盘动不动就80多G，可是大容量机械硬盘一直价格坚挺，为了省钱，把目光投向了亚马逊海外购。正好碰上免费prime体验活动，买了个8T和一个20T的，虽然不是历史低价，但也比国内便宜多了。

音箱丨投影支架丨投影仪

1.音箱

本来一直考虑买雅马哈的音箱，无奈小箱子便宜得让人不放心，好一点又只有大落地箱，最后选了淘宝比较常见的哈曼卡顿qb30音箱+天龙x550功放的组合。

安装过程主要是拨音箱线头，把露出的铜丝插到功放和音箱接线柱，还有打后置音箱的壁挂。整个过程提心吊胆的，生怕预埋的音箱线出问题。

主要遇到三个问题：

1.音箱线太粗了，壁挂支架的孔钻不进去，最后只能用电钻暴力扩孔。

2.预埋线没留标记，功放处五组线不知道哪根接哪里，测试浪费了点时间。

3.后置音响预留的位置太高了，导致有一截线露在外面。

同时音箱附带了一大堆线材，如果装修周期不长的朋友可以先买音箱用附带的线预埋。

选电视柜的时候请一定要注意柜子深度，功放一般都是30多厘米深起步，但是后面的插头还要占一点空间，我家350深的柜子功放再怎么塞都还是凸出来了一点，至少要做400厘米深。

2.投影支架

这种支架的好处就是哪怕底座装歪了也能调整回来，缺点就是可调整的地方有六处以上，要一个个部位慢慢固定。

3.投影仪

先推荐个网站，可以模拟各种型号投影仪的安装尺寸：http://www.reviewtranslations.com/projection_calculator.html

（需复制链接到浏览器打开）

最后某宝入手：

投影安装时的两点心得：

1、是在保持预设画幅的前提下，投影安装的位置要让镜头尽量保持在短焦端，离镜头的短焦极限点越近，离幕布越近，幕布的亮度就越大；

2、是镜头位移功能基本无损画质，梯形校正功能对画质影响较大，尽量选择前者调整；

3、所有投影厂家给的投射距离都是幕布到镜头的距离，幕布到墙的距离要加上投影仪本身宽度和投影仪后面插线的空间（至少留8厘米）；

4、投影仪的镜头一般不在投影仪的正中间，为了镜头能对准幕布中间，投影支架要装偏一点。

注：以上所有产品及信息，均由网友友情分享，具体请自行抉择。

图片来源：08我家网编辑助理：爱修下水道的美人鱼

迹VR届的发烧友兼开发者们一定不要错过这款FaceBook推出的跨端VR开发框架——React360，称为360全景体验框架更为准确，因为其前身是FaceBook和Oculus2017年发布的一个叫作“Racet VR”的JS库，用来在web端创建3D和VR体验。后来Oculus使用该框架的原生C++版本构建自己部分应用，随着时间推移，由于要求框架解决不同需求，项目的APIs开始发生分叉。为了避免两个系统的混淆，开源框架重命名为React360，这更好地反映它的使用场景：创建横跨PC，移动端，VR设备上的沉浸式360体验。

可以先看一下官方示例效果，这是一个稍复杂的应用，加入了3D模型，在3D模型和2D面板间共享数据。

体验

工作原理

官方提供了构建工具react-360-cli，内部使用和ReactNative一样的打包工具Metro，基于JS Bundle在自己的JS Runtime中进行解析，通过事件机制与客户端通信，其实该框架还有很多方面相像或依赖于RN。构建一个React360应用程序需要完成两部分，需要渲染的Raect组件和Runtime定义（这种角色划分直接借鉴于React Native）。这也很清楚地反映出React360的工作流程，可以参见下图：

（工作流程图）

基于JavaScript Core/V8引擎，React360提供了Runtime需要的APIs，在客户端（头戴设备，移动端，浏览器等）完成构建界面，web端的渲染底层依赖于Three.js，这是业界较为成熟的3D图形框架，一般需要手动设置3D网格和纹理，而框架中的react-360-web模块隐藏了这些细节。当创建了新的React组件，框架会指示Runtime将它们添加到3D场景中，当用户提供输入将作为事件通过Runtime传递给React，这两部分相互合作形成一个凝合系统。如果想在系统中分享数据，就需要借助框架提供的Native Modules。

需要注意的是，由于JS运作在浏览器中是单线程的，应用中任何阻碍行为都有可能造成渲染延迟，这对于VR这种即时性很强的体验是十分致命的，所以框架将React组件和渲染过程放在分离的上下文中情有可原。

默认情况下，React360使用Web Worker执行你的React代码，而不是标准浏览器，这就意味着在组件定义的文件中访问不到原生window.location这类APIs。并不是严格意义上的无法访问，事实上当你打印window对象时React360提供了一个DedicatedWorkerGlobalScope类型实例，它包装了window的一些内容。

Surfaces

Surfaces实际上是一个载体，允许你添加2D内容到3D场景，开发者依据像素定义Surfaces宽高，React360获取信息产生合适尺寸的对象，官方介绍了两种类型的Surfaces，Cylinder和Flat。一个Cylinder Surface让2D内容投射到半径为4m的Cylinder内部，其实是假想的圆柱模式。一个Flat Surface位于4m半径的球体外侧，一个假想的球体模式。APIs也提供了像yaw（垂摇），pitch（纵摇），roll（横摇）这些物体自由度控制信息。

为了将React组建附着在Surface上，需要使用AppRegistry注册组件，又一次与ReactNative相似。这会告知Runtime你的组件通过id字段被唯一确定。

AppRegistry.registerComponent('MyAppName', () => MyAppName);

同时在Runtime文件中引用。

r360.renderToSurface(
 r360.createRoot('MyAppName'),
 r360.getDefaultSurface(),
 'default' /* 可选项，引用的surface的名称 */
);

Components

官方提供了呈现2D，3D内容的展示组件和交互按钮组件。

• View：UI构建最基本的元素，被用来组织实体或其他View元素，也是输入事件的容器。
• Image：呈现2D图像
• ENtity：渲染3D对象，支持obj，mtl，gltf格式文件
• VrButton：是一个实用程序类，是捕获事件的包装器。可以检测各种输入设备上单击类型操作，这是通过一个可以监听按键事件的内部状态机做到的。

Layout

支持2D Surface布局，完全以Flexbox格式布局，又是一个和RN相似的点。支持3D Space布局，使用Entity组件时候，通过transform完成3D对象放置，x轴指向用户右侧，y轴指向上方，z轴指向用户后方。

APIs

官方提供了常见的APIs，例如来自React Native的Animated；键值对存储系统AsyncStorage；值得一提的是提供的ControllerInfo可以被用来响应控制器的connect/disconnect事件，获取关于所连接的游戏手柄和控制器的静态信息，比如唯一标识符，按钮，轴数等信息。环境API Environment用来改变场景的背景，包括图片，音频，视频。

实例解读

利用react-360-cli生成的项目中主要有这三个文件：

• index.js：放置应用的主要代码，React组件的地方，在这里可以组织拆分多个组件
• client.js：也就是Runtime的配置，这部分连接浏览器环境和React应用。根据代码示例看到主要完成三件事：（1）创建React360一个新实例，加载并附加React代码到DOM特定位置，这里也是传递初始化选项的地方。（2）将你的代码挂载到3D场景中，在index.js中声明的挂载点附着在应用程序的默认曲面。（3）添加背景信息，这个部分可选，允许代码仍在加载过程中展示图片，让用户尽快看到一些内容。
• index.html：提供安装JS代码的挂载点。

 1 import {ReactInstance} from 'react-360-web';
 2 
 3 function init(bundle, parent, options = {}) {
 4 const r360 = new ReactInstance(bundle, parent, {
 5 fullScreen: true,
 6 ...options,
 7 });
 8 
 9 r360.renderToSurface(
10 r360.createRoot('SlideshowSample', {
11 photos: [
12 {uri: './static_assets/360_world.jpg', title: '360 World1', format: '2D'},
13 {uri: './static_assets/360_world2.jpg', title: '360 World2', format: '2D'},
14 // Add your own 180 / 360 photos to this array,
15 // with an associated title and format
16 ],
17 }),
18 r360.getDefaultSurface(),
19 );
20 }
21 
22 window.React360 = {init};

Native Modules

前面说过React组件运行在单独上下文中，那么如何与主窗口通信，官方提供了Native Modules模块，让React代码有了回调到Runtime的能力，包括在加载中存值，请求有关连接控制器信息或操纵渲染环境。Native模块被创建在Runtime代码中，使用Native Module需要自定义类，继承自Module，使用前需注册，这个示例模板代码演示了Native Modules的许多用法

 1 import {Module} from 'react-360-web';
 2 
 3 class MyModule extends Module {
 4 constructor() {
 5 // 使这个模块在NativeModules.MyModule可用
 6 super('MyModule'); 
 7 }
 8 
 9 // 这个方法将被暴露到React应用一侧
10 doSomething() {
11 
12 }
13 }
14 
15 const r360 = new ReactInstance(
16 'MyApp.bundle?platform=vr',
17 document.getElementById('container'),
18 {
19 // 在初始时刻注册自定义模块，接收Native Module实例，或一个返回实例的函数（需要传递上下文）
20 nativeModules: [
21 new MyModule(),
22 ctx => new MyModule(ctx)
23 ]
24 }
25 );

通常有两种使用场景，暴露常量和普通到React（同步），回调函数或返回Promise方法（异步）。这一段代码同时演示了这几种使用场景，这是一个发送浏览器信息到React侧的应用示例，在注册阶段，模块构造时常量生成并添加模块实例的userAgent属性上，这个值被直接传递给React。第二个例子是暴露了同步setTitle()方法，只需要一个字符串设置窗口标题栏。剩下两个异步方法展示了异步数据如何返回到React。当getBatteryLevel()在React侧被调用，开发者传递的回调在数据可用时触发，调用上下文提供的invokeCallback，将参数放置在数组中，你可以给回调传递任意数量的参数。尽管回调是处理异步任务的一种方式，但我们更偏向于用Promise创建有组织可读性强的异步逻辑链。通过Native Module，你可以使用$符号前缀形式来暴露这种行为，两个回调ID会作为Promise的resolve, reject自动传递给Runtime，该方法会返回一个Promise到调用端。

 1 import {Module} from 'react-360-web';
 2 
 3 export default class BrowserInfoModule extends Module {
 4 constructor(ctx) {
 5 super('BrowserInfo');
 6 this._rnctx = ctx;
 7 this.userAgent = navigator.userAgent;
 8 }
 9 /*
 
 */
10 setTitle(title) {
11 document.title = title;
12 }
13 
14 getBatteryLevel(cb) { // 读取window信息
15 const getBattery = navigator.mozGetBattery || navigator.getBattery;
16 getBattery
17 .call(navigator)
18 .then(
19 battery => {
20 // extract the level and return it
21 return battery.level;
22 },
23 e => {
24 // if an error occurs, return null
25 return null;
26 }
27 )
28 .then(level => {
29 if (this._rnctx) {
30 this._rnctx.invokeCallback(cb, [level]);
31 }
32 });
33 }
34 
35 $getConfirmation(message, resolve, reject) {
36 const result = window.confirm(message);
37 if (this._rnctx) {
38 if (result) {
39 this._rnctx.invokeCallback(resolve, []);
40 } else {
41 // When rejecting a Promise, a message should be provided to populate
42 // the Error object on the React side
43 this._rnctx.invokeCallback(reject, [{message: 'Canceled the dialog'}]);
44 }
45 }
46 }
47 }

后记

对于React360的整体一览，官方文档还是对在web端介绍比较多，官方开发团队在GitHub也比较活跃，所以有问题可以及时issue都会有人回复。Facebook在几年前收购了Oculus足已看出其进军VR届的雄心已经初见倪端，目前市面上许多APP对360全景图的应用也万象回春，微博的全景图借助手机的陀螺仪和重力传感器在不点击图片详情的情况下跟随用户手势动态变化，自如的VR看房，在我们APP里也引入了全景酒店实景体验。在昂贵的VR设备消费者负担不起的情况下，360度全境体验正是VR在当今阶段最普及的形态，虽然只是纯粹的平面图像，却也一定程度上营造了沉浸式感受，而React360在静态全景的基础上引入了多种交互，这更加方便消费者了解需求，相信360全景的未来还能做得更多。

在这里我相信有很多想要学习前端的小伙伴，我自己是一名从事了多年开发的前端老架构师，辞职目前在做自己的前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的前端学习干货，从最基础的html到js各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。