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

一种基于worker实现three.js异步加载3d模型的方法
技术领域
1.本发明涉及计算机技术领域，具体涉及一种基于worker实现three.js异步加载3d模型的方法。


背景技术：

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


技术实现要素：

3.有鉴于此，本发明的目的在于提供一种基于worker实现three.js异步加载3d模型的方法，以解决现有技术中，在主线程中加载3d模型，因为同时加载多个模型,数据量大，模型大，导致在主线程中加载3d模型造成的卡顿现象。
4.根据本发明实施例的第一方面，提供一种基于worker实现three.js异步加载3d模型的方法，包括：
5.主线程创建worker线程，创建事件监听与worker线程通信；
6.主线程通过发送消息通知worker线程加载模型；
7.worker线程收到加载模型的消息后，从数据库中判断模型数据是否已存在，包括：
8.如果存在，通过发送消息通知主线程已完成读取模型的数据；
9.如果不存在，请求模型数据，并转换为模型对象，将已加载完成的模型对象转换为json对象，将模型对象的顶点数组，uv数据从树状结构中分离并转换为类型化数组，分别存储数据和树状结构到数据库中，发送消息通知主线程已完成读取模型的数据；
10.主线程收到已完成读取的消息后，从数据库中取出该模型的树状结构，并通过发送消息通知worker线程取出对应的数据，然后在主线程中合并，并通过objectloader转换为可使用的模型对象。
11.优选地，所述发送消息，包括：
12.通过postmessage方法发送消息。
13.优选地，所述从数据库中判断该数据是否已存在，包括：
14.数据库以键值对的方式存储数据,通过直接获取主线程中传入的消息中的键对应的值，若该值为空，则数据库中不包含该模型的数据，反之则包含。
15.优选地，所述如果不存在，请求模型数据，并转换为模型对象，包括：
16.根据主线程传入的消息中有模型资源的在线地址，它指向服务器上的模型地址，通过对应模型类型的加载器去加载，加载器加载出来的模型为模型对象，模型对象包含贴图对象，通过textureloader.prototype.load方法构造出贴图对象，通过imagebitmaploader将贴图对象转换为imagebitmap对象，imagebitmap对象是贴图对象的
数据源，贴图对象可以有多种数据源格式，可以是普通的html图片标签，也可以是别的类型的数据源，贴图对象是three.js中基于texture对象构造出的对象，imagebitmap对象是浏览器中表示能够被绘制到canvas上的位图图像。
17.优选地，所述将已加载完成的模型对象转换为json对象，包括：
18.将已加载完成的模型对象使用tojson方法转换为json对象，tojson方法是每个threejs模型对象都具有的方法。
19.优选地，所述顶点数组用于表示模型的顶点信息；
20.所述uv，纹理坐标通常具有u和v两个坐标轴，因此称之为uv坐标，u代表横向坐标上的分布、v代表纵向坐标上的分布。
21.优选地，所述将模型对象的顶点数组，uv数据从树状结构中分离，包括：
22.tojson方法后，查找json对象中的geometries，遍历该数组中的每个geometry对象，该对象下的每一个键值对中的数组都是需要被分离的数据，通过数据库存储这些数据，原有的数组替换为存储的键，主线程读取的时候再通过这个键从数据库中取出对应的值。
23.优选地，所述数据为模型被转换为json后，在存储时一些非常大的数组；
24.所述树状结构为被剔除所述数据后，剩余部分的json。
25.优选地，所述通过objectloader转换为可使用的模型对象，包括：
26.通过调用loader的parse方法，传入json和回调函数，回调函数接收的为模型对象。
27.优选地，所述数据库为indexeddb，indexeddb是一种底层api，本质上是indexed database的缩写,用于存储模型的树形结构和数据,这些数据不会因为浏览器的关闭而消失。
28.本发明的实施例提供的技术方案可以包括以下有益效果：
29.主线程创建worker线程，创建事件监听与worker线程通信，主线程通过发送消息通知worker线程加载模型，worker线程收到加载模型的消息后，从数据库中判断模型数据是否已存在，包括：如果存在，通过发送消息通知主线程已完成读取模型的数据；如果不存在，请求模型数据，并转换为模型对象，将已加载完成的模型对象转换为json对象，将模型对象的顶点数组，uv数据从树状结构中分离并转换为类型化数组，分别存储数据和树状结构到数据库中，发送消息通知主线程已完成读取模型的数据，主线程收到已完成读取的消息后，从数据库中取出该模型的树状结构，并通过发送消息通知worker线程取出对应的数据，然后在主线程中合并，并通过objectloader转换为可使用的模型对象，解决了现有技术中，在主线程中加载3d模型，因为同时加载多个模型,数据量大，模型大，导致在主线程中加载3d模型造成的卡顿现象，用户体验度好、满意度高。
30.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。
附图说明
31.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。
32.图1是根据一示例性实施例示出的一种基于worker实现three.js异步加载3d模型
的方法的流程图。
具体实施方式
33.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。
34.实施例一
35.图1是根据一示例性实施例示出的一种基于worker实现three.js异步加载3d模型的方法的流程图，如图1所示，该方法包括：
36.步骤s11、主线程创建worker线程，创建事件监听与worker线程通信；
37.步骤s12、主线程通过发送消息通知worker线程加载模型；
38.步骤s13、worker线程收到加载模型的消息后，从数据库中判断模型数据是否已存在；
39.步骤s14、如果存在，通过发送消息通知主线程已完成读取模型的数据；如果不存在，请求模型数据，并转换为模型对象，将已加载完成的模型对象转换为json对象，将模型对象的顶点数组，uv数据从树状结构中分离并转换为类型化数组，分别存储数据和树状结构到数据库中，发送消息通知主线程已完成读取模型的数据；
40.步骤s15、主线程收到已完成读取的消息后，从数据库中取出该模型的树状结构，并通过发送消息通知worker线程取出对应的数据，然后在主线程中合并，并通过objectloader转换为可使用的模型对象。
41.在具体实践中，所述创建事件监听与worker线程通信，包括：
42.创建事件监听用于主线程和worker线程通信,后续通信的前提是创建事件监听,假设主线程为a和worker线程为b，a直接发消息给b，但是此时b没有创建事件监听，b虽然收到了消息，但是没有处理消息的逻辑，所以需要b提前创建事件监听，指定收到某类消息的时候的处理逻辑，谁收消息谁创建监听，如果是主线程发消息给worker线程，在worker线程里通过self.addeventlistener的方式监听消息，如果是worker线程发消息给主线程，在主线程中通过worker.addeventlistener的方式监听消息。
43.在具体实践中，所述发送消息，包括：
44.通过postmessage方法发送消息。
45.在具体实践中，所述从数据库中判断该数据是否已存在，包括：
46.数据库以键值对的方式存储数据,通过直接获取主线程中传入的消息中的键对应的值，若该值为空，则数据库中不包含该模型的数据，反之则包含。
47.在具体实践中，所述如果不存在，请求模型数据，并转换为模型对象，包括：
48.根据主线程传入的消息中有模型资源的在线地址，它指向服务器上的模型地址，通过对应模型类型的加载器去加载，加载器加载出来的模型为模型对象，模型对象包含贴图对象，通过textureloader.prototype.load方法构造出贴图对象，通过imagebitmaploader将贴图对象转换为imagebitmap对象，imagebitmap对象是贴图对象的数据源，贴图对象可以有多种数据源格式，可以是普通的html图片标签，也可以是别的类型
的数据源，贴图对象是three.js中基于texture对象构造出的对象，imagebitmap对象是浏览器中表示能够被绘制到canvas上的位图图像。
49.在具体实践中，所述将已加载完成的模型对象转换为json对象，包括：
50.将已加载完成的模型对象使用tojson方法转换为json对象，tojson方法是每个threejs模型对象都具有的方法。
51.在具体实践中，所述顶点数组用于表示模型的顶点信息；
52.所述uv，纹理坐标通常具有u和v两个坐标轴，因此称之为uv坐标，u代表横向坐标上的分布、v代表纵向坐标上的分布。
53.在具体实践中，所述将模型对象的顶点数组，uv数据从树状结构中分离，包括：
54.tojson方法后，查找json对象中的geometries，遍历该数组中的每个geometry对象，该对象下的每一个键值对中的数组都是需要被分离的数据，通过数据库存储这些数据，原有的数组替换为存储的键，主线程读取的时候再通过这个键从数据库中取出对应的值。
55.在具体实践中，所述数据为模型被转换为json后，在存储时一些非常大的数组；
56.所述树状结构为被剔除所述数据后，剩余部分的json。
57.在具体实践中，所述通过objectloader转换为可使用的模型对象，包括：
58.通过调用loader的parse方法，传入json和回调函数，回调函数接收的为模型对象。
59.在具体实践中，所述数据库为indexeddb，indexeddb是一种底层api，本质上是indexed database的缩写,用于存储模型的树形结构和数据,这些数据不会因为浏览器的关闭而消失。
60.在具体实践中，所述geometries为three.js中面片、线或点几何体的有效表述。
61.可以理解的是，本实施例提供的技术方案，主线程创建worker线程，创建事件监听与worker线程通信，主线程通过发送消息通知worker线程加载模型，worker线程收到加载模型的消息后，从数据库中判断模型数据是否已存在，包括：如果存在，通过发送消息通知主线程已完成读取模型的数据；如果不存在，请求模型数据，并转换为模型对象，将已加载完成的模型对象转换为json对象，将模型对象的顶点数组，uv数据从树状结构中分离并转换为类型化数组，分别存储数据和树状结构到数据库中，发送消息通知主线程已完成读取模型的数据，主线程收到已完成读取的消息后，从数据库中取出该模型的树状结构，并通过发送消息通知worker线程取出对应的数据，然后在主线程中合并，并通过objectloader转换为可使用的模型对象，解决了现有技术中，在主线程中加载3d模型，因为同时加载多个模型,数据量大，模型大，导致在主线程中加载3d模型造成的卡顿现象，用户体验度好、满意度高。
62.可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。
63.需要说明的是，在本发明的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是指至少两个。
64.流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部
分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。
65.应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(pga)，现场可编程门阵列(fpga)等。
66.本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
67.此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
68.上述提到的存储介质可以是只读存储器，磁盘或光盘等。
69.在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
70.尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。