|
今天開始學(xué)習(xí)three.js，之前也聽說過這個(gè)引擎。我們應(yīng)該怎么稱呼它呢？ Three.js在Github上是這么說的：JavaScript 3D library The aim of the project is to create an easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers. 我斗膽翻譯一下： 用jacascript腳本來編寫的、運(yùn)行在瀏覽器中的3D庫(kù)！ 目的是創(chuàng)建一個(gè)易于使用的、輕量級(jí)的3D庫(kù)，它能提供<canvas>、<svg>、 CSS3D 和 WebGL渲染器。于新手來說，這里面又有幾個(gè)新名詞了，什么鬼？<canvas>、<svg>、CSS3D、WebGL。熟悉js的朋友應(yīng)該對(duì)前面3個(gè)很熟悉了。 <canvas>是HTML5新增的一個(gè)標(biāo)簽元素！就是承載繪制圖像的??！比如通過JS畫個(gè)圓圈，畫個(gè)三角形等等。<canvas>本身不能繪制，只能用于顯示！ <svg>是什么呢？和<canvas>相似，繪圖的。自己可以繪制！他們有區(qū)別沒？有！我BAIDU了一個(gè)比較，做參考： canvas和svg的共同點(diǎn)：1. 都是新的html支持點(diǎn)，很可能都會(huì)加入w3c正式標(biāo)準(zhǔn) 2. 都可以和html良好結(jié)合，無需插件 3. 都可以用css和JS進(jìn)行操作 4. 瀏覽器對(duì)他們的支持都還不完備，各有各的私有屬性 5. ie系列對(duì)canvas和svg都基本抓瞎 canvas和svg的區(qū)別： 1. canvas畫的圖形都是一體的沒法獨(dú)立操作，而svg的每個(gè)圖形都可以獨(dú)立操作 2. canvas畫10000條線，頁(yè)面上還是只有一個(gè)canvas元素；svg畫10000條線，那頁(yè)面中就可能會(huì)加入10000個(gè)標(biāo)簽 3. canvas操作單獨(dú)圖形的方法是清除掉再重繪，svg則直接操作那個(gè)圖形所在的標(biāo)簽即可。 4. canvas畫出的圖形可以稱之為位圖，而svg畫出的是矢量圖 5. 重要：canvas的圖形對(duì)搜索引擎是一片黑，而svg的圖形由于可以?shī)A帶文本，seo毫無壓力 下面說重點(diǎn)了，WebGL是什么鬼？？？ 做過圖形圖像開發(fā)，玩過OpenGL的肯定知道了，其中的GL就是（Graphics Library）圖形庫(kù)的意思。他們都有GL這2個(gè)關(guān)鍵字，說明都是是底層圖形庫(kù)，干嘛的？繪制圖形的，什么點(diǎn)線面，三角形，圓柱體等等?？梢詣?chuàng)建3D場(chǎng)景??！ WebGL很明顯就是可以在瀏覽器上面繪制圖形的。是瀏覽器上一中3D標(biāo)準(zhǔn)。 此時(shí)，有朋友可能會(huì)問，以前在網(wǎng)頁(yè)也可以看3D場(chǎng)景啊，不是很早就有了嗎？還玩過3D網(wǎng)頁(yè)游戲呢！難道以前的不是WebGL嗎？ 是的，以前有過，F(xiàn)lash3D，Unity3D，Virtools等工具制作3D場(chǎng)景，都可以發(fā)布網(wǎng)頁(yè)，然后在網(wǎng)頁(yè)上運(yùn)行大型3D游戲。但是，我說的是但是，都有一個(gè)通病，就是必須要安裝瀏覽器插件，每個(gè)開發(fā)工具都有自己的插件。還有版本問題。用戶下載安裝各種煩躁?。。。。]有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)?。。?br> WebGL就是為了統(tǒng)一這個(gè)標(biāo)準(zhǔn)而誕生的，有了它，瀏覽器不需要安裝任何插件，你通過本文的主角three.js編寫的3D場(chǎng)景就可以在瀏覽器上縱橫捭闔，一路向西。暢通無阻的運(yùn)行了。這個(gè)真是一個(gè)大好事！??！ 重點(diǎn)是：蘋果公司的Safari瀏覽器帶頭支持，然后其他如：谷歌瀏覽器、火狐瀏覽器、Opera瀏覽器都支持。IE（剛開始不敢，后來扛不住，IE11版本也支持了！）瀏覽器支持、當(dāng)然國(guó)內(nèi)的瀏覽器如果選擇（兼容模式即谷歌瀏覽器內(nèi)核肯定支持了，如果選擇IE模式，那就需要選擇IE11以上咯）。 如果想在你的網(wǎng)頁(yè)里面開發(fā)自己的3D場(chǎng)景，那就開始吧。不再猶豫！ [原創(chuàng)，如果轉(zhuǎn)載請(qǐng)注明出處！謝謝！] |
|
|
