基于Three.js在网页中显示全景图片的方法技术

涉及全景图显示领域，具体涉及一种基于Three.js在网页中显示全景图片的方法，实现了更快的加载速度，消耗更低的浏览器内存，极大地提升了加载效率。技术方案概况为：将全景图通过全景工具转换为立方体各个面的图片，通过图片处理工具将立方体各个面的图片等比例切割为LVn等级的全景碎片图；LVn等级为各个面被均匀分割成n2张图片；在网页中引入Three.js，并在场景中构造一个立方几何体对象；将立方体几何对象的每一个面分为n

【技术实现步骤摘要】
基于Three.js在网页中显示全景图片的方法


[0001]本专利技术涉及全景图显示领域，具体涉及一种基于Three.js在网页中显示全景图片的方法。

技术介绍

[0002]360
°
全景图浏览是一种低成本高性能的虚拟现实解决方案，通过一幅幅全景图就能实现全景漫游、沉浸式体验，该项技术现已经广泛用于房地产、博物馆、在线会展等领域。目前市面上普遍是通过圆柱体投影或者立方体投影进行VR全景构建，圆柱体投影是用一张图包裹在圆柱体上，立方体投影是用六张图包裹着一个立方体上。但是，一张4K甚至8K的高清图(宽8000px，高4000px甚至更大尺寸的)超过20MB以上，要用一张图或者六张图加载完成再呈现出来，加载效率低，会让用户等待一段时间，同时有时候有些图案并没有被浏览到，势必会浪费一定的网络带宽，在手机上查看由于图片过大也会消耗更多的内存，加载效率会更低。

技术实现思路

