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數學庫
目前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爲垂直於屏幕,指向屏幕外爲正,只想屏幕裏爲負
爲方便大家編寫第一個程序,特將初始化代碼整理如下,只需在添加繪圖代碼後添加繪圖即可: