淺談three.js中的needsUpdate的應(yīng)用

2024-09-05 07:19:51

字體：大中小

供稿：網(wǎng)友

three.js里的很多對象都有一個needsUpdate屬性，文檔中很少有寫（不過three.js的文檔本來就沒多少，很多問題還得靠github上的issues），網(wǎng)上各式各樣的教程中也不太會寫這個，因為對于簡單的入門程序而言，是用不到這個屬性的。
那么這個屬性到底是用來干嘛的，一言以敝之就是告訴renderer這一幀我該更新緩存了，盡管作為一個標(biāo)志位用途很簡單，但是因為要知道為什么要更新緩存，要更新哪些緩存，所以還是有必要好好了解下的。
為什么需要needsUpdate
首先還是來看下為什么需要緩存，緩存的存在一般都是為了減少數(shù)據(jù)傳輸?shù)拇螖?shù)，從而減少程序在數(shù)據(jù)傳輸上消耗的時間，這里也是，一般一個物體(Mesh)要最后能夠成功顯示到屏幕前是很不容易的，需要轉(zhuǎn)三次戰(zhàn)場
首先是通過程序?qū)⑺械捻旤c數(shù)據(jù)和紋理數(shù)據(jù)從本地磁盤讀取到內(nèi)存當(dāng)中。
然后程序在內(nèi)存中做了適當(dāng)?shù)奶幚碇缶鸵獙⒛切┬枰L制到屏幕前的物體的頂點數(shù)據(jù)和紋理數(shù)據(jù)傳輸?shù)斤@存當(dāng)中。
最后在每一幀渲染的時候?qū)@存中的頂點數(shù)據(jù)和紋理數(shù)據(jù)flush到GPU中進行裝配，繪制。
根據(jù)那個金字塔式的數(shù)據(jù)傳輸模型，第一步顯然是最慢的，如果是在WebGL這樣的環(huán)境中通過網(wǎng)絡(luò)來傳輸，那就更加慢了，其次是從內(nèi)存?zhèn)鬏數(shù)斤@存的時間，這個后面會做一個簡單的數(shù)據(jù)測試。
然后是這三步操作的使用頻率，對于小場景來說，第一步是一次性的，就是每次初始化程序的時候就會將一個場景的所有數(shù)據(jù)都加載到內(nèi)存中了，對于大場景來說，可能會做一些異步加載，但是目前暫時不在我們考慮的問題當(dāng)中。對于第二步的頻率，應(yīng)該是這次要講的最主要的，首先寫個簡單的程序測試一下做這一步傳輸所帶來的消耗

復(fù)制代碼

上一篇：HTML5教程之html 5 本地數(shù)據(jù)庫（Web Sql Database）

下一篇：使用css如何制作時間ICON方法實踐