THREE.JS入門教程(5)你應當知道的十件事

2024-05-06 14:19:50

字體：大中小

來源：轉載

供稿：網友

Three.js是一個偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現真正意義的3D。但是目前這項技術還處在發展階段，資料極為匱乏，愛好者學習基本要通過Demo源碼和Three.js本身的源碼來學習。
0.簡介
嗨，這是我的第一篇關于如何寫出好的代碼的文章。和很多開發者一樣，我通過實踐學習，但同時我也向其他更有經驗的開發者們學習。在過去的幾個月中，我在canvas標簽上花了很多時間，我想如果把這段時間學到的關于WebGL和JavaScript的小技巧都寫下來，一定很有意思。有一些很具體，有一些卻很籠統，希望你們喜歡！
1.盡快寫一個原型
讓我們從簡單的開始。現在你有個絕妙的注意，那么你應該盡快就程序里最復雜的部分寫一個原型，看看這項技術是否可以實現你的想法。WebGL很強大，因為它可以直接操縱顯卡里的GPU，但是也別忘了你需要通過JavaScript才能訪問顯卡，這比顯卡內部運算的效率可是低多了。事實上，你的天才想法很可能被這種簡單事情擊敗。
2.使用THREE.JS處理3D
就像我的朋友Hakim一樣，我也完全理解我們正使用的技術的底層細節。理解表面之下的東西是很重要的，但是如果你使用three.js，它為你免去了如此多的煩惱。你可以將它用于Canvas，WebGL還有SVG，你也應該找到哪種方式合適你的需求。
3.避免SetInterval
這對所有使用JavaScript創建動畫的人來說，都是很重要的一點。為什么？假定你設定每20毫秒后執行一次某個函數，而這個函數需要執行超過20毫秒的時間，那么20ms之后，瀏覽器不會在乎，而是直接開始下一次執行。至少你可以使用SetTimeout來設置，在某個函數執行完之后，再次執行它。

事實上，有一個更加新潮卻還是半成品的函數，叫做requestAnimationFrame，它很棒。它很類似于setTimeOut函數，除了在這兩個方面：當標簽頁失去焦點時，它就不再運行了；現在這個函數還是依賴于瀏覽器的，標準以后還有可能變化。如果你想要更多的信息，可以訪問Paul Irish的博客。
4.使用倒序循環
這是個不錯的小技巧，可以讓你的循環更快。使用倒序，而且使用while循環。比如，這個循環：
代碼如下:
for(var a = 0; a < arr.length; a++) {
// 做一些什么
}

它的執行效率不如下面這個循環：
代碼如下:
// 假設數組arr存在
var aLength = arr.length;
while(aLength--) {
// 做一些什么
}

這可能沒幫你省多少開銷，因為執行的效率主要還是依賴于你在循環體里面干了什么。但如果你想程序的不必要開銷減少到最后一個字節，后一個循環肯定贏。

實話說，主要影響程序執行效率的還是數組緩存的長度。你可以（也確實應該）去看看JSPerf去了解這一點，以及其他影響JavaScript性能的因素。

上一篇：js隱藏與顯示回到頂部按鈕及window.onscroll事件應用

下一篇：一個級聯菜單代碼學習及removeClass與addClass的應用