关于javascript:硬核看房利器Web-全景的实现

作者：凹凸曼 – EC

疫情期间，突破社交间隔限度的交互模式被推向前台，为不少行业的传统交易提供了设想的空间。

疫情期间，房地产租售业受到的冲击无疑是微小的，因为人口流动的限度，需求量大幅缩小，无奈现场看房更加重了这一危机。但有危就有机，倒是意外推动了一项技术的推广——VR 看房。作为 WebVR 的子集，Web 全景是少数 WebVR 需要的降级抉择，例如街景地图，本文将带大家实现一个简略的 Web 全景。
<!– more –>
这里是文章的残余局部。在 hexo 模版里可通过 {% raw %}{{post.more}}{% endraw %} 来援用。

<video width=”375″ style=”margin: 0 auto;”>

<source src="http://storage.360buyimg.com/o2-pics/%E8%B4%9D%E5%A3%B3x%E5%A6%82%E8%A7%86.mp4" type="video/mp4" />

</video>

<div style=”text-align: center”> 贝壳 x 如视案例 </div>

什么是 VR

VR（Virtual Reality）是利用电脑模仿产生一个三维空间的虚拟世界，提供用户对于视觉等感官的模仿，让用户感觉好像身历其境，能够及时、没有限度地察看三维空间内的事物。用户进行地位挪动时，电脑能够立刻进行简单的运算，将准确的三维世界视频传回产生临场感。—— 维基百科

与基于事实场景进行加强成果的 AR（Augmented Reality）的区别在于，VR 的场景须要齐全重建，相似于进入另一个世界。

虚拟现实的原理

人眼对世界的感知，是通过将三维世界投射至视网膜上，以二维图像建设的视觉体系。所以一张具备透视关系的图像，在特定的角度，能够使人感触到三维的空间关系，这就是人眼的深度知觉（depth perception）。VR 技术则建设在这个根底之上。

宽泛意义上来说，只有合乎模仿三维空间这一行为，就能够称为 VR，手机、电脑、大荧幕、VR 眼镜甚至于空气，都能够成为 VR 的载体。

图片起源：https://www.xensorylab.com/services

VR 的利用场景

互联网社会的倒退，实质上是促成了人与人之间信息的流动。在信息替换这件事上，通过的媒介从文字到绘画、图像、声音、影像再到虚拟现实，沉迷感逐步加强，实现的老本也逐步减少。但人们在沉迷感上的谋求，永远不嫌多，因为高沉迷感带来的感官冲击，是任何降级伎俩都难以取代的。这也是虚拟现实在互联网倒退路上成为必然趋势的起因。

除了常见的游戏（例如吃鸡、塞尔达等）、影视、房地产畛域的利用，VR 可施展想象力的空间是微小的，例如军事中的军事演习，体育界的沉迷式赛事直播，汽车产商可提供车辆在线虚构配置直销的服务，医疗界的恐惧症医治计划，教育界的新型教育模式等。

WebVR 有着轻便、应用门槛低的特点。最次要的挑战还是在内容制作上——人力与设施老本太高。

WebVR 目前能做到的

依照交互模式，WebVR 波及到一个概念：dof，degree of freedom，能够了解为陀螺仪的自由度。VR 中的交互自由度分为两种：3dof 与 6dof。3dof 指设施交互方向蕴含 3 个转动角度，6dof 指在 3dof 的根底上减少了 3 个地位相干的自由度（高低、左右、前后）。

<div style=”text-align: center;”> 图片起源：《聊一聊 VR 虚拟现实（二）：VR 眼镜的分类》</div>

3dof，能够看做是定点视角模式，按体验感触来形容，就是视角客人站在一个固定的地位，对四周的现象进行摸索；以计算机的角度来形容，即 camera 的地位只能在极为局限的特定轨道内挪动，覆盖范围可能只有一个球面，全景的搭建内容仅需简化至一张图片即可。这一类型的常见利用场景有 VR 看房、街景地图等。

