那一年,我們一起用Node.js開發3D使用者介面!
曾經想要用 Node.js 開發一些原生的應用程式或是 OpenGL 程式,但無論怎麼問,無所不答的 Google 大神都給我千篇一律的答案:『使用 HTML5 和 WebGL』。這答案其實不令人意外,因為截至目前為止,大多數學習使用 Node.js 的人都是 Web 開發者,其所提出的解決方案,理所當然都是與『瀏覽器』有關。想來有趣,Node.js 就是『與瀏覽器剛分手的 JavaScript Engine』,為何還要回頭與瀏覽器糾纏不清呢?於是,筆者開發並於 GitHub 釋出了一個 Node.js module - 『jsdx-toolkit』,讓 JavaScript 開發人員,可以輕易使用 Node.js 開發原生的桌面應用程式,更重要的是,不但可以寫炫麗的 3D UI,而且完全不需要靠『傻大個瀏覽器』。
如果想要載入圖片,並把物件 3D 旋轉,只需要這樣做:
當然,這樣還不夠看,目前也已經支援了 GStreamer ,所以影音播放也不是問題,並能將影片渲染在 3D 物件上。
達成這樣需求的程式一點都不難,短短不到 30 行就可以搞定:
此外,多數 JavaScript 開發者對 jQuery 應該相當熟悉,更喜愛其鏈狀(Chain)的寫法,同樣習慣也可以延用:
假設你已經對於這樣的開發有興趣,那你應該會更感興趣『動畫支援』:
還不滿足嗎?可以去研究 tests 目錄下的程式碼,有更多功能已經被實作。像是方便 UI 觸發反應效果的 State Machine,以及更多的小功能。開始動手玩吧!
後記
仍有許多功能待未來加入,而且目前難免會有 Bug,還請來踢館的人們,多多包涵,不吝指教。
如果想要載入圖片,並把物件 3D 旋轉,只需要這樣做:
var toolkit = require('jsdx-toolkit'); if (toolkit.init() != toolkit.INIT_SUCCESS) { console.log("Failed to initialize jsdx-toolkit."); process.exit(); } /* Create a new stage */ var stage = new toolkit.Stage(); stage.title = 'Rotate'; stage.resize(500, 500); stage.setColor(0, 0, 0, 255); stage.on(toolkit.EVENT_DESTROY, function() { toolkit.quit(); }); stage.show(); /* Load a image */ var texture1 = new toolkit.Texture; texture1.loadFile('fred.jpg'); texture1.setPosition(100, 100); texture1.rotate(toolkit.Y_AXIS, 30, 0, 0, 0); stage.add(texture1); toolkit.main();
當然,這樣還不夠看,目前也已經支援了 GStreamer ,所以影音播放也不是問題,並能將影片渲染在 3D 物件上。
達成這樣需求的程式一點都不難,短短不到 30 行就可以搞定:
var toolkit = require('jsdx-toolkit'); if (toolkit.gst_init() != toolkit.INIT_SUCCESS) { console.log("Failed to initialize jsdx-toolkit."); process.exit(); } /* Create a new stage */ var stage = new toolkit.Stage(); stage.title = 'VideoTexture'; stage.resize(400, 300); stage.setColor(0, 0, 0, 255); stage.on(toolkit.EVENT_DESTROY, function() { toolkit.quit(); }); stage.show(); /* Create a video texture */ var video = new toolkit.GstVideoTexture; video.setPosition(50, 50); video.loadFile('jushelf-demo.ogv'); video.rotate(toolkit.Y_AXIS, 30, 0, 0, 0); stage.add(video); video.play(); toolkit.main();
此外,多數 JavaScript 開發者對 jQuery 應該相當熟悉,更喜愛其鏈狀(Chain)的寫法,同樣習慣也可以延用:
stage.setTitle('VideoTexture').resize(400, 300).setColor(0, 0, 0, 255);
假設你已經對於這樣的開發有興趣,那你應該會更感興趣『動畫支援』:
texture1.animate(toolkit.EASE_IN_QUINT, 1000, { 'x': 5, 'y': 5, 'scale-x': 2.0, 'opacity': 0 });
還不滿足嗎?可以去研究 tests 目錄下的程式碼,有更多功能已經被實作。像是方便 UI 觸發反應效果的 State Machine,以及更多的小功能。開始動手玩吧!
後記
仍有許多功能待未來加入,而且目前難免會有 Bug,還請來踢館的人們,多多包涵,不吝指教。
THIS IS FREAKING COOOOOOOOOOOL!
回覆刪除Awesome! Btw, Why not just using nodejs-gir ?
回覆刪除https://github.com/creationix/node-gir
It's good to realize language bindings to libraries, but so complicated to me. :-/
回覆刪除I hope to make a good interface for using clutter in JavaScript, and also add special functionality what I like.
404
回覆刪除幫補資訊
回覆刪除https://github.com/cfsghost/jsdx-toolkit
目前改名成這個了
感謝提醒,已經更新了連結和內容。 :-)
回覆刪除