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

最新推荐文章于 2024-07-01 19:00:00 发布

fieldyang

最新推荐文章于 2024-07-01 19:00:00 发布

阅读量1k

点赞数

分类专栏： O3D 文章标签： function input button math 360

本文链接：https://blog.csdn.net/fieldyang/article/details/4724217

版权

O3D 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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();
}

<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='移动' οnclick='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='旋转' οnclick='rotate()'></p>
缩放比例：<input type='text' id='txtS' style='width:100px' value='0'/>
<input type='button' value='缩放' οnclick='scale()'> 

</body>
</html>