[WEBGL] GLGE系列教程–第5节：代码整理

[复制链接]

奔跑的小兔

1602 主题	1 听众	2万积分

资深设计师

Rank: 7 Rank: 7 Rank: 7

纳金币: 24658
精华: 6

电梯直达

楼主

发表于 2012-8-30 16:37:28 |只看该作者 |倒序浏览

前几节感觉有点乱，所以贴出整套代码整理一下。首先你还是得需要准备好一个collada的模型 dae格式的 index.html XML/HTML Code 复制内容到剪贴板 html head title GLGE / title ! meta http-equiv =conten…
前几节感觉有点乱，所以贴出整套代码整理一下。
首先你还是得需要准备好一个collada的模型 dae格式的
index.html
XML/HTML Code复制内容到剪贴板

<html>

<head>

<title>GLGE</title>

<!–<meta http-equiv=”content-type” content=”text/html; charset=utf-8&

rime;>–>

<script type=”text/javascript” src=”glge-compiled.js”></script>

<!–<meta charset=”gb2312&

rime;>–>

</head>

<body>

<div>

</div><center><canvas id=”canvas” width=”800&

rime; height=”400&

rime;></canvas>

</center>

<script type=”text/javascript”>

var doc = new GLGE.Document();

doc.onLoad=function(){

//????

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

//????

gameScene=new GLGE.Scene();

gameScene=doc.getElement(“mainscene”);

gameRenderer.setScene(gameScene);

levelmap=new GLGE.HeightMap(“images/map.png”,120,120,-50,50,-50,50,0,50);

function render(){

gameRenderer.render();

}setInterval(render,1);

}

在这加载的是GLGE的场景配置的xml文件
XML/HTML Code复制内容到剪贴板

doc.load(“level.xml”);

</script>

</body>

</html>

导入 glge-compiled.js
设置xml文件
因为GLGE使用xml来解析和配置3D场景已经所有的属性和模型
level.xml
XML/HTML Code复制内容到剪贴板

<?xml version=”1.0&

rime;?>

<glge>

//空间 mesh

<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.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,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.000000,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>



//材质加载设置

<material id=”wallmaterial” specular=”0.5&

rime;>

<texture id=”wallcolour” src=”images/ao.jpg” />

<material_layer texture=”#wallcolour” mapinput=”UV1&

rime; mapto=”M_COLOR” /> </material>

<animation_vector id=”spin” frames=”200&

rime;>

<animation_curve channel=”RotY”>

<linear_point x=”1&

rime; y=”0&

rime; />

<linear_point x=”200″ y=”6.282″ />

</animation_curve>

</animation_vector>

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

//设置场景

<scene id=”mainscene” camera=”#maincamera” ambient_color=”#666″ fog_type=”FOG_NONE”>

//创建空间的mesh对象

<object id=”wallobject” mesh=”#cube” scale_x=”10″ scale_y=”10″ scale_z=”10″ material=”#wallmaterial” />

//创建模型，属性设置

<collada document=”duck.dae” animation=”#spin” rot_x=”1.57″ rot_y=”1.57″ loc_y=”-15″ loc_z=”6″ scale=”0.05″ />

//添加光照

<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” />

</scene>

</glge>

其实GLGE是一个很简单的引擎，相比C3DL更简单一些；来源：WEBGL广播站，