首頁 > web前端 > js教程 > THREE.JS入門教學(5)你該知道的十件事_基礎知識

THREE.JS入門教學(5)你該知道的十件事_基礎知識

WBOY
發布: 2016-05-16 17:42:57
原創
1297 人瀏覽過

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 = 00; a // 做些什麼
}

它的執行效率不如下面這個循環:
複製程式碼 程式碼如下:

// 假設陣列arr存在
var aLength = arr.length;
while(aLength-while(aLength-whi -) {
// 做一些什麼
}

這可能沒幫你省多少開銷,因為執行的效率主要還是依賴於你在循環體裡面乾了什麼。但如果你想程式的不必要開銷減少到最後一個字節,後一個循環肯定贏。

實話說,主要影響程式執行效率的還是陣列快取的長度。你可以(也確實應該)去看看JSPerf去了解這一點,以及其他影響JavaScript效能的因素。
5.使用紋理
在WebGL裡面把物體的任意一個細節都畫出來看上去很誘人,但是,如果有可能的話,你應當注意一下你是否能夠使用紋理,因為它能夠極大地提高性能。在某些特定的情況下,例如陰影或模糊效果,你也許不得不使用紋理,但在其他時候,你也應該時時注意你是否可以使用紋理。
6.使用緩存
這一點我在自己的試驗力試了很多,在幀循環中,你應當避免引用變數、物件或其他任何東西。基於這點原因,很值得把你的模型、頂點全部快取起來,這樣在渲染動畫的時候你就可以快速地存取到它們。
7.停用選取
我愛這一小程式碼,我把它放到任何包含Canvas或WebGL的頁面中。
複製程式碼 程式碼如下:

// 停用滑鼠選取DOM元素


// 停用滑鼠選取DOM元素
document. onselectstart = function() {
return false; };
你也可能只想在Canvas控制項中停用選取。這段是我在那些Canvas佔據了整個螢幕的專案中使用的程式碼。
8.避免在JavaScript中定義CSS
現在,在JavaScript中定義CSS簡直太方便了,尤其是你使用JQuery的時候
複製程式碼 程式碼如下:

// 盡量不要這樣做
$("#someid").css({
position: 'relative',
height: '30px',
width: '300px',
backgroundColor: '#A020F0'
});

是問題這樣做之後,你的JavaScript程式碼中很快就充斥著各種類型的CSS定義,而你同時又使用*.css檔案來定義CSS,潛在的問題很難被發現。更好的方法是:使用class模組化CSS,而且只在JavaScript中定義那些不能預知的CSS類別。
9.在物件中定義回調函數
我愛下面這段程式碼,這絕不是我自己想出來的,但它是如此整潔美觀。如果你有一大堆回呼函數要用,也許會這樣用的:
複製程式碼 程式碼如下:

$("#someid").click(function() {
// 回呼函數
// 傳回false在JQuery中會阻止訊息的傳遞與預設行為的放生
return false;
});

或者,你會回調一個在程式碼其他地方定義的鬆散的函數,例如這樣
複製程式碼 程式碼如下:

$("#someid").click(mySuperFunction);
function mySuperFunction(event) {
///🎜>//這裡做很多事情
return false;
}

這樣做會有一些問題。在第一段程式碼中,你在某個事件上綁定了匿名函數,你很難將該函數再從事件上解除。你當然可以解除某個事件上的所有函數,但你可能在它上面綁定了多個函數,而你只想解除一個。在第二種情況下,你的函數名稱污染了全域變數空間,程式碼的可維護性降低了。所以,考慮這樣做:
複製程式碼 程式碼如下:

$("#someid" ).click(callbacks.mySuperFunction);
// 所有的回呼函數都在callbacks物件中
var callbacks = {
mySuperFunction:function(event) {
// 更工作
return false;
}
}
// 解除某函數的綁定
$("#someid").unbind('click', callbacks.mySuperFunction);

這樣做整潔又乾淨,而且避免了上面提到的兩個問題。
10.鍊式三元運算子
我完全是從Paul Irish的《JQuery,你應該知道的11件事》中學到這個的。這非常好用,你也應該會喜歡。我們常這樣做:
複製程式碼 程式碼如下:

// 根據a的值為numberBasedOnA賦值
// 如果a大於5,則賦值200,否則賦值38
var numberBasedOnA = a > 5 ? 200 : 38;

但如果你想這樣做,例如,當值為多少時如何,當值大於多少時如何,當值更加大的時候如何,懂嗎?在這種情況下,鍊式三元運算子非常好用:
複製程式碼 程式碼如下:

var numberBasedOnA =
a a a a 64; >// 比這樣做更有效率
// when a >=15

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板