纳金网

标题: GLGE系列教程–第1节：创造第一个场景【转】 [打印本页]

作者: 奔跑的小兔 时间: 2012-8-30 16:30
标题: GLGE系列教程–第1节：创造第一个场景【转】
第一步：需要创建一个canvas的渲染器第二步：创建一个GLGE的加载类，var doc = new GLGE.Document();此类可以加载场景，模型，网格，对象和xml文件具体请查阅api文档。第三步：创建网页自动…
第一步：需要创建一个canvas的渲染器

第二步：创建一个GLGE的加载类，var doc = new GLGE.Document();此类可以加载场景，模型，

网格，对象和xml文件具体请查阅api文档。

第三步：创建网页自动加载函数doc.onLoad=function(){}

以下步骤比较简单：
JavaScript Code复制内容到剪贴板

//获得渲染器

var gameRenderer=new GLGE.Renderer(document.getElementById(‘canvas’));

//创建一个新的场景

gameScene=new GLGE.Scene();

//获得场景元素

gameScene=doc.getElement(“mainscene”);

//渲染器设置场景

gameRenderer.setScene(gameScene);

//渲染

function render(){

gameRenderer.render();

}

//启动线程循环渲染

setInterval(render,1);

}

//加载资源xml文件

doc.load(“level.xml”);

接下来我们需要设置的是level.xml文件中的内容：

打开xml文件首先设置一个网格的矩形空间，如下：
XML/HTML Code复制内容到剪贴板

-4.999998,5.000002,0.000000,5.000000,5.000000,0.000000,5.000002,4.999998,3.000000,-

4.999998,5.000002,0.000000,5.000002,4.999998,3.000000,-5.000000,5.000000,3.000000,-5.000000,-4.999999,0.000000,-4.999998,5.000002,0.000000,-

5.000000,5.000000,3.000000,-5.000000,-4.999999,0.000000,-5.000000,5.000000,3.000000,-5.000002,-4.999998,3.000000,5.000000,-5.000000,0.000000,-

5.000000,-4.999999,0.000000,4.999997,-5.000003,3.000000,-5.000000,-4.999999,0.000000,-5.000002,-4.999998,3.000000,4.999997,-

5.000003,3.000000,5.000000,5.000000,0.000000,5.000000,-5.000000,0.000000,5.000002,4.999998,3.000000,5.000000,-5.000000,0.000000,4.999997,-

5.000003,3.000000,5.000002,4.999998,3.000000,5.000002,4.999998,3.000000,4.999997,-5.000003,3.000000,-5.000000,5.000000,3.000000,4.999997,-

5.000003,3.000000,-5.000002,-4.999998,3.000000,-5.000000,5.000000,3.000000,5.000000,5.000000,0.000000,-4.999998,5.000002,0.000000,-5.000000,-

4.999999,0.000000,5.000000,5.000000,0.000000,-5.000000,-4.999999,0.000000,5.000000,-5.000000,0.000000 -0.000000,-1.000000,-0.000001,-0.000000,-1.000000,-0.000001,-0.000000,-1.000000,-0.000001,-0.000000,-1.000000,-0.000001,-0.000000,-

1.000000,-0.000001,-0.000000,-1.000000,-0.000001,1.000000,-0.000000,0.000000,1.000000,-0.000000,0.000000,1.000000,-0.000000,0.000000,1.000000,-

0.000000,0.000000,1.000000,-0.000000,0.000000,1.000000,-

0.000000,0.000000,0.000000,1.000000,0.000001,0.000000,1.000000,0.000001,0.000000,1.000000,0.000001,0.000000,1.000000,-0.000000,0.000000,1.000000,-

0.000000,0.000000,1.000000,-0.000000,-1.000000,0.000000,0.000001,-1.000000,0.000000,0.000001,-1.000000,0.000000,0.000001,-1.000000,0.000001,-

0.000001,-1.000000,0.000001,-0.000001,-1.000000,0.000001,-0.000001,0.000000,0.000000,-1.000000,0.000000,0.000000,-1.000000,0.000000,0.000000,-

1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,-0.000000,0.000000,1.000000,-

0.000000,0.000000,1.000000,-0.000000,0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000
0.000000,0.000000,1.000000,0.000000,1.000000,1.000000,0.000000,0.000000,1.000000,1.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,

1.000000,1.000000,0.000000,0.000000,1.000000,1.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,1.000000,0.000000,1.000

000,1.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,1.000000,0.000000,1.000000,1.000000,0.000000,1.000000,0.000000,0

.000000,1.000000,0.000000,0.000000,1.000000,1.000000,0.000000,1.000000,1.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,1.000000,1.0000

00,0.000000,0.000000,1.000000,1.000000,0.000000,1.000000

0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35

然后我们需要创建一个摄像机
接下来我们需要创建一个场景的配置，在这里我们需要在场景中设置相机，场景颜色，类型，并且给场景

设置一个网格的矩形空间mesh=”#cube”，object作用是可以渲染一个场景。
转发请注明 WEBGL广播站
下载地址：http://vdisk.weibo.com/s/z72t/1314630174 来源：WebGL广播站

欢迎光临纳金网 (http://go.narkii.com/club/)