/********************************************************/
/* 相關說明請參照編程起步一文 */
/* 加粗部分爲在原基礎上添加的js庫 */
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>第一個例子-一個紅色的立方體</title>
<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.material');
o3djs.require('o3djs.primitives');
//全局變量定義
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();
/***** 添加繪圖代碼 *****/
//創建一個帶光照的紅色材質
var material = o3djs.material.createBasicMaterial(
g_pack,
g_viewInfo,
[1, 0, 0, 1]); // 紅色
//用material材質畫一個立方體（半徑爲1）
var shape = o3djs.primitives.createCube(g_pack, material, 1);
//創建一個變換
var transform = g_pack.createObject('Transform');
//把創建的球體添加到變換中
transform.addShape(shape);
//變換必須作爲g_root的子孫
transform.parent = g_root;
}
</script>
</head>
<body>
<br/>
<!-- Start of O3D plugin -->
<div id="o3d" style="width: 600px; height: 500px;"></div>
<!-- End of O3D plugin -->
</body>
</html>