O3D 編程起步
1． 下載 o3djs js庫(kù) ，下載地址為 http://o3d.googlecode.com/svn/trunk/samples/o3djs/，請(qǐng)下載所有的js庫(kù)并放入一個(gè)文件夾中，文件夾名可任意，但建議命名為 o3djs 。
2． 引入base.js ， <script type="text/javascript" src="o3djs/base.js"></script> 網(wǎng)頁(yè)和文件夾同級(jí)。
3． 在<body> 內(nèi)加入 <div id="o3d" style="width:800px; height:600px" /> ，其中div 標(biāo)簽 id 必須以o3d開頭，width 和 height 是標(biāo)簽的寬和高。
當(dāng)然一個(gè)body內(nèi)可以放多個(gè)o3d插件，如：
<div id="o3d1" style="width:800px; height:600px" />
<div id="o3d2" style="width:800px; height:600px" />
4. 引入需要的js庫(kù)
o3djs.require('o3djs.util'); //o3d功能庫(kù)，通常是必需的
o3djs.require('o3djs.rendergraph'); //渲染，必須引入
o3djs.require('o3djs.math'); //o3d數(shù)學(xué)庫(kù)
目前o3d有30多個(gè)庫(kù)，關(guān)于庫(kù)的說(shuō)明，將在后續(xù)章節(jié)進(jìn)行詳細(xì)解說(shuō)。
5. 全局變量定義
var g_math; //全局?jǐn)?shù)學(xué)變量，進(jìn)行數(shù)學(xué)變換時(shí)需要
var g_client; //繪圖區(qū)對(duì)象
var g_root; //根變換對(duì)象，所有變換（transform）必須作為它的子孫
var g_viewInfo;//視圖
var g_pack; //對(duì)象容器，用于保存所有繪圖對(duì)象
6. 初始化全局變量
clientElements 為o3d對(duì)象，包含了所有id以o3d開頭的div對(duì)象（當(dāng)然通常我們一個(gè)頁(yè)面只需要一個(gè)o3d對(duì)象）
function initGlobals(clientElements) {
//o3d根元素，類似于html的document，獲取第一個(gè)o3d 對(duì)象
var o3dElement = clientElements[0];
g_client = o3dElement.client; //初始化繪圖區(qū)
g_math = o3djs.math; //初始化數(shù)學(xué)庫(kù)
g_root = g_client.root; //初始化根變換
g_pack = g_client.createPack(); //初始化對(duì)象容器
//初始化視圖信息
g_viewInfo = o3djs.rendergraph.createBasicView(
g_pack, //對(duì)象容器
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); // 遠(yuǎn)平面.
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
[3, 3, 3], // 眼睛位置 x,y,z
[0, 0, 0], // 目標(biāo)點(diǎn)
[0, 1, 0]); // 觀察方向 向上
}
8. 頁(yè)面初始化
//通常置放于 onload 事件中，如 window.onload = init;
function init() {
//初始化o3d插件，完成后執(zhí)行 main函數(shù) ，把clientElements作為參數(shù)傳遞給main
o3djs.util.makeClients(main);
}
//釋放繪圖區(qū)，否則在退出后還會(huì)繼續(xù)繪圖，通常置放與 onunload事件中，如 window.onunload = uninit;
function uninit(){
if(g_client)
g_client.cleanup();
}
9. 開始編寫繪圖函數(shù)
function main(){
initGlobals(clientElements);
initContext();
/**以下為自定義繪圖函數(shù)**/
}
注：o3d中，xyz 遵守右手法則，不過(guò)大拇指反向于屏幕，即 x為橫軸，右為正，左為負(fù)， y為縱軸，上為正，下為負(fù)， z為垂直于屏幕，指向屏幕外為正，只想屏幕里為負(fù)
為方便大家編寫第一個(gè)程序，特將初始化代碼整理如下，只需在添加繪圖代碼后添加繪圖即可：
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
您可能感興趣的文章:
- 上一篇：TextBox回車觸發(fā)事件
- 下一篇：獲取GridView隱藏列