6dof，能够看做挪动视角模式，是较为靠近事实体验的虚拟现实，视角客人能够在场景的特定空间中进行随便路线、随机视角的挪动而同样能体验到正当的透视感。相比定点视角，挪动视角 VR 的实现原理则可能截然不同。如果依照定点视角的实现办法，挪动视角须要的则是笼罩任意地位的 360 视角的平面图，数据量是难以想象的。因而这里须要引入建模的概念，通过在计算机内建设一个 3D 的模型体系，依据 camera 所在的地位实时计算出以后视线中的图像渲染。一方面这对初始场景的建设有要求，另一方面在视角挪动过程中的场景渲染的算力也有要求。因而这种类型的 VR 开发成本与体验老本相比起定点视角类型的都较高。挪动视角 VR 常见的利用场景有第一视角的 3D 游戏，以及三维动画 / 影视。

接下来咱们从最为繁难的 Web 全景动手，试着实现一个 3dof 立体图像全景场景。

开发原理

下面说到了 Web 全景的实现思路，细化下来，能够分成两局部：一个笼罩 360 度视线的三维场景供贴图应用，以及贴图。

依照咱们对空间方位的认知，分为前后左右高低六个方位，能够设想为一个微小的立方体，而你就站在立方体的核心地位。

咱们持续对这六个面进行切片解决，并退出适当的角度，尽量造成一个平滑的立体。当咱们的切片足够多时，这个立方体最终会变成一个球形，这是一个现实的状况。

如果只针对前后左右四面进行切片解决，间接拿掉高低方位的贴图，也能够模拟出一个半笼罩视线的全景场景。这种模式的最终状态会是一个没有上上面的圆柱。

针对最根底的立方体场景，咱们须要筹备的贴图则分为 6 片，别离对应 6 个方位。贴图须要做到交界地位与四周的四个贴片是图像相接的，这种类型的全景图称为「立方面片（Cube Faces）」，延长出合成到同一张图片上的「十字型」与「T 型」。而圆柱场景对应的全景图则为「圆柱型」，球形场景对应的则为「矩形球面投影（Equirectangular）」。矩形球面投影图能够勉强用于圆柱型场景。这几种全景图能够通过算法相互转换，最简略的办法是应用 Pano2VR 软件。

目前比拟成熟的开发计划有：CSS 3D、WebGL（Threejs）。无论哪种计划，构建一个 Web 全景，都要通过四步：一，建设三维体系；二，搭建全景框架；三，贴图；四，增加用户交互。

建设三维场景

CSS 3D 版

CSS 3D 建设三维场景的关键点在于三维体系的设置。波及到三个要害属性：transform-style、perspective、transform。将 transform-style 设置为 preserve-3d，意味着浏览器以这个容器为单位建设了一个三维空间体系，这个容器下的子元素的款式属性都将依照这个三维体系下的空间关系渲染。MDN 上的这个例子能够很好地体现二维体系与三维体系中元素空间关系的区别：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

perspective 的值在三维体系中示意观察点间隔 z 轴 0 坐标地位的间隔，在视觉上的体现则为值越大，透视成果越弱。这么说可能很难设想，能够参考大家在坐车的时候往窗外看，远景物体与近景物体挪动速度的差异，则为 perspective 值之间的差异，值越小意味着物体离你越近。默认值为 1000px，如果感觉透视成果不够显著，能够适当地缩小 perspective 的值。

demo 起源：https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

须要留神的是，这里一共须要两层 transform-style 的设置。包裹着所有切片的容器须要设置，整个场景的 3D 旋转操作就是在这个容器上。为了让这个容器的旋转也产生 3D 的成果，须要在这个容器的外层再增加一个带 transform-style 属性的容器。

三维体系与透视值设定好了之后，就能够开始对子元素进行布局了。与 3D 布局相干的属性根本集中在 transform 中，通过 translateX、translateY、translateZ、rotateX、rotateY、rotateZ 则能够满足咱们想要建设的三维场景。

