一种基于worker实现three.js异步加载3D模型的方法技术

本发明专利技术涉及一种基于worker实现three.js异步加载3D模型的方法，主线程创建worker线程，创建事件监听与worker线程通信，主线程通过发送消息通知worker线程加载模型，Worker线程收到加载模型的消息后，从数据库中判断模型数据是否已存在，包括：如果存在，通过发送消息通知主线程已完成读取模型的数据；如果不存在，请求模型数据，转换为模型对象，将已加载完成的模型对象转换为JSON对象，将模型对象的顶点数组，UV数据从树状结构中分离并转换为类型化数组，分别存储数据和树状结构到数据库中，发送消息通知主线程已完成读取模型的数据，主线程收到消息后，从数据库中取出该模型的树状结构，通知worker线程取出对应的数据，然后在主线程中合并，并通过ObjectLoader转换为可使用的模型对象。用的模型对象。用的模型对象。

【技术实现步骤摘要】
一种基于worker实现three.js异步加载3D模型的方法


[0001]本专利技术涉及计算机
，具体涉及一种基于worker实现three.js异步加载3D模型的方法。

技术介绍

[0002]浏览器端加载3D模型是在3D场景中的普遍业务，在传统的3D业务中，在主线程中加载3D模型，同时加载多个模型,数据量大，模型大,导致浏览器短时间无响应，动画卡顿等现象，网络拥堵，网速慢导致加载缓慢，使用部分插件导致原生方法被重写,而重写的方法与原生的方法相比性能低下，对于用户体验极其不友好。

技术实现思路

