/********************************************************/
/* 相关说明请参照编程起步一文 */
/* 加粗部分为在原基础上添加的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>
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