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