本篇文章為大家展示了如何在three.js中使用多線程，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)魯山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

在three.js中使用Web Worker經(jīng)常發(fā)生在大量計(jì)算造成CUP阻塞的情況下，我們舉一個(gè)例子，比如說我們制作了1000個(gè)Mesh，

讓他們簡(jiǎn)單的動(dòng)起來，CPU幾乎沒有什么壓力，F(xiàn)PS會(huì)在60左右，但是如果讓這1000個(gè)Mesh的位置都需要大量計(jì)算才能得到，那么FPS就會(huì)很低（和計(jì)算量成負(fù)相關(guān)），下面是一段代碼

for(let i=0; i<num; i++) {
 let angle = positions[i].y / (1000 / (Math.PI * 10));
 positions[i].x = positions[i].x + Math.sin(angle);
 positions[i].z = positions[i].z + Math.cos(angle);
 positions[i].y = positions[i].y + 1;
		//上面就是簡(jiǎn)單的位置變化，下面的代碼模擬復(fù)雜的變化，累加100000次（這是非常占用線程的情況）
 for(let j=1, total=1; j<=100000; j++) {
 total += j;
 }
 if(positions[i].y > 500) {
 positions[i].y = positions[i].y - 1000;
 }
}
for(var i=0; i<num; i++) {
 group.children[i].position.set(positions[i].x, positions[i].y, positions[i].z);
}

positions是儲(chǔ)存1000個(gè)Mesh位置信息的數(shù)組，group里面儲(chǔ)存了所有的Mesh,每次渲染都更改positions的位置信息，然后給Group的每一個(gè)Mesh設(shè)置新值，這種情況下FPS會(huì)低至7FPS，轉(zhuǎn)動(dòng)場(chǎng)景可以很明顯的感覺到卡頓。接下來我們使用Web Worker處理這個(gè)問題，主線程代碼如下

myWorker = new Worker('/static/js/worker.js');
myWorker.postMessage(positions);
myWorker.onmessage = e => {
 let positions = e.data;
 for(var i=0; i<num; i++) {
 group.children[i].position.set(positions[i].x, positions[i].y, positions[i].z);
 }
}

腳本代碼如下

onmessage = function(e) {
 let num = 1000;
 let positions = e.data;
 setInterval(e => {
 for(let i=0; i<num; i++) {
  let angle = positions[i].y / (1000 / (Math.PI * 10));
  positions[i].x = positions[i].x + Math.sin(angle);
  positions[i].z = positions[i].z + Math.cos(angle);
  positions[i].y = positions[i].y + 1;
  for(let j=1, total=1; j<=100000; j++) {
  total += j;
  }
  if(positions[i].y > 500) {
  positions[i].y = positions[i].y - 1000;
  }
 }
 postMessage(positions);
 }, 1000 / 60)
};

主要代碼和未使用Web Worker幾乎一樣，只不過是將處理位置的代碼放在新的線程中完成，setInterval定時(shí)器每一次完成位置計(jì)算都會(huì)通過postMessage(positions)將位置信息返回給主線程，主線程通過onmessage接受信息，返回對(duì)象的data屬性就是新的positions。這樣一來FPS可以達(dá)到60左右，轉(zhuǎn)動(dòng)場(chǎng)景感覺的到卡頓。這是十分讓人欣喜的。

2. 性能分析

前面已經(jīng)說了在每一次位置計(jì)算中做10萬(wàn)次累加，未使用Web Worker的情況下FPS降到了7，下面是更多的數(shù)據(jù)（數(shù)據(jù)僅做對(duì)比，和當(dāng)前使用情況以及配合有關(guān)）。

累加次數(shù)（萬(wàn)次）	使用Web Worker	未使用Web Worker
1	60	60
3	60	39
5	60	26
7	60	11
9	60	8
11	60	6

這里面可以看出，不管是多么大量的計(jì)算，使用Web Worker都不會(huì)影響主線程，但是對(duì)于未使用Web Worker影響是十分嚴(yán)重的，下面展示一下兩種情況下電腦性能的對(duì)比

（未使用Web Worker）

（使用Web Worker）

上述內(nèi)容就是如何在three.js中使用多線程，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：如何在three.js中使用多線程-創(chuàng)新互聯(lián)
本文來源：http://jinyejixie.com/article6/dippig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、商城網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)