O3D 例1-红色立方体

最新推荐文章于 2024-07-11 16:28:08 发布

原创最新推荐文章于 2024-07-11 16:28:08 发布 · 855 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #math #编程

O3D 专栏收录该内容

4 篇文章

订阅专栏

/********************************************************/

/* 相关说明请参照编程起步一文 */

/* 加粗部分为在原基础上添加的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/>

<div id="o3d" style="width: 600px; height: 500px;"></div>

</body>
</html>