o3d 基本教程框架和初步demos

wjlgryx

浏览: 305673 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

3D 文章

框架编程游戏 Windows Aptana

O3d 是一套开源的javascript API, 用来制作在浏览器中运行的3D 游戏，当然也可以用来展示商家的产品，做一些3D 模型。这系列教程会用一个个例子来展示如何写一个o3d 程序，展示o3d 所能够做的应用。

    巧妇难为无米之炊，首先当然需要一些基本的东西，像o3d 插件，这个可以在google code 中获取，给个链接http://code.google.com/intl/zh-CN/apis/o3d/ ，还有O3d 的库文件，这个我是在下载的demo 中直接拷出来了（在本章最后上传的附件中）所需要的基本上就这些了，到后来要导入模型的话就再说了，至于IDE ，哪个写js 写得顺手就是哪个了，我比较喜欢用aptana 。调试的话个人觉得firebug 就已经很强大了，像设置断点，查看局部变量等都很方便了。

    这一章介绍一个最基本的o3d 程序应该有的框架，就像在windows 下要写一个最基本的opengl 程序一样，需要建立一个窗口，处理一些键盘和鼠标的消息，设置回调函数，还有建立一个3D 世界所必须的视口等等，刚开始会做很多像这样的初始化和设置工作，像windows 编程一样，一开始可能会让人感到迷茫，这么多繁杂的东西，都不知道是用来干嘛的，为什么不能调用一个函数就搞定一切呢，其实如果搞不懂的话，可以先完全不管这些，正如这章的标题，这只是个框架，你可以从教程中把demo 下下来，作为程序框架，然后在上面改就可以了。随着学习的深入，再回过头去看看，便会逐渐理解那些东西了。

    好了，现在开始写一个最基本的o3d 程序吧。
    首先，这个毕竟是在浏览器中运行的，所以一个基本的HTML 结构是必须的，当然还要包含一些基本的js 库文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>my first o3d application</title>
<script type="text/javascript" src="o3djs/base.js"></script>
<script type="text/javascript">
// 下面包含一些实用库
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.primitives') ;
o3djs.require('o3djs.effect');
o3d 有一系列的库来帮助你简化一些繁琐的活，而你要调用其中的函数的话，只需要调用 o3djs.require('o3djs. ... ') 来包含所需要的类库。比如o3djs.math 中有许多数学运算的方法，进行矩阵的转换等等。

    接下来就要设置这个o3d 开始的地方吧（其实就是当页面加载完后回调的函数，一般js 程序都要做的一件事）
// 当页面加载完后调用init() 函数
// 当页面被关掉后调用uninit() 函数
window.onload = init;
window.onunload = uninit;
     在具体实现这两个函数前，先把接下来要用的一些全局变量定义好
var g_o3d ;
var g_math ;
var g_client ;
var g_pack ;
var g_finished = false ;   // for selenium testing

    然后就要定义init （）函数了，这个函数其实就做了一件事，那就是再调用 o3djs.util.makeClients() 函数, 这个函数是已经实现了的，它用来查找在整个html 文档中是否有id 用o3d 开头的元素（像o3d ，o3d_elem,o3d_lang 都是可以的），然后再这个元素里面开辟一块区域( 一个object) ，这个就相当于windows 的窗口了，以后操作都是在这里面进行的，所以这个函数所做的其实跟windows 编程中的建立窗口差不多。

    你也可以手工操作在html 中插入一个div

<div id="o3d" style="width: 600px; height: 600px;"></div>


不过makeClients 毕竟是自动化的，它会在开始检测你的浏览器是否装了o3d 插件，你的插件是否过时了等等（很婆妈啊。。。。），然后据说这个函数能够帮你的o3d 应用加速。
    扯了这么多，下面是这个很简洁的init 函数
function init () {
o3djs . util . makeClients ( initStep2 )
}
makeclients 的参数initStep2 是这个函数执行完毕后的回调函数。也就是说这个函数执行完后就执行initStep2 函数了。

如果说Init 函数是用来建立窗口的话，initStep2 函数就是用来初始化视口等这些一个3D 世界必须的东西。这些都可以说是套路吧，你程序不管怎么写，这些操作是必须的。

     下面一步步来看initStep2 这个函数：

    首先当然是定义这个函数了，clientElements 作为穿进去的参数，是makeClients 在找到id 是o3d 开头的元素后所建立的各个object 。