以较为简单的圆柱型场景为例，咱们须要确定切片的数量，而后通过计算确定切片的旋转角度与位移间隔。因为咱们有旋转场景的需要，因而以 (0, 0, 0) 为场景中心点是较为好操作的。首先大家须要明确一个点，transform 中的各函数值先后顺序不同所展现的款式也是不同的。因而先设定 rotate 与先设定 translate，对应的函数值也不同。如果是先设定 rotate，则在位移上能够对立应用一个值，这里咱们应用 translateZ；如果先设定 translate，在位移的计算上则简单了不少。因而咱们采纳先旋转再位移的模式来布局全景场景的切片。

从 y 轴视角看切片，是一个正多边形。每所有片间的距离角度为 360 度除以切片数量，而切片的宽度则须要通过三角函数来计算。

上面的代码段中的计算，radius 值固定，因而依据边数的不同，切片的高度将发生变化。也能够固定 d 值或是切片高度来进行相应值的计算。

圆柱型场景应用的贴图为首尾相接的『圆柱型』或『矩形球面投影』类型的，咱们要做的就是将这张图均匀、无缝散布到每一片切片上。这里应用 background-image 背景图进行贴图的话，就须要针对 background-position 进行计算。

const position = parseInt(-width * (planeNum - i - 1), 10)

因为挪动端在进行等比缩放时，会呈现小数点的尺寸与定位值，因而很有可能在切片之间产生空隙，影响全景成果。这里能够通过适当扩充切片宽度，切片之间相互穿插摆放，来防止这种状况的产生。这个时候的背景图定位须要进行从新计算。

贴图实现之后，整个圆柱型全景的场景也就搭好了。

整体 demo 地址：https://codesandbox.io/s/css-3d-panorama-oqswp?file=/src/Pano.js

ThreeJS 版

在开发原理局部，咱们说到，立方体的每个面进行有限的切片解决，最终会造成现实的球形。实践上，球形造成的全景场景是最为靠近人眼的实在感触的，眼帘到达贴图的间隔均等。而抉择 ThreeJS（下文简称阿三）也是看上了其残缺的三维体系以及弱小的几何体绘制能力。

而目前在计算机中模仿弧面，只能通过切分的立体进行，切分的立体越多弧面就越平滑。因而阿三中的所有 3D 模型都是一个多面体。尽管切片的算法全权由阿三解决，但切片的散布须要做进一步的理解，以帮忙咱们理解球形贴图的相干细节。

图片起源：Creating a WebGL Earth with three.js

球体的切片形式与地球经纬度的划分形式统一，在南北纬 90 度的地位会呈现若干个三角立体汇聚的状况，因而贴图在此处会呈现放射状纹理。

阿三的三维体系中有几个根本对象：场景（Scene）、镜头（Camera）、渲染器（WebGLRenderer）。整个体系的建设这三个对象缺一不可。

场景承载着所有渲染元素，通过 add 办法新增元素。

镜头充当着“眼”的性能，搁置了镜头能力“看到”场景中的元素，同时通过设置 position 参数调整镜头的摆放地位，通过 lookAt 办法调整镜头聚焦的地位。阿三提供了两种模式的摄像机——正交投影摄像机（OrthographicCamera）与透视投影摄像机（PerspectiveCamera）。区别在于针对不同间隔的元素是否有做透视解决，如果须要透视解决，抉择透视投影摄像机即可，这也是比拟罕用的摄像机。

camera.position.set(camerax, cameray, cameraz)
camera.lookAt(scene.position)

透视摄像机须要针对咱们传统意义上的视线进行一些参数设置，一共 4 个参数，决定了摄像机的最终视线。

PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)
fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

接着就是将整个场景渲染至网页上。

咱们能够先获取场景容器，再将阿三画布插入容器中。

document.body.appendChild(renderer.domElement)

或是间接将已有画布对象传入渲染器对象中。

new THREE.WebGLRenderer({canvas: canvasDom})

而后通过渲染器的 render 办法渲染场景与摄像机。

renderer.render(scene, camera)

场景 demo 地址：https://codesandbox.io/s/threejs-panorama-0u763?file=/src/PanoScene.js

