纳金网

标题: GLGE系列教程–第2节：添加光照 [打印本页]

作者: 奔跑的小兔 时间: 2012-8-30 16:31
标题: 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″ scale_z=”10″ />
</scene>

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

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

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

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

效果如下：

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

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