如何在three.js中使用多线程 - 行业资讯 - 肥雀云

　　介绍

本篇文章为大家展示了如何在three.js中使用多线程,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

1。在three.js中使用多线程

在3。js中使用网络工作者经常发生在大量计算造成杯阻塞的情况下,我们举一个例子,比如说我们制作了1000个网格,

让他们简单的动起来,CPU几乎没有什么压力,FPS会在60左右,但是如果让这1000个网格的位置都需要大量计算才能得的到,那么FPS就会很低(和计算量成负相关),下面是一段代码

为(let i=0, i

位置是储存1000个网格位置信息的数组,组里面储存了所有的网,每次渲染都更改位置的位置信息,然后给集团的每一个网格设置新值,这种情况下FPS会低至7 FPS,转动场景可以很明显的感觉到卡顿。接下来我们使用网络工作者处理这个问题,主线程代码如下

myWorker =, new 工人(& # 39;/静态/js/worker.js& # 39;); 　　myWorker.postMessage(职位); 　　myWorker.onmessage =, e =祝辞,{ 　　,let positions =, e.data; 　　,(var i=0;, i

脚本代码如下

onmessage =,函数(e), { 　　,let num =, 1000; 　　,let positions =, e.data; 　　,setInterval (e =祝辞,{ 　　,(let i=0;, i

主要代码和未使用网络工作者几乎一样,只不过是将处理位置的代码放在新的线程中完成,setInterval定时器每一次完成位置计算都会通过postMessage(位置)将位置信息返回给主线程,主线程通过onmessage接受信息,返回对象的数据属性就是新的位置。这样一来FPS可以达60左到右,转动场景感觉的到卡顿。这是十分让人欣喜的。