|
長(zhǎng)按上圖識(shí)別二維碼報(bào)名濟(jì)南源創(chuàng)會(huì) 現(xiàn)代 Web 開發(fā)在將體驗(yàn)和功能做到極致的同時(shí)，對(duì)于美觀的追求也越來越高，數(shù)據(jù)可視化、動(dòng)畫交互、2D/3D 等元素已然成為標(biāo)配。 以下是為 Web 開發(fā)者推薦的一些精品開源圖形庫，旨在專注于最常見的問題和最常用的東西。將針對(duì)動(dòng)畫（Animation）、數(shù)據(jù)可視化（Data Visualization）、2D/3D 分別整理，歡迎保持關(guān)注。 推薦閱讀：給 Web 開發(fā)人員推薦的開源圖形庫 —— 動(dòng)畫 1 2D 1 一、繪圖渲染  圖形：PixiJS http://www.oschina.net/p/pixijs 一個(gè) HTML5 構(gòu)建引擎，用最快、最靈活的 2D WebGL 渲染器創(chuàng)建漂亮的數(shù)字化內(nèi)容。旨在提供一個(gè)可以在所有設(shè)備上運(yùn)行的快速輕量級(jí) 2D 庫，幫助你創(chuàng)建豐富的交互式圖形、跨平臺(tái)應(yīng)用和游戲，而無需深入到 WebGL API 或處理瀏覽器和設(shè)備的兼容性。 效果預(yù)覽：http://pixijs./examples/ 圖形：Fabric.js https://www.oschina.net/p/fabric 一個(gè)可以輕松使用 HTML5 canvas 元素的庫，在 Canvas 元素之上提供交互對(duì)象模型，同時(shí)還包含 SVG-to-canvas 解析器。它可以幫助你在畫布上創(chuàng)建和填充對(duì)象，從簡(jiǎn)單的幾何圖形到成百上千路徑組成的復(fù)雜圖形。你可以通過鼠標(biāo)輕松的移動(dòng)、縮放和旋轉(zhuǎn)這些對(duì)象，修改它們的屬性（顏色、透明度，層疊順序）等等。 效果預(yù)覽：http:///demos/ 立體像素：Obelisk.js https://github.com/nosir/obelisk.js 這是一個(gè)構(gòu)建等距立體像素對(duì)象的 JavaScript 庫，通過提供簡(jiǎn)單靈活的 API ，可以輕松地在 HTML5 畫布中添加像磚、立方體、金字塔和斜率等等距像素元素。它嚴(yán)格遵循像素整齊的模式，在像素級(jí)別中處理所有渲染以獲得精確的像素排列。 字體：opentype.js https://opentype./ 這是一款是用于 TrueType 和 OpenType 字體的 JavaScript 解析器和寫入程序。它非常高效，可在瀏覽器和 node.js 中運(yùn)行。 創(chuàng)意：p5.js https://www.oschina.net/p/p5js P5.js 有完整的一套畫圖功能，既可當(dāng)作畫圖軟件使用，也包括支持與各類頁面元素交互的庫。但是，開發(fā)者沒有被限制自己的畫布上，他們可以把整個(gè)瀏覽器頁面作為自己的素描區(qū)域。正因?yàn)槿绱?，P5.js 有一個(gè) addon 庫能夠使開發(fā)者非常容易地與其它 HTML5 對(duì)象（包括文本、輸入、視頻、網(wǎng)絡(luò)攝像頭和聲音）進(jìn)行交互。 效果預(yù)覽：https://p5/reference/ 二、矢量圖形 Snap.svg https://www.oschina.net/p/snap-svg 一個(gè)顯示為現(xiàn)代 Web 準(zhǔn)備的 Javascript SVG 庫，專為現(xiàn)代瀏覽器而設(shè)計(jì)，支持最新的 SVG 功能，如屏蔽、剪切、模式、完整梯度、組等。旨在讓你使用 SVG 資源就像在 jQuery 中使用 DOM 一樣簡(jiǎn)單。效果預(yù)覽：http:///demos/ Rapha?l https://www.oschina.net/p/raphael 一個(gè)小型的 JavaScript 庫，用來簡(jiǎn)化在頁面上顯示矢量圖的工作。例如，如果要?jiǎng)?chuàng)建自定義的圖表或圖像裁剪和旋轉(zhuǎn)小部件，可以使用該庫簡(jiǎn)單而輕松地實(shí)現(xiàn)。Rapha?l 使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，這意味著創(chuàng)建的每一個(gè)圖形對(duì)象也是一個(gè) DOM 對(duì)象，可以附加 JavaScript 事件處理程序或稍后修改它們。它旨在提供一個(gè)適配器，能跨瀏覽器和更簡(jiǎn)單地繪圖矢量作品。 三、物理引擎 Matter.js https://www.oschina.net/p/matter-js 一個(gè)用于 Web 的 JavaScript 2D 物理引擎庫，它為開發(fā)者提供了許多的功能模塊，通過簡(jiǎn)單易用的 API 就可以實(shí)現(xiàn)例如彈跳、碰撞、重力、滾動(dòng)等物理效果。 效果預(yù)覽：http:///matter-js/demo/
1 3D 1 一、3D 繪圖（WebGL）  Three.js https://www.oschina.net/p/threejs 大名鼎鼎的 JavaScript 3D 庫，旨在構(gòu)建一個(gè)易于使用、輕量級(jí)的 3D 庫。它提供 <canvas>、<svg>、CSS3D 和 WebGL 渲染器，可以用來可創(chuàng)建各種三維場(chǎng)景。 效果預(yù)覽：https://three/examples/
Babylon.js https://www.oschina.net/p/babylon-js 這是一個(gè)基于 HTML5、WebGL、WebVR 和 Web Audio 構(gòu)建 3D 游戲的完整 JavaScript 框架，亦或者說是一個(gè) 3D 引擎。 效果預(yù)覽：http://www./
stackgl http:/// stackgl 是一個(gè)基于 browserify 和 npm 建立的開放 WebGL 軟件生態(tài)系統(tǒng)。它受 Unix 的啟發(fā)，一個(gè)模塊只做一件事，并做到最好。與許多 3D 引擎不同，stackgl 強(qiáng)調(diào)編寫著色器代碼，并提供強(qiáng)大的工具，如glslify，將 npm 的模塊化和生產(chǎn)力帶入 GLSL 。
二、物理引擎 Ammo.js http://github.com/kripken/ammo.js 一個(gè)用 C 語言編寫的物理庫，可以看作是 WebGL 上的 Bullet 物理引擎端口。Emscripten 會(huì)直接將項(xiàng)目的源碼從 C 轉(zhuǎn)換成 Javascript ，無需人工重寫，功能基本與原始 Bullet 相同。
cannon.js http://www.cannon/ 一個(gè)輕量級(jí)的 Web 3D 物理引擎，吸取了前面提到的 Three.js 和 Ammo.js 易用的 API 特點(diǎn)，可與任意使用 WebGL、Canvas 或 CSS3 的 3D 渲染器一起使用。 效果預(yù)覽：http://schteppe./cannon.js/
類似的還有 Oimo.js （http://lo-th./Oimo.js/），同樣是一個(gè)輕量級(jí)的 JavaScript 3D 物理引擎。
補(bǔ)充兩個(gè) VR 庫 A-Frame https://www.oschina.net/p/a-frame 一個(gè)由 Mozilla 開源的構(gòu)建虛擬現(xiàn)實(shí)體驗(yàn)的 Web 框架，使用 HTML 和 Entity-Component 制作 WebVR ，適用于 Vive、Rift、Daydream、GearVR 和桌面。
React VR https://www.oschina.net/p/react-vr 一個(gè)由 Facebook 開源的，用于創(chuàng)建在 Web 瀏覽器中運(yùn)行的 VR 應(yīng)用的框架。它將現(xiàn)代 API（如 WebGL 和 WebVR ）與 React 的聲明能力結(jié)合起來，通過各種設(shè)備提供適用于消費(fèi)者的體驗(yàn)。
|
|
|
