GLGE系列教程–第2节：添加光照

奔跑的小兔

第一步：需要创建一个canvas的渲染器canvas id=canvas width=900 height=500/canvas 第二步：创建一个GLGE的加载类，var doc = new GLGE.Document();此类可以加载场景，模型， 网格，对象和xml文件具体请查…
第一步：需要创建一个canvas的渲染器
XML/HTML Code复制内容到剪贴板

<canvas id=”canvas” width=”900&rime; height=”500&rime;></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复制内容到剪贴板

<mesh id=”cube”>   

<positions>-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</positions>
<normals>-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</normals>
<uv1>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</uv1>
<faces>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</faces>
</mesh>   

然后我们需要创建一个摄像机
XML/HTML Code复制内容到剪贴板

<camera id=”maincamera” loc_y=”20&rime; loc_x=”1&rime; loc_z=”8&rime; rot_order=”ROT_XZY” xtype=”C_ORTHO” rot_z=”0&rime; rot_x=”1.56&rime; rot_y=”3.141&rime; />   

接下来我们需要创建一个场景的配置，在这里我们需要在场景中设置相机，场景颜色，类型，并且给场景
设置一个网格的矩形空间mesh=”#cube”，object作用是可以渲染一个场景。
XML/HTML Code复制内容到剪贴板

<scene id=”mainscene” camera=”#maincamera” ambient_color=”#666&rime; fog_type=”FOG_NONE”>
<object id=”wallobject” mesh=”#cube” scale_x=”10&rime; scale_y=”10&Prime; scale_z=”10&Prime; />
</scene>   

现在你运行就可以看到一个简单的场景了，接下来我们给场景设置属性，是场景看起来像立体空间。

light的作用是给场景创建一个新light资源
XML/HTML Code复制内容到剪贴板

<light id=”mainlight” loc_x=”0&Prime; loc_y=”15&Prime; loc_z=”10&Prime; rot_x=”-1.3&Prime;  attenuation_constant=”0.5&Prime; type=”L_POINT” />     

<light id=”mainlight” loc_x=”20&Prime; loc_y=”25&Prime; loc_z=”5&Prime; rot_x=”1.3&Prime;  attenuation_constant=”0.5&Prime; type=”L_POINT” />   

效果如下：

光照源码下载地址：http://vdisk.weibo.com/s/z73w/1314630328  来源：WebGL广播站