到这一步为止，整个三维场景其实曾经建设好了，接下来咱们往里放元素。在这个场景里咱们须要的是球体元素，阿三中对应的对象为 SphereGeometry。贴图对应的是材质（Material）对象，阿三提供了若干种材质对象，咱们这里仅须要用到最根底的 MeshBasicMaterial（网格根底材质）即可。将球体对象与材质对象联合到一起，就能够形成一个残缺的 Mesh（网格）对象，这就是咱们须要的全景球体。

通过管制材质的 opacity 属性，能够实现元素的显隐，这一点能够利用于多全景场景之间的切换成果。

sphereMaterial.transparent = true
sphereMaterial.opacity = 0

一个基于阿三的球体全景场景就搭好了。

基于 WebGL 的其余框架

除了阿三，市面上还存在一种框架，将三维场景的元素封装为 HTML 标签，晋升代码可读性。相似 A-Frame（http://aframe.io/）与 krpano（https://krpano.com/home/）均为这种思路。区别在于 krpano 更专一于全景场景，封装了包含控制面板在内的全景相干套件，相似于全景组件，并提供了可视化桌面端软件，简略替换图片、场景缩略图等信息之后即可应用。而 A-Frame 是一个基于阿三的二次封装框架，因而阿三能做的，它也能做，它所做的就是把阿三的各种对象封装成了一个个 HTML 标签，做到了对象与逻辑的代码拆散。这一类的计划原理与阿三搭建场景的相似，感兴趣的能够自行尝试，在这里就不多做介绍。

浏览全景

到这里为止，咱们实现了全景场景的搭建，但目前咱们只能看到全景场景的一角，没有满足 VR 概念中“可察看”这一条件。当初咱们须要给场景减少一些可浏览的操作逻辑。浏览全景的成果从主视角看来，就是站在原地旋转 360 度。在圆柱模式的全景场景中，高低方位的旋转角度会受到边界的限度；而如果是球体模式，则能够做到三个方向的 360 度旋转。在 CSS 3D 的计划中，咱们通过旋转整个场景容器，来实现全景场景的浏览，而在阿三的计划中，咱们须要通过调整摄像机的地位来实现（咱们将摄像机的聚焦点固定在球体核心）。但无论是哪种计划，都须要失去一个用户交互与场景 / 摄像机旋转映射的值。

在 web 环境，个别的人机交互都是通过鼠标、键盘与手势进行，因而首先咱们针对这些内容进行监听。以手势为例：

蕴含三个阶段：交互起始，交互过程，交互终止。最疾速的办法，就是将交互位移差值与场景 / 摄像机旋转值进行对应比例的转换。

尝试了这种形式之后，会很显著感触到浏览过程的僵硬感。这是因为这样的动静形式违反了动画十二准则中的渐快与渐慢（Slow in and slow out）准则，在场景动画起始与完结时急起急停，不足过渡。因而思考针对交互终止的地位减少一个缓出动画，就如同转圈的时候有个惯性似的，这也意味着咱们须要对结尾的动作进行方向与速度上的判断。

// 以后滑动速度
const vx = (originalEndX - startX) / duration
// 预估以后滑动起点
const endX = vx * 200

这里咱们联合 gsap 的时间轴，利用其动画计算能够基于以后状态值的个性，对整体动效进行平滑过渡解决，因为对于交互动作监听的工夫距离够短，在完结之前的数值缓动成果能够忽略不计，但起始与终止的缓动却能够保留，堪称完满。

![](http://storage.360buyimg.com/…
)

残缺缓动算法 demo：https://codesandbox.io/s/move-ani-compare-xvi26?file=/index.js

有了这个算法，咱们就能够针对每一种计划进行场景的交互解决了。

CSS 3D 场景

在 CSS 3D 场景中，要实现全景场景的浏览，须要做的是旋转整个三维体系容器，也就是应用 transform 中的 rotate 函数。针对交互数值变动与 rotate 数值做一个置换。

残缺 demo：https://codesandbox.io/s/css-3d-panorama-with-mouse-event-jp2jl?file=/src/Pano.js

