O3D 例2- 立方体的移动、缩放和旋转


<html>
<head>
<!--
  
   通过transform 对象 实现 物体的移动、旋转和缩放
  主要实现函数为 transform 的 translate方法、rotate方法和scale方法 

  和例子1的主要区别为 添加了
  1. moveto 函数,实现移动
  2. rotate 函数,实现旋转
  3. scale  函数,实现缩放
  edited by fieldyang
--> 
<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>

<!-- Start of O3D plugin -->
<div id="o3d" style="width: 600px; height: 400px;"></div>
<br/>
坐标:
x:<input type='text' id='txtX' style='width:50px' value='0'/> &nbsp;
y:<input type='text' id='txtY' style='width:50px' value='0'/> &nbsp;
z:<input type='text' id='txtZ' style='width:50px' value='0'/> &nbsp;
<input type='button' value='移动' οnclick='moveTo()'/>
</p>

旋转:坐标轴:
<select id='selAxis'><option>X</option><option>Y</option><option>Z</option></select> &nbsp;
角度(0-360):<input type='text' id='txtAng' style='width:50px' value='0'/> &nbsp;
<input type='button' value='旋转' οnclick='rotate()'></p>
缩放比例:<input type='text' id='txtS' style='width:100px' value='0'/>
<input type='button' value='缩放' οnclick='scale()'>&nbsp;
<!-- End of O3D plugin -->
</body>
</html>

 

<!--转载请注明出处 -->

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值