您的位置：首页 > Web前端 > JavaScript

使用O3D javascript API构建一个O3D应用

2009-09-01 15:44 961 查看

在HTML中导入所需要的js包。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>O3D Example</title>

<mce:script type="text/javascript" src="o3djs/base.js" mce_src="o3djs/base.js"></mce:script>
<mce:script type="text/javascript"><!--
//o3d js
// --></mce:script>

</head>
<body>
<h1>O3D Example</h1>
<!-- Start of O3D plugin -->
<div id="o3d" style="width: 600px; height: 600px;"></div>
<!-- End of O3D plugin -->
</body>
</html>

一个复杂的3D应用包含场景、摄像机、3D几何体、灯管和材质等。

o3djs.require('o3djs.util');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.primitives');
o3djs.require('o3djs.camera');
o3djs.require('o3djs.material');

//O3D程序的入口点
var g_client;
//3D视窗
var g_viewInfo;
//旋转角度
var g_animate_angle=0;

window.onload = function(){
o3djs.util.makeClients(initialize);
}

function initialize(clientElements) {
var o3d = clientElements[0];

//初始化程序入口client
g_client = o3d.client;

// 创建场景容器
var pack = g_client.createPack();

// 创建视窗
g_viewInfo = o3djs.rendergraph.createBasicView(
pack,g_client.root,g_client.renderGraphRoot);

// 创建材质
var material = o3djs.material.createBasicMaterial(
pack,g_viewInfo, [1, 0, 0, 1]);

// 创建一个正方体
var cube = o3djs.primitives.createCube(pack, material, 0.5);

// 创建3D物体的容器
var transform = pack.createObject('Transform');
transform.parent = g_client.root;
transform.addShape(cube);

// 初始化Camera
o3djs.camera.fitContextToScene(g_client.root,
g_client.width,
g_client.height,
g_viewInfo.drawContext);
//添加帧循环回调函数
g_client.setRenderCallback(onRender);
}

/**
* 帧循环回调函数
*/
function onRender(event){
//取得帧间隔时间
var elapsedTime = event.elapsedTime;
g_animate_angle += 0.1 * elapsedTime;

// camera的位置
var eye = [ Math.sin(g_animate_angle) * 1.0,
1.0,
Math.cos(g_animate_angle) * 1.0];

// camera的指向
var target = [0, 0, 0];

//告诉camera哪个方向是向上，本例中是y轴指向。
var up = [0, 1, 0];

//更新camera的位置
g_viewInfo.drawContext.view = o3djs.math.matrix4.lookAt(eye, target, up);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航