feng3d

feng3d是使用TypeScript進行編寫基於WebGL的3D遊戲引擎，致力於打造一個優秀的3d遊戲引擎以及易用且可以快速開發項目的配套編輯器。

feng3d 的工作流

使用feng3d構建3D網絡應用程式很容易。 為了充分利用feng3d，你需要編寫一些代碼(特別是一些網絡的程式語言，比如Typescript(Javascript))。 但是，feng3d工具集旨在允許您可視化地編輯項目並以令人難以置信的簡單性發布。

創建和上傳素材資源

feng3d將支持各種工業標準資產格式。 例如，上傳圖片，3D模型，音頻文件或自定義文本或二進位文件格式。

構造場景

feng3d編輯器是一個可視化建築工具，用於構建場景。 使用內置組件，如3D模型、碰撞、粒子效果等，構建實體層次結構。

添加交互性

使用Typescript為您的實體附加自定義行為。 在任何規模上添加從簡單的點擊處理程序或軌道攝像機到完全大規模多玩家在線遊戲的交互性。

發布你的應用

feng3d編輯器提供了導出項目為一個zip壓縮包，執行index.html運行項目。

特性

1. 提供優質的typescript編輯器
2. 支持腳本，你能夠在這裡實現所有你想做的事情。
3. 支持自定義材質，只需要你提供shader代碼以及所有到的數據結構就可以實現你想要的渲染效果。

瀏覽器支持

feng3d 堅持設計為不需要任何插件在瀏覽器上原生運行的模式。用戶運行時環境為 100% JavaScript 實現，全部通過符合 HTML5 及相關 API (如 WebGL)工作。為什麼這樣設計如此重要？

• 移動/平板 設備無法提供插件安裝的權限，但卻在不斷完善對 HTML5 規範的支持。
• 不需要任何的安裝和額外加載過程。
• 運行在標準的[DOM][2]元素中(一個 Canvas 元素)，可以任意和其他頁面元素融合併通過 CSS 添加樣式
• 不依賴可能會隨著時間變化的第三方部分，僅僅依賴瀏覽器本身

在撰寫本文時，瀏覽器的要求如下：

快速開始添加html

在html中添加了feng3d.js

初始化feng3d

在feng3d.Engine構造時會默認創建場景與攝像機

var engine = new feng3d.Engine();

添加對象到場景

創建一個立方體並添加到場景

var cube = feng3d.GameObjectFactory.createCube();
cube.transform.z = 2;
cube.transform.y = -2;
engine.scene.gameObject.addChild(cube);

添加動畫

讓立方體每幀進行旋轉

feng3d.ticker.onframe(() =>
{
 cube.transform.ry++;
});

完整代碼

運行結果

更多使用方法可以查看官方文檔

開源地址：

https://gitee.com/feng3d/feng3d

更多更優質的資訊，請關注我，你的支持會鼓勵我不斷分享更多更好的優質文章。