webgl 游戏_基于WebGL的3D游戏引擎

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++;});

完整代码

 My first feng3d app

运行结果

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

开源地址：

https://gitee.com/feng3d/feng3d

更多更优质的资讯，请关注我，你的支持会鼓励我不断分享更多更好的优质文章。