如何在three.js中使用多线程-创新互联

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

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

在three.js中使用Web Worker经常发生在大量计算造成CUP阻塞的情况下，我们举一个例子，比如说我们制作了1000个Mesh，

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

for(let i=0; i 500) {
 positions[i].y = positions[i].y - 1000;
 }
}
for(var i=0; i
positions是储存1000个Mesh位置信息的数组，group里面储存了所有的Mesh,每次渲染都更改positions的位置信息，然后给Group的每一个Mesh设置新值，这种情况下FPS会低至7FPS，转动场景可以很明显的感觉到卡顿。接下来我们使用Web Worker处理这个问题，主线程代码如下
myWorker = new Worker('/static/js/worker.js');
myWorker.postMessage(positions);
myWorker.onmessage = e => {
 let positions = e.data;
 for(var i=0; i
脚本代码如下
onmessage = function(e) {
 let num = 1000;
 let positions = e.data;
 setInterval(e => {
 for(let i=0; i 500) {
  positions[i].y = positions[i].y - 1000;
  }
 }
 postMessage(positions);
 }, 1000 / 60)
};
主要代码和未使用Web Worker几乎一样，只不过是将处理位置的代码放在新的线程中完成，setInterval定时器每一次完成位置计算都会通过postMessage(positions)将位置信息返回给主线程，主线程通过onmessage接受信息，返回对象的data属性就是新的positions。这样一来FPS可以达到60左右，转动场景感觉的到卡顿。这是十分让人欣喜的。
2. 性能分析
前面已经说了在每一次位置计算中做10万次累加，未使用Web Worker的情况下FPS降到了7，下面是更多的数据（数据仅做对比，和当前使用情况以及配合有关）。
累加次数（万次）
使用Web Worker
未使用Web Worker
1
60
60
3
60
39
5
60
26
7
60
11
9
60
8
11
60
6
这里面可以看出，不管是多么大量的计算，使用Web Worker都不会影响主线程，但是对于未使用Web Worker影响是十分严重的，下面展示一下两种情况下电脑性能的对比
（未使用Web Worker）
（使用Web Worker）
上述内容就是如何在three.js中使用多线程，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
            

            新闻标题：如何在three.js中使用多线程-创新互联            

            转载来于：http://cxhlcq.com/article/dippig.html