function initStep2(clientElements) {

     接下来就要用到上面定义的各个全局变量了
var o3dElement = clientElements [ 0 ];
g_client = o3dElement . client ;
g_o3d = o3dElement . o3d ;
g_math = o3djs . math ;
    o3dElement 是在HTML 中的一个元素，是DOM 的一部分（即是那个object ）
    g_client 是整个o3d 应用的入口点，
    g_o3d 是o3d 的命名空间，
    g_math 是整个数学库的命名空间。

    下面要创建一个包(pack) 来管理所有的对象(object) 和这些对象的生存时间，到后面讲到创建的模型，效果和材质时都是一个个对象。而这些对象就都由这个包来管理了
    g_pack = g_client.createPack();
接下来创建一个渲染图(renderGraph) ，用库函数renderGraph.createBasicView() 产生一个标准的渲染图。这个渲染图有两个绘图列表，一个用于绘制非透明材质的元素（性能绘图列表），另一个用于绘制透明材质元素（透明效果绘图列表）
var viewInfo = o3djs . rendergraph . createBasicView (
    g_pack ,
    g_client . root ,
    g_client . renderGraphRoot );
    然后就是建立绘制背景(drawContext) 。绘制背景定义了投影方式（让一个3d 世界显示在平面的显示器中需要用到投影的知识了，其实就是把3 维坐标系中各个点的坐标乘以一个矩阵，然后就得到一个2 维坐标系的坐标，在游戏编程中基本上用到的只有透视投影），还有照相机的位置，这个照相机只是个比较形象的概念，跟真实世界中相似，3D 世界中的东西最后都是投到这个照相机上，而坐在电脑前的玩家也通过这个照相机看到了一个接近真实的世界。
// 建立一个基本的透视投影
viewInfo . drawContext . projection = g_math . matrix4 . perspective (
   g_math . degToRad ( 30 ),
   g_client . width / g_client . height ,
    1 ,                   // 近切面的Z 轴坐标.
    5000 );               // 远切面的Z 轴坐标.

// 设置照相机
viewInfo . drawContext . view = g_math . matrix4 . lookAt ([ 0 , 1 , 5 ],   // eye
                                                  [ 0 , 0 , 0 ],   // target
                                                  [ 0 , 1 , 0 ]); // up

lookAt 方法有三个参数，第一个是照相机的位置坐标，第二个是照相机朝向的位置，第三个是照相机朝上位置的向量，比如[0,1,0] 就是正朝上。

好了，现在该基本的绘制背景已经设好了，照相机也准备好了，对准了适当的位置，现在就要在照相机前面的这个世界中放入你自己喜欢的东西了。这个要涉及到具体的模型，材质，纹理贴图等等细节了。这章暂不讨论。

到这里这章本该差不多结束了，除了在最后加个 unload() 然后把html 中的body 里的东西填一下。但是只是这样的话看不出有什么效果，这个是让人很不爽的，写了这么大堆东西连行不行都不知道，于是至少得在里面加一个东西，看看有什么效果啊。

下面这段代码就是用来创造一个球。
var effect = g_pack.createObject('Effect');

    var material = g_pack.createObject('Material');
    // Set the material's drawList.
    material.drawList = viewInfo.performanceDrawList;

    material.effect = effect;

     var shape = o3djs.primitives.createSphere(g_pack, material, 0.5, 20, 20);

    // Create a new transform and parent the Shape under it.
       g_cubeTransform = g_pack.createObject('Transform');
      g_cubeTransform.addShape(shape);
      // Parent the cube's transform to the client root.
g_cubeTransform.parent = g_client.root;

加一个结束的标志
    g_finished = true ;   // for selenium testing.
}

    程序结束调用的uninit() 函数，
function uninit() {
if (g_client) {
    g_client.cleanup();
}
}
</script>
</head>

    到这里还只是写了Html 中的head ，然后在body 中加入上文提到的id 是o3d 。。。的元素
<body>
<div id="o3d" style="width: 600px; height: 600px;"></div>
</body>
</html>
     到这里一个简单的o3d 程序就完成了。
    什么，你说这个不是球，只是一个很丑的圆，别激动嘛，这个确实是个球，不过还没有加上光照，材质和纹理，所以看不出立体感，不过能出来这个很丑的东西就说明你的程序能顺利运行了，接下要做的就是加上材质，纹理等等，把这个球美化起来。

分享到：

o3d 怎么用顶点数组创建一个3D 模型 | o3d 基本的矩阵操作

2011-03-17 11:55
浏览 896
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论