THREE.JS入門教程(1)THREE.JS使用前了解

2024-05-06 14:19:52

字體：大中小

供稿：網(wǎng)友

Three.js是一個偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現(xiàn)真正意義的3D。但是目前這項技術(shù)還處在發(fā)展階段，資料極為匱乏，愛好者學(xué)習(xí)基本要通過Demo源碼和Three.js本身的源碼來學(xué)習(xí)。

國外網(wǎng)站 aerotwist.com 有六篇較為簡單的入門教程，我嘗試著將其翻譯過來，與大家分享。
我在一些實驗項目中使用了Three.js，我發(fā)現(xiàn)它對快速上手瀏覽器3D編程確實很有幫助。通過Three.js，你不僅可以創(chuàng)建相機、物體、光線、材質(zhì)等等，還可以選擇著色器，可以決定使用何種技術(shù)（WebGL、Canvas或SVG）在網(wǎng)頁上渲染你的3D圖形。Three.js是開源的，你甚至可以參與到這個項目中來。但現(xiàn)在，我將把重點放在基礎(chǔ)的介紹上，我將向你展示如何使用這個引擎上。

盡管Three.js如此奇妙，但有時候它也會令人抓狂。比如，你將花費大量時間閱讀例程，做一些逆向工程（在我的情形下）來確定某個函數(shù)的作用，有時還要去GitHub上提問。如果你需要提問，Mr. doob和AlteredQualia是極好的選擇。

1.基礎(chǔ)
我假定你的三維圖形學(xué)知識過關(guān)，而且也在一定程度上掌握了JavaScript。如果不是這樣，那先去學(xué)一點吧，否則直接看這篇教程，也許會感到困惑。

在我們的三維世界里，我們有以下這些東西。我會帶你一步一步創(chuàng)建它們。
1.場景
2.渲染器
3.相機
4.物體（帶有材質(zhì)的）
當(dāng)然，你也可以創(chuàng)造些其他的什么東西，我也希望你如此做。
2.瀏覽器支持
簡單地看一下瀏覽器的支持情況吧。Google家的Chrome瀏覽器支持Three.js，在我的實驗里，無論是對渲染器的支持程度還是JavaScript解釋器的運行速度，Chrome都是做得最好的：它支持Canvas、WebGL和SVG，而且運行得非常快。FireFox瀏覽器排在第二位，它的JavaScript引擎的速度比Chrome慢了半拍，但是對渲染器的支持也很棒，而且FireFox的速度，隨著版本更新也越來越快。Opera瀏覽器正在逐漸增加對WebGL的支持，Mac上的Safari瀏覽器有一個開啟WebGL的選項。總體上，這兩個瀏覽器僅僅支持Canvas渲染。微軟家的IE9現(xiàn)在只支持Canvas渲染，而且微軟似乎并不樂意支持WebGL這個新特性，所以我們現(xiàn)在肯定不會用IE9來做實驗。
3.設(shè)置場景
假定你已經(jīng)選擇了一個支持所有渲染技術(shù)的瀏覽器，而且你準備通過Canvas或WebGL來渲染場景（這是更標準化的選擇）。Canvas比WebGL有著更廣泛地支持，但是WebGL可以直接在GPU上操作，這意味著你的CPU可以專注地處理非渲染類的工作，比如物理引擎或與用戶交互等。

無論你選擇何種渲染器，你都必須牢記在心的是：JavaScript代碼需要優(yōu)化。三維顯示對瀏覽器來說不是一項輕松的工作（現(xiàn)在能夠這樣做就很偉大了），所以如果你的渲染太慢了，你需要知道你代碼的瓶頸在何處，如果可能，改善它。

上一篇：使用jquery實現(xiàn)圖文切換效果另加特效

下一篇：jquery多行滾動/向左或向上滾動/響應(yīng)鼠標實現(xiàn)思路及代碼