O3D 编程起步

来源：互联网发布：深圳中医诊所知乎编辑：程序博客网时间：2024/05/17 06:46

1．下载 o3djs js库，下载地址为 http://o3d.googlecode.com/svn/trunk/samples/o3djs/，请下载所有的js库并放入一个文件夹中，文件夹名可任意，但建议命名为 o3djs 。

2．引入base.js ， <script type="text/javascript" src="o3djs/base.js"></script> 网页和文件夹同级。

3．在<body> 内加入 <div id="o3d" style="width:800px; height:600px" /> ，其中div 标签 id 必须以o3d开头，width 和 height 是标签的宽和高。

当然一个body内可以放多个o3d插件，如：

4. 引入需要的js库

o3djs.require('o3djs.util'); //o3d功能库，通常是必需的

o3djs.require('o3djs.rendergraph'); //渲染，必须引入

o3djs.require('o3djs.math'); //o3d数学库

目前o3d有30多个库，关于库的说明，将在后续章节进行详细解说。

5. 全局变量定义

var g_math; //全局数学变量，进行数学变换时需要

var g_client; //绘图区对象

var g_root; //根变换对象，所有变换（transform）必须作为它的子孙

var g_viewInfo;//视图

var g_pack; //对象容器，用于保存所有绘图对象

6. 初始化全局变量

clientElements 为o3d对象，包含了所有id以o3d开头的div对象（当然通常我们一个页面只需要一个o3d对象）

function initGlobals(clientElements) {

//o3d根元素，类似于html的document，获取第一个o3d 对象

var o3dElement = clientElements[0];

g_client = o3dElement.client; //初始化绘图区

g_math = o3djs.math; //初始化数学库

g_root = g_client.root; //初始化根变换

g_pack = g_client.createPack(); //初始化对象容器

//初始化视图信息

g_viewInfo = o3djs.rendergraph.createBasicView(

g_pack, //对象容器

g_client.root, //根变换

g_client.renderGraphRoot, //根渲染

[0.9,0.9,0.9,1]); //插件背景色 r,g,b,alpha(透明)

}

7. 初始化绘图上下文

function initContext() {

//投影方式，透视投影

g_viewInfo.drawContext.projection = g_math.matrix4.perspective(

g_math.degToRad(30), // 30度投射.

g_client.width / g_client.height, // 插件高宽比例

0.5, // 近平面.

5000); // 远平面.

g_viewInfo.drawContext.view = g_math.matrix4.lookAt(

[3, 3, 3], // 眼睛位置 x,y,z

[0, 0, 0], // 目标点

[0, 1, 0]); // 观察方向向上

}

8. 页面初始化

//通常置放于 onload 事件中，如 window.onload = init;

function init() {

//初始化o3d插件，完成后执行 main函数，把clientElements作为参数传递给main

o3djs.util.makeClients(main);

}

//释放绘图区，否则在退出后还会继续绘图，通常置放与 onunload事件中，如 window.onunload = uninit;

function uninit(){

if(g_client)

g_client.cleanup();

}

9. 开始编写绘图函数

function main(){

initGlobals(clientElements);

initContext();

/**以下为自定义绘图函数**/

}

注：o3d中，xyz 遵守右手法则，不过大拇指反向于屏幕，即 x为横轴，右为正，左为负， y为纵轴，上为正，下为负， z为垂直于屏幕，指向屏幕外为正，只想屏幕里为负

为方便大家编写第一个程序，特将初始化代码整理如下，只需在添加绘图代码后添加绘图即可：

view plaincopy to clipboardprint?
<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>初始化</title>

<mce:script type="text/javascript" src="o3djs/base.js" mce_src="o3djs/base.js"></mce:script>

<mce:script type="text/javascript" id="o3dscript"></mce:script>

</head>

<body>

<br/>



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



</body>

</html>
<html>

<head>

<mce:script type="text/javascript" src="o3djs/base.js" mce_src="o3djs/base.js"></mce:script>

<mce:script type="text/javascript" id="o3dscript"><!--
o3djs.require('o3djs.util');

o3djs.require('o3djs.math');

o3djs.require('o3djs.rendergraph');

//全局变量定义

var g_math;

var g_client;

var g_root;

var g_viewInfo;

var g_pack;

window.onload = init;

window.onunload = uninit;

function initGlobals(clientElements) {

var o3dElement = clientElements[0];

g_client = o3dElement.client;

g_math = o3djs.math;

g_root = g_client.root;

g_pack = g_client.createPack();

g_viewInfo = o3djs.rendergraph.createBasicView(

g_pack,

g_client.root,

g_client.renderGraphRoot,

[0.9,0.9,0.9,1]);

}

* 初始化上下文

function initContext() {

g_viewInfo.drawContext.projection = g_math.matrix4.perspective(

g_math.degToRad(30),

g_client.width / g_client.height,

0.5,

5000);

g_viewInfo.drawContext.view = g_math.matrix4.lookAt(

[3, 3, 3],

[0, 0, 0],

[0, 1, 0]);

}

function init() {

o3djs.util.makeClients(main);

}

function uninit(){

if(g_client)

g_client.cleanup();

}

function main(clientElements){

initGlobals(clientElements);

initContext();

/***** 添加绘图代码 *****/

}
// --></mce:script>

</head>

<body>

<br/>

</body>

</html>