Godzilla. 2018-11-19
網(wǎng)站建設(shè)
適用于網(wǎng)頁(yè)設(shè)計(jì)師的最佳3D JavaScript庫(kù)
現(xiàn)代Javascript非常強(qiáng)大。特別是在WebGL庫(kù)和SVG/Canvas元素的支持下。使用正確的工具，您可以為Web構(gòu)建幾乎任何東西，包括基于瀏覽器的游戲和本機(jī)應(yīng)用程序。許多最新的突破性功能都是在3D上運(yùn)行的，在這篇文章中，我列出了目前可用于Web開(kāi)發(fā)人員的最佳3D JS庫(kù)。
Three.js
毫無(wú)疑問(wèn)，Three.js應(yīng)該位列榜首。從頭開(kāi)始學(xué)習(xí)可能有些復(fù)雜，但它也是更好的3D庫(kù)之一。它由一個(gè)核心組管理，并在GitHub上免費(fèi)發(fā)布。ThreeJS主要用于canvas元素，SVG元素和用于渲染的WebGL庫(kù)。
學(xué)習(xí)繩索是一項(xiàng)挑戰(zhàn)，至少需要中級(jí)Javascript知識(shí)。但您可以在Three.js文檔中找到完整的設(shè)置。如果你真的想在網(wǎng)上做3D，那么這個(gè)庫(kù)就適合你。這不是唯一的選擇，但它可能是初學(xué)者開(kāi)始快速構(gòu)建東西的最受歡迎的選擇。
Babylon.js
我喜歡的另一個(gè)強(qiáng)大的庫(kù)是Babylon.js。這個(gè)再次依賴于WebGL并且僅在Javascript中運(yùn)行。它比其他庫(kù)更受歡迎，但與Three.js的覆蓋范圍不同。
對(duì)于想要?jiǎng)?chuàng)建基于瀏覽器的網(wǎng)頁(yè)游戲的網(wǎng)站開(kāi)發(fā)者來(lái)說(shuō)，它仍然被廣泛認(rèn)為是一個(gè)強(qiáng)大的選擇。在主頁(yè)上，您可以找到大量的演示預(yù)覽和如何開(kāi)始3D游戲設(shè)計(jì)的技巧。
還有許多重要的資源鏈接，如GitHub repo和Babylon JS教程。所有這些教程都是由巴比倫團(tuán)隊(duì)設(shè)計(jì)的，所以他們是開(kāi)始學(xué)習(xí)這個(gè)圖書(shū)館的好地方。
Cannon.js
為了獲得一些與眾不同的東西，請(qǐng)?jiān)L問(wèn)Cannon.js。這并不強(qiáng)加通常的3D概念，而是作為基于Javascript的游戲的物理引擎。
Cannon.js應(yīng)該快速加載，以便您可以在頁(yè)面上快速渲染項(xiàng)目。它與大多數(shù)現(xiàn)代瀏覽器兼容，并附帶強(qiáng)大的API，可以從中構(gòu)建您自己的物理創(chuàng)意。
它適用于Canvas元素和WebGL應(yīng)用程序。唯一困難的部分是研究圖書(shū)館并克服初始學(xué)習(xí)曲線?？匆幌翯itHub演示頁(yè)面，了解Cannon.js在瀏覽器中的樣子以及它為何如此優(yōu)秀。
CopperLicht
像CopperLicht這樣的名字你可能不知道會(huì)發(fā)生什么。但這是一個(gè)強(qiáng)大的3D Javascript渲染引擎，專為基于Web的JS游戲而構(gòu)建。
同樣，它是100％開(kāi)源的，可以免費(fèi)用于任何項(xiàng)目。建立CopperLicht的公司確實(shí)有一些優(yōu)質(zhì)的軟件和工具，但這些并不是學(xué)習(xí)CopperLicht庫(kù)所必需的。事實(shí)上，學(xué)習(xí)所有功能都很困難，因?yàn)樗С忠幌盗?D功能，如陰影/燈光，特效和3D頁(yè)面元素交互。
教程頁(yè)面是最好的起點(diǎn)，如果你采取這種方式，愿意慢慢來(lái)。盡管獲得回報(bào)非常值得，但仍有一條陡峭的學(xué)習(xí)曲線可以讓CopperLicht得以實(shí)現(xiàn)。
Phoria.js
對(duì)于基于Web的移動(dòng)和屏幕上的3D效果您可以嘗試Phoria.js。 它實(shí)際上是一個(gè)圖形庫(kù)，但Phoria植根于HTML5 canvas元素中的3D表示。
主站點(diǎn)運(yùn)行了很多演示，是一個(gè)相當(dāng)合理的庫(kù)來(lái)創(chuàng)建3D圖形。學(xué)習(xí)曲線并不太難，您可以在網(wǎng)站上找到許多可以復(fù)制/粘貼的代碼片段。
此外，您甚至不使用WebGL，因此您不必?fù)?dān)心該庫(kù)。雖然你將不得不處理畫(huà)布的元素，但這也僅僅意味著練習(xí)。
Scene.js
對(duì)于在WebGL中運(yùn)行的內(nèi)容，請(qǐng)?jiān)L問(wèn)Scene.js。目前，在4.2版本中，這個(gè)巨大的開(kāi)源庫(kù)允許您為任何現(xiàn)代瀏覽器表示3D元素。
它得到了大型開(kāi)發(fā)團(tuán)隊(duì)的支持，并且經(jīng)過(guò)多年的重要更新，使其成為您可以使用的最佳3D渲染腳本之一。 但是，這被稱為顯示庫(kù)，因此它不僅僅用于渲染基本圖形。相反，這可以用于更復(fù)雜的任務(wù)，例如從不同角度設(shè)計(jì)多個(gè)對(duì)象視圖，甚至創(chuàng)建3D游戲的基本圖形。
D3.js
在瀏覽網(wǎng)頁(yè)時(shí)，您經(jīng)常會(huì)發(fā)現(xiàn)依賴于3D效果的圖形和圖形。其中許多都在D3.js中運(yùn)行，這是一個(gè)強(qiáng)大的Javascript庫(kù)來(lái)表示3D數(shù)據(jù)。
它也是一個(gè)完全免費(fèi)的開(kāi)源項(xiàng)目，有一個(gè)非常有用的GitHub頁(yè)面。目標(biāo)是在HTML中使用SVG元素和畫(huà)布來(lái)創(chuàng)建動(dòng)態(tài)數(shù)據(jù)，這些數(shù)據(jù)可以動(dòng)態(tài)顯示，旋轉(zhuǎn)并最終直觀地顯示信息。
LightGL.js
我沒(méi)有在網(wǎng)上看到很多關(guān)于LightGL.js的內(nèi)容，但它是瀏覽器中3D渲染的絕佳選擇。
這個(gè)免費(fèi)的開(kāi)源庫(kù)在WebGL框架下運(yùn)行，是您可以使用的最快，最輕的庫(kù)。它的工作級(jí)別低于大多數(shù)抽象庫(kù)，因此需要更好地理解Javascript。
大多數(shù)開(kāi)發(fā)人員只想要簡(jiǎn)單，所以在水冷卻器周?chē)窒硭娜藬?shù)可能會(huì)減少。但是，如果您對(duì)使用Javascript感到滿意，LightGL將為您提供更多的代碼庫(kù)控制。
Seen.js
由于完全缺乏依賴關(guān)系，我必須在此列表中包含Seen.js。同樣，它在HTML5 canvas元素上運(yùn)行，但它可以在沒(méi)有任何其他必需庫(kù)的vanilla Javascript中運(yùn)行。
它對(duì)所有開(kāi)發(fā)人員完全免費(fèi)，并且可以在Apache 2.0許可下自由定制。考慮到它們僅使用Javascript構(gòu)建，一些演示非常瘋狂。
任何愿意突破基本3D可視化界限的人都可以看看Seen.js。它可能沒(méi)有像Three.js這樣的大型追隨者，但它是一個(gè)很好的畫(huà)布/SVG替代品，不會(huì)嚴(yán)重依賴WebGL。
文章標(biāo)簽：
JavaScript 網(wǎng)頁(yè)設(shè)計(jì)師
Godzilla 簽
為了在編輯、圖象設(shè)計(jì)方面進(jìn)一步的提高，我想投身于網(wǎng)站行業(yè)中，一展所長(zhǎng)，為所在的公司和社會(huì)貢獻(xiàn)一分力量!
文章評(píng)論：