o3d demos 画圆

wjlgryx

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

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

3D 文章

JavaScript 编程 Windows HTML 框架

这个Demo还没有添加任何东西，但是却可以让我们了解到基于O3D开发的程序框架。

一个O3D程序需要完成的任务如下：

1 创建一个O3D object
2 给全局变量赋值，并初始化程序库
3 创建pack以管理O3D objects
4 创建render graph
5 建立draw context（远景和视野转换）
6 创建一个效果，载入shader information
7 创建材质和形状，设置材质绘制列表，并且设置其他材质参数
8 将transforms和shapes加入到transform graph
9 创建primitives的绘制单元
10 设置回调函数，在3D场景每次被渲染时执行特殊的任务

下面是HTML代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Tutorial A1: Loading a scene</title>
</head>
<body>
<h1>Loading a scene.</h1>
This tutorial shows how we load and display a scene in O3D.

<div id="o3d_elem1" style="width:400px; height:300px" />

</body>
</html>

这段代码里定义了一个o3d_elem1元素，这是一个重点，后面会介绍到。
下面是JS代码：
<script type="text/javascript" src="o3djs/base.js"></script>

<script type="text/javascript" id="o3dscript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.camera');
o3djs.require('o3djs.pack');
o3djs.require('o3djs.scene');
window.onload = init;
window.onunload = unload;

//全局变量
var g_o3d;
var g_math;
var g_client;
var g_viewInfo;
var g_pack;
var g_finished = false;

function init()
{
o3djs.util.makeClients(initStep2);
}

function unload()
{
if (g_client)
g_client.cleanup();
}

function initStep2(clientElements)
{
var o3dElement = clientElements[0];
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
g_client = o3dElement.client;

g_pack = g_client.createPack();
g_viewInfo = o3djs.rendergraph.createBasicView(g_pack,
g_client.root,
g_client.renderGraphRoot);

g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30),
g_client.width / g_client.height,
1, //近切面的Z轴坐标.
5000); //远切面的Z轴坐标.
// 设置照相机
g_viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // eye
[0, 0, 0], // target
[0, 1, 0]); // up
}
</script>

o3djs.require加载O3D库文件。init() 和unload()则是HTML被载入和关闭时回调函数。从这里我们来分析一下O3D的执行过程：
(1) HTML载入时，执行init()，调用o3djs.util.makeClients()函数。这个函数的功能是查找在当前html文档中所有id以o3d开头的元素（像o3d，o3d_elem,o3d_lang等），然后在这些元素里面开辟一块区域(一个object)，这个就相当于windows的窗口，以后操作都是在这里面进行的，所以这个函数所做的其实跟windows编程中的建立窗口差不多。makeClients函数会生成一个o3dobject的数组，参数就是回调函数，makeClients会将这个o3dobject的数组传给其回调函数。
(2) 进入回调函数initStep2。可以在这个函数里做一些初始化的工作，clientElements[0]就是第一个object（这里你也可以访问其他的object，如果存在的话）。g_client是整个o3d应用的入口点， g_o3d是o3d的命名空间，g_math是整个数学库的命名空间。
(3) 创建一个包(pack)来管理所有的对象(object)和这些对象的生存时间。
(4) 创建一个渲染图(renderGraph),即g_viewInfo，然后设置照相机。
(5) 退出程序，执行unload()，清理所有callbacks。
到这里差不多就是一个完整的程序了，不过还没有任何东西可以显示，下面往场景里加入一些元素，代码直接加入到initStep2的尾部：
var effect = g_pack.createObject('Effect');
var material = g_pack.createObject('Material');
material.drawList = g_viewInfo.performanceDrawList;
material.effect = effect;
//创建一个球体
var shape = o3djs.primitives.createSphere(g_pack, material, 0.5, 20, 20);
g_cubeTransform = g_pack.createObject('Transform');
g_cubeTransform.addShape(shape);
g_cubeTransform.parent = g_client.root;

g_finished = true;//结束标志

可以看出来，O3d创建场景元素的过程和其他3D引擎很相似，首先创建一个材质渲染列表，然后创建object，将材质添加到物体上，最后将这个object添加到场景。现在我们可以看到场景中显示出一个物体了。

分享到：

o3d 轨迹球贴码 | o3d 简介

2011-03-17 09:28
浏览 776
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

o3d demos 画圆

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

o3d demos 画圆

评论

发表评论

相关推荐

bufferData

导入支持的格式(Import)

法线贴图

法线向量

ShowWebGL 强大的3D模型查看器

o3d 创建一个平面

o3d 常见几何图形创建

o3D 材质-定义透明材质

o3D 光照设定材质的光反射系数

O3D程序基本结构

Google 三维 JavaScript API

3D引擎CopperLicht（二）

3D引擎CopperLicht

o3d 文档原文

WebGL的框架

c3dl 官方教程(二)

C3DL 官方教程(一)

3D模型导入 CanvasMatrix.js引擎 demo(一)

c3dl 可以直接导入3dmax文件的3D引擎

o3d 模型导入引擎CanvasMatrix.js

最近访客更多访客>>