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广播站