O3D 编程起步

 

 

 

 

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插件,如:

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

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

 

4. 引入需要的js

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

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

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

目前o3d30多个库,关于库的说明,将在后续章节进行详细解说。

5. 全局变量定义

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

var g_client;  //绘图区对象

var g_root;     //根变换对象,所有变换(transform)必须作为它的子孙

var g_viewInfo;//视图

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

6. 初始化全局变量

    clientElements o3d对象,包含了所有ido3d开头的div对象(当然通常我们一个页面只需要一个o3d对象)

function initGlobals(clientElements) {

       //o3d根元素,类似于htmldocument,获取第一个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为垂直于屏幕,指向屏幕外为正,只想屏幕里为负

  

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

 

 

 

 

  

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章