/dou3d-ts

WebGL 3D 引擎

Primary LanguageJavaScriptMIT LicenseMIT

dou3d-ts

逗3D，基于 WebGL 的 3D 引擎，整体框架参考 AS3 时代的 Away3D 引擎，具体的实现参考了部分 H5 3D 引擎。

本着以其看别人的引擎代码学习不如自己照着实现一个的想法，所以写了该引擎。

  • 该引擎主要是我自己为了了解3D底层运行原理而写，如果还有时间会扩充和完善示例。

  • 本引擎采用左手坐标系。

欢迎来我的博客，不定时发布 3D 学习心得。

开始上手

  1. 在编写代码之前请引入位于examples/lib文件夹中的dou.js和dou3d.js两个文件：
<script type="text/javascript" src="examples/lib/dou.js"></script>
<script type="text/javascript" src="examples/lib/dou3d.js"></script>
  1. 需要外部加载资源时，请注册加载类型解析器：
// 注册贴图解析器并绑定对应的文件后缀名
dou.loader.registerAnalyzer("texture", new dou3d.TextureAnalyzer());
dou.loader.registerExtension("jpg", "texture");
dou.loader.registerExtension("jpeg", "texture");
dou.loader.registerExtension("png", "texture");
  1. 启动引擎并创建View3D对象：
var engine = new dou3d.Engine();
var viewRect = engine.viewRect;
var view3D = new dou3d.View3D(0, 0, viewRect.w, viewRect.h);
view3D.on(dou3d.Event3D.RESIZE, function () {
    view3D.width = viewRect.w;
    view3D.height = viewRect.h;
});
engine.addView3D(view3D);
  1. 调整摄像机位置：
view3D.camera3D.lookAt(new dou3d.Vector3(0, 0, -1000), new dou3d.Vector3(0, 0, 0));
  1. 添加立方体对象：
var geometery = new dou3d.CubeGeometry();
var cube = new dou3d.Mesh(geometery);
view3D.scene.root.addChild(cube);

未来路线图

当前未实现的引擎必备功能

受时间和精力的限制，这部分的功能实现会在时间充裕之后补上。

  • 雾化；

  • 法线贴图、高光贴图等特殊效果贴图；

  • 阴影支持所有类型灯光，且支持多个光源；

  • 通用模型文件解码；

  • 专用模型格式导出插件；

  • 包围盒和视野剔除；

  • 碰撞和拾取；

  • 文本渲染；

  • 3D声音；

  • 单场景支持多个摄像机；

  • 自定义着色器渲染；

  • 粒子效果；

  • GUI；

  • 地形；

  • 效率优化（绘制批处理）；

引擎示例