o3d demos 立方体的移动和缩放

wjlgryx

浏览: 307074 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

3D 文章

360

<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;
var g_transform;   //此对象用于移动的 transform

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(
      [0, 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);
//创建一个变换
g_transform = g_pack.createObject('Transform');
//把创建的球体添加到变换中
g_transform.addShape(shape);
//变换必须作为g_root的子孙
g_transform.parent = g_root;
}
function moveTo(){
var x = parseFloat(document.getElementById('txtX').value);
var y = parseFloat(document.getElementById('txtY').value);
var z = parseFloat(document.getElementById('txtZ').value);
//g_transform 还原
g_transform.identity();
//移动到xyz
g_transform.translate(x,y,z);
}
function rotate(){
var o = document.getElementById('selAxis');
var axis = o.options[o.selectedIndex].text;
//g_transform 还原
g_transform.identity();
//把角度转换为弧度
var a = Math.PI * parseFloat(document.getElementById('txtAng').value) / 180;
switch(axis){
case 'X' : g_transform.rotateX(a);break;
case 'Y' : g_transform.rotateY(a);break;
case 'Z' : g_transform.rotateZ(a);
}

}
function scale(){
var s = parseFloat(document.getElementById('txtS').value);
//g_transform 还原
g_transform.identity();
//x,y,z向等比缩放，缩放比例大于1放大，小于1缩小
g_transform.scale(s,s,s);
}
</script>
</head>
<body>


<div id="o3d" style="width: 600px; height: 400px;"></div>
<br/>
坐标：
x:<input type='text' id='txtX' style='width:50px' value='0'/>  
y:<input type='text' id='txtY' style='width:50px' value='0'/>  
z:<input type='text' id='txtZ' style='width:50px' value='0'/>  
<input type='button' value='移动' onclick='moveTo()'/>
</p>

旋转：坐标轴:
<select id='selAxis'><option>X</option><option>Y</option><option>Z</option></select>  
角度(0-360):<input type='text' id='txtAng' style='width:50px' value='0'/>  
<input type='button' value='旋转' onclick='rotate()'></p>
缩放比例：<input type='text' id='txtS' style='width:100px' value='0'/>
<input type='button' value='缩放' onclick='scale()'> 

</body>
</html>

分享到：

o3d 复制一个Transform的模型 | o3d demos 跳动的球

2011-03-16 18:05
浏览 799
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论