ThreeJS 场景

在阿三场景中，咱们须要扭转的是摄像机聚焦点的地位，又或者将摄像机聚焦点固定在球体核心，挪动摄像机的地位。摄像机挪动的范畴就在以球体核心为球心的球面上。

具体的鼠标位移与球体经纬度的转化公式可查看残缺 demo：https://codesandbox.io/s/threejs-panorama-dy1lt?file=/src/event.js

这样，一个残缺的全景体验的 web 全景就开发实现了。

次要挑战

当咱们把全景的框架搭建好之后，实践上只有替换图片，则能够实现有数场景的全景体验。但略微上网一搜，大家会发现，这类全景图想要找到既高清又合乎首尾相接规范的，真的很难，要么带水印，要么不够清晰，要么就免费。如果你想本人拍，又会发现拍摄这一类照片所须要的设施要求还蛮高，非专业机构没什么必要购买。因而此类全景场景最大的挑战就在于全景图的获取，纯体力活，须要耗费大量人力与工夫。而像贝壳找房这类受疫情冲击的行业，通过推动 VR 看房，联合便当、应用门槛低的设施，既能消化闲置的人力，同时还维系了业务的运行。

同时大家也能看出，文章结尾的 VR 看房视频，并不是单纯的 Web 全景就能实现，其中还蕴含了测距、门路切换等。而这一套服务，是由如视（https://realsee.com/）服务商提供的，他们售卖的计划中蕴含了自研硬件扫描仪与线上三维重建技术等软件的打包，解决了内容创作门槛这个痛点，同时通过 C 端设施降级计划，由保有量较少的 VR 眼镜转向了体验稳固的 PC 与手机，这或者将成为近一段期间 VR 生产端的通用推广形式。

VR 的将来

一项新兴技术的成熟曲线往往要经验新技术诞生、冀望收缩、泡沫化、稳步俯冲、本质生产这 5 个阶段，目前 VR 正处于启蒙期阶段，内容创作老本尚未升高，设施保有量尚未造成规模。

图片起源：《聊聊 VR 虚拟现实（一）：VR 的发展史》

在 2016 年高盛公布的《VR 与 AR 报告：下一个通用计算平台》中，对于 2025 年 VR/AR 9 大应用领域规模的预期，只有视频游戏、事件直播和视频娱乐 3 大畛域将齐全由消费者推动，占整体 VR/AR 营收预期的 60%，残余 40% 由企业和公共部门推动。

正如前文提到的，从文字到图片到声音再到视频，是目前所宽泛应用的信息流传路径，将来的模式肯定是更加升高门槛、缩小失真，虚拟化将成为必然的趋势，加上 AI 的继续推动，以及 5G 的将来，VR 的设想空间还有很大。

参考文档

浅谈 WebVR：https://aotu.io/notes/2016/08…
A-Frame WebVR 试玩报告：https://aotu.io/notes/2016/10…
CSS 3D Panorama – 淘宝造物节技术分析：https://aotu.io/notes/2016/08…
krpano：https://krpano.com/home/
应用 ThreeJS 在浏览器中展现全景图：https://aotu.io/notes/2016/01…
Pano2VR：https://ggnome.com/pano2vr/
VR 看房是如何实现的？：https://cloud.tencent.com/dev…
十分钟打造 3D 物理世界：https://aotu.io/notes/2018/10…
高盛 VR 与 AR 报告：下一个通用计算平台：https://tech.qq.com/a/2016020…
Google AR&VR：https://arvr.google.com/
The Best VR Headsets for 2020：https://www.pcmag.com/picks/t…
贝壳 x 如视案例：https://realsee.com/website/p…
聊聊 VR 虚拟现实（一）：VR 的发展史：https://zhuanlan.zhihu.com/p/…
VR 眼镜的分类：https://zhuanlan.zhihu.com/p/…
也说 5G 与云 VR：https://zhuanlan.zhihu.com/p/…

5G 专网为“江南皮革厂”带来了什么？：https://mp.weixin.qq.com/s/BB…

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。