[0003]本专利技术的目的是提供一种基于Three.js在网页中显示全景图片的方法，实现了更快的加载速度，消耗更低的浏览器内存，极大地提升了加载效率。
[0004]本专利技术采取如下技术方案实现上述目的，基于Three.js在网页中显示全景图片的方法，包括：
[0005]步骤1、将全景图通过全景工具转换为立方体各个面的图片；
[0006]步骤2、通过图片处理工具将立方体各个面的图片等比例切割为LVn等级的全景碎片图，n为大于等于1的整数；LVn等级为各个面被均匀分割成n2张图片；
[0007]步骤3、在网页中引入Three.js，并在场景中构造一个立方几何体对象；
[0008]步骤4、将立方体几何对象的每一个面分为n
×
n段；
[0009]步骤5、在场景中立方几何体内部中心点创建一个透视相机，并将相机X轴正向的面移到X轴负方向上，或将相机Z轴正向的面移到Z轴负方向上；
[0010]步骤6、使用加载器函数按照LVn等级渐进式加载全景图碎片，加载逻辑如下：
[0011]a、并行加载LV1等级和LV2等级的全景图碎片，并按照分段顺序贴图到立方体上；
[0012]b、LV2等级的图片完成加载后，根据浏览器User
‑
Agent内的标识内容判断当前设备网络状态和终端设备，若是User
‑
Agent内有2g或3g标识，则完成全景图加载后退出后续逻辑；
[0013]c、获取当前透视相机视角，只加载透视相机所看到立方体这一面LV3等级的全景图碎片，并按顺序贴图到立方几何体上；
[0014]d、根据浏览器User
‑
Agent内的标识内容和屏幕尺寸判断当前设备类型，若User
‑
Agent内有iPhone或Android或iOS以及屏幕宽度小于设置像素且不包含5g网络标识，则完成全景图加载后退出后续逻辑；
[0015]e、获取当前透视相机视角，加载透视相机可视范围内的LV4等级全景图碎片，并按顺序贴图到立方几何体上。
[0016]进一步的是，步骤1中，全景图为宽6000px，高3000px以上的全景图。
[0017]LV1等级各个面为一张图片，每张图片精度小于阈值精度，并且每张图片为第一尺寸大小。
[0018]LV2等级为各个面被均匀分割成四张图片，每张图为第二尺寸大小。
[0019]LV3等级为各个面被均匀分割成九张图，每张图为第三尺寸大小。
[0020]LV4等级为各个面被均匀分割成十六张图，每张图为第四尺寸大小。
[0021]第一尺寸、第二尺寸、第三尺寸以及第四尺寸为宽512px，高512px。
[0022]进一步的是，图片的命名方法为：lv{等级}_{前(front)，后(back)，左(left)，右(right)，上(top)，下(bottom)}_{行号}_{列号}。
[0023]进一步的是，步骤6中，设置像素为600像素。
[0024]本专利技术的有益效果为：
[0025]按需通过LV1～LV4级进行渐进式加载，然后对碎片图进行拼接再显示出来，本专利技术能够在不同网络条件和设备上按需显示出360
°
全景图。同时，相较于圆柱体投影的全景图显示方法，本专利技术通过立方体拼接画面的方式，并且充分利用了浏览器并发请求资源的特性，加载速度更快，浏览器内存消耗更低，具有更高的性能。
附图说明
[0026]图1为本专利技术实施例提供的LV1
‑
LV4等级的全景碎片图示意图；
[0027]图2为本专利技术实施例提供的立方体几何对象示意图；
[0028]图3为本专利技术实施例提供的立方体几何对象展开后的分段示意图；
[0029]图4为本专利技术实施例提供的加载透视相机可视范围内的LV4等级全景图碎片示意图；
[0030]图5为本专利技术实施例提供的加载全景图片的方法流程图；
[0031]图6为本专利技术实施例提供的LV1
‑
LV4等级贴图到立方几何体上的示意图。
具体实施方式
[0032]为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0033]本专利技术基于Three.js在网页中显示全景图片的方法，包括：
[0034]步骤1、将全景图通过全景工具转换为立方体各个面的图片，例如全景图可以为宽6000px，高3000px以上的全景图；
[0035]步骤2、通过图片处理工具将立方体各个面的图片等比例切割为LV1
‑
LV4等级的全景碎片图，如图1所示；LV1等级为各个面的图片精度小于阈值精度，每张图为第一尺寸大小；LV2等级为各个面被均匀分割成四张图，每张图为第二尺寸大小；LV3等级为各个面被均匀分割成九张图，每张图为第三尺寸大小；LV4等级为各个面被均匀分割成十六张图，每张
图为第四尺寸大小；图片的命名方法为：lv{等级}_{前(front)，后(back)，左(left)，右(right)，上(top)，下(bottom)}_{行号}_{列号}，例如LV4级右面第三排第二格图片命名如下：lv4_right_3_2.jpg；
[0036]在本专利技术的一种实施例中，第一尺寸、第二尺寸、第三尺寸以及第四尺寸均为宽512px，高512px。
[0037]步骤3、在网页中引入Three.js，并在场景(Scene)中构造一个立方几何体对象，例如构造一个宽高深均为2048的立方几何体对象(BoxGeometry)；
[0038]步骤4、将立方体几何对象的每一个面分为4
×
4段，如图2、图3所示；
[本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于Three.js在网页中显示全景图片的方法，其特征在于，包括：步骤1、将全景图通过全景工具转换为立方体各个面的图片；步骤2、通过图片处理工具将立方体各个面的图片等比例切割为LVn等级的全景碎片图，n为大于等于1的整数；LVn等级为各个面被均匀分割成n2张图片；步骤3、在网页中引入Three.js，并在场景中构造一个立方几何体对象；步骤4、将立方体几何对象的每一个面分为n
×
n段；步骤5、在场景中立方几何体内部中心点创建一个透视相机，并将相机X轴正向的面移到X轴负方向上，或将相机Z轴正向的面移到Z轴负方向上；步骤6、使用加载器函数按照LVn等级渐进式加载全景图碎片，加载逻辑如下：a、并行加载LV1等级和LV2等级的全景图碎片，并按照分段顺序贴图到立方体上；b、LV2等级的图片完成加载后，根据浏览器User
‑
Agent内的标识内容判断当前设备网络状态和终端设备，若是User
‑
Agent内有2g或3g标识，则完成全景图加载后退出后续逻辑；c、获取当前透视相机视角，只加载透视相机所看到立方体这一面LV3等级的全景图碎片，并按顺序贴图到立方几何体上；d、根据浏览器User
‑
Agent内的标识内容和屏幕尺寸判断当前设备类型，若User
‑
Agent内有iPhone或Android或iOS以及屏幕宽度小于设置像素且不包含5g网络标识，则完成全景图加载后退出后续逻辑；e、获取当前透视相机视角，加载透视相机可视范围内的LV...

【专利技术属性】
技术研发人员：易桃民，余欣，张琪，
申请(专利权)人：四川封面传媒科技有限责任公司，
类型：发明
国别省市：