canvas教程

Oak3D 教程 第一课: Oak3D Engine 绘制流程(2)

字号+ 作者:H5之家 来源:H5之家 2017-03-22 16:02 我要评论( )

设置好了相机,但是场景还是空的,下面我们就要在这个场景中添加实体了!所谓的实体,也就是我们场景中的演员和布景,你可以把它们想象成《泰坦尼克号》这部电影中的东西,在电影中矮穷不丑的Jack、白富美的Rose和

设置好了相机,但是场景还是空的,下面我们就要在这个场景中添加实体了!所谓的实体,也就是我们场景中的演员和布景,你可以把它们想象成《泰坦尼克号》这部电影中的东西,在电影中矮穷不丑的Jack、白富美的Rose和高富帅的未婚夫这些活人演员都是场景中的实体,还有那条大船、那些盘子、甚至垃圾箱这些死物也都是场景中的实体。于是,我们使用createEntity()方法在场景中添加了一个类型为OAK.ETYPE_CUSTOM_MESH的实体。

31

通过指定OAK.ETYPE_CUSTOM_MESH参数,我们创建了一个名称为“MySphere”的okCustomMeshEntity实体对象。查看一下Oak3D API参考手册对它的描述——“允许开发者直接控制几何体数据”,意如其名,okCustomMeshEntity就是允许开发者自定义实体的模型几何体的数据。

然后,我们又通过为mySphereMesh变量赋值,获取到了刚刚创建的mySphere这个实体的内置Mesh。

32

如果你不知道Mesh是什么也不要紧,其实很简单。所谓的Mesh,就是模型、网格模型。同样,现在你暂时只需要这样理解就够了。

33 okGenSphereMesh

在Oak3D中,开发者封装了很多内置的几何体图形,例如矩形、立方体、球体、圆柱体、平截头体和圆锥体,如果场景内需要绘制这些图形,那么开发者不必自己编写具体的代码,也不需要导入任何模型,只要调用相应的接口,就可以自动生成这些图形。在这里,我们使用okGenSphereMesh()函数生成了一个半径为5,纵向和横向切分都是30的球体,并且开启了线框模式,最后将这个生成的球体网格储存在mySphereMesh,也就是我们刚刚创建的那个实体的内置Mesh——换句话说,我们把刚刚创建的实体的内置Mesh设置为球体网格。另外,你可以根据Oak3D API参考手册,把这条语句替换成别的什么图形,比如生成一个立方体或者圆锥体。

接下来的几条语句暂时不需要你做过多的理解,所以我们放到一起讲解。

34 35 36 37 mySphere.mySphere.mySphere..mySphere..

在生成了球体网格之后,我们先在第34行计算了这个球体网格的包围盒;在第35行设置了球体网格的位置;在第36行对材质开启了线框模式;在第37行设置了自发光颜色为白色。

到这里为止,我们已经完成了全部的准备工作,从创建引擎配置文件、建立引擎开始,到最后添加场景、在场景里添加实体并设置它的位置和颜色等等,我们已经万事俱备了,只差最后的绘制了。让我们开始吧!

39 40 41 42 43 44 45 myRenderer.myRenderer.myRenderer.  //present the image to the canvas myRenderer.

我们还是通过给myRenderer这个变量赋值的方法获取到了我们的引擎的渲染器,所有的最终绘制工作都将由渲染器完成。我们将我们的相机作为渲染开始的视图,然后开始渲染场景,最后渲染结束。最后,我们用okRenderer.present()方法将最终的渲染结果呈现到<canvas>上。

到此为止,我们实现了我们的第一个Hello, world程序。我们在Oak3D中完成了一个标准的WebGL绘制过程。让我们重新回顾一下这个过程。

好了,以上就是使用Oak3D Engine绘制图形的基本流程,是不是傻瓜啊?

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5游戏开发案例教程 -互联网+职业技能系列

    HTML5游戏开发案例教程 -互联网+职业技能系列

    2017-03-22 17:00

  • html+css视频教程全套下载

    html+css视频教程全套下载

    2017-03-22 10:04

  • html5特效 css3特效 html5教程下载 css3教程下载

    html5特效 css3特效 html5教程下载 css3教程下载

    2017-03-22 09:04

  • 微信小程序新手教程之canvas API

    微信小程序新手教程之canvas API

    2017-03-20 17:07

网友点评