[0003]有鉴于此，本专利技术的目的在于提供一种基于worker实现three.js异步加载3D模型的方法，以解决现有技术中，在主线程中加载3D模型，因为同时加载多个模型,数据量大，模型大，导致在主线程中加载3D模型造成的卡顿现象。
[0004]根据本专利技术实施例的第一方面，提供一种基于worker实现three.js异步加载3D模型的方法，包括：
[0005]主线程创建worker线程，创建事件监听与worker线程通信；
[0006]主线程通过发送消息通知worker线程加载模型；
[0007]Worker线程收到加载模型的消息后，从数据库中判断模型数据是否已存在，包括：
[0008]如果存在，通过发送消息通知主线程已完成读取模型的数据；
[0009]如果不存在，请求模型数据，并转换为模型对象，将已加载完成的模型对象转换为JSON对象，将模型对象的顶点数组，UV数据从树状结构中分离并转换为类型化数组，分别存储数据和树状结构到数据库中，发送消息通知主线程已完成读取模型的数据；
[0010]主线程收到已完成读取的消息后，从数据库中取出该模型的树状结构，并通过发送消息通知worker线程取出对应的数据，然后在主线程中合并，并通过ObjectLoader转换为可使用的模型对象。
[0011]优选地，所述发送消息，包括：
[0012]通过postMessage方法发送消息。
[0013]优选地，所述从数据库中判断该数据是否已存在，包括：
[0014]数据库以键值对的方式存储数据,通过直接获取主线程中传入的消息中的键对应的值，若该值为空，则数据库中不包含该模型的数据，反之则包含。
[0015]优选地，所述如果不存在，请求模型数据，并转换为模型对象，包括：
[0016]根据主线程传入的消息中有模型资源的在线地址，它指向服务器上的模型地址，通过对应模型类型的加载器去加载，加载器加载出来的模型为模型对象，模型对象包含贴图对象，通过TextureLoader.prototype.load方法构造出贴图对象，通过ImageBitmapLoader将贴图对象转换为ImageBitMap对象，ImageBitMap对象是贴图对象的
数据源，贴图对象可以有多种数据源格式，可以是普通的html图片标签，也可以是别的类型的数据源，贴图对象是three.js中基于texture对象构造出的对象，ImageBitMap对象是浏览器中表示能够被绘制到canvas上的位图图像。
[0017]优选地，所述将已加载完成的模型对象转换为JSON对象，包括：
[0018]将已加载完成的模型对象使用toJSON方法转换为JSON对象，toJSON方法是每个threejs模型对象都具有的方法。
[0019]优选地，所述顶点数组用于表示模型的顶点信息；
[0020]所述UV，纹理坐标通常具有U和V两个坐标轴，因此称之为UV坐标，U代表横向坐标上的分布、V代表纵向坐标上的分布。
[0021]优选地，所述将模型对象的顶点数组，UV数据从树状结构中分离，包括：
[0022]toJSON方法后，查找JSON对象中的geometries，遍历该数组中的每个geometry对象，该对象下的每一个键值对中的数组都是需要被分离的数据，通过数据库存储这些数据，原有的数组替换为存储的键，主线程读取的时候再通过这个键从数据库中取出对应的值。
[0023]优选地，所述数据为模型被转换为JSON后，在存储时一些非常大的数组；
[0024]所述树状结构为被剔除所述数据后，剩余部分的JSON。
[0025]优选地，所述通过ObjectLoader转换为可使用的模型对象，包括：
[0026]通过调用Loader的parse方法，传入JSON和回调函数，回调函数接收的为模型对象。
[0027]优选地，所述数据库为IndexedDB，IndexedDB是一种底层API，本质上是Indexed Database的缩写,用于存储模型的树形结构和数据,这些数据不会因为浏览器的关闭而消失。
[0028]本专利技术的实施例提供的技术方案可以包括以下有益效果：
[0029]主线程创建worker线程，创建事件监听与worker线程通信，主线程通过发送消息通知worker线程加载模型，Worker线程收到加载模型的消息后，从数据库中判断模型数据是否已存在，包括：如果存在，通过发送消息通知主线程已完成读取模型的数据；如果不存在，请求模型数据，并转换为模型对象，将已加载完成的模型对象转换为JSON对象，将模型对象的顶点数组，UV数据从树状结构中分离并转换为类型化数组，分别存储数据和树状结构到数据库中，发送消息通知主线程已完成读取模型的数据，主线程收到已完成读取的消息后，从数据库中取出该模型的树状结构，并通过发送消息通知worker线程取出对应的数据，然后在主线程中合并，并通过ObjectLoader转换为可使用的模型对象，解决了现有技术中，在主线程中加载3D模型，因为同时加载多个模型,数据量大，模型大，导致在主线程中加载3D模型造成的卡顿现象，用户体验度好、满意度高。
[0030]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本专利技术。
附图说明
[0031]此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本专利技术的实施例，并与说明书一起用于解释本专利技术的原理。
[0032]图1是根据一示例性实施例示出的一种基于worker实现three.js异步加载3D模型
的方法的流程图。
具体实施方式
[0033]这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本专利技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本专利技术的一些方面相一致的装置和方法的例子。
[0034]实施例一
[0035]图1是根据一示例性实施例示出的一种基于worker实现three.js异步加载3D模型的方法的流程图，如图1所示，该方法包括：
[0036]步骤S11、主线程创建worker线程，创建事件监听与work本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于worker实现three.js异步加载3D模型的方法，其特征在于，包括：主线程创建worker线程，创建事件监听与worker线程通信；主线程通过发送消息通知worker线程加载模型；Worker线程收到加载模型的消息后，从数据库中判断模型数据是否已存在，包括：如果存在，通过发送消息通知主线程已完成读取模型的数据；如果不存在，请求模型数据，并转换为模型对象，将已加载完成的模型对象转换为JSON对象，将模型对象的顶点数组，UV数据从树状结构中分离并转换为类型化数组，分别存储数据和树状结构到数据库中，发送消息通知主线程已完成读取模型的数据；主线程收到已完成读取的消息后，从数据库中取出该模型的树状结构，并通过发送消息通知worker线程取出对应的数据，然后在主线程中合并，并通过ObjectLoader转换为可使用的模型对象。2.根据权利要求1所述的方法，其特征在于，所述发送消息，包括：通过postMessage方法发送消息。3.根据权利要求1所述的方法，其特征在于，所述从数据库中判断该数据是否已存在，包括：数据库以键值对的方式存储数据,通过直接获取主线程中传入的消息中的键对应的值，若该值为空，则数据库中不包含该模型的数据，反之则包含。4.根据权利要求1所述的方法，其特征在于，所述如果不存在，请求模型数据，并转换为模型对象，包括：根据主线程传入的消息中有模型资源的在线地址，它指向服务器上的模型地址，通过对应模型类型的加载器去加载，加载器加载出来的模型为模型对象，模型对象包含贴图对象，通过TextureLoader.prototype.load方法构造出贴图对象，通过ImageBitmapLoader将贴图对象转换为ImageBitMap对象，ImageBitMap对象是贴图对象的数据源，贴图对象可以有多种数据源格式，可以是普通的...

【专利技术属性】
技术研发人员：王忠将，
申请(专利权)人：成都小步创想慧联科技有限公司，
类型：发明
国别省市：