o3d demos 立方体的移动和缩放

最新推荐文章于 2022-11-08 20:21:49 发布

佐笾已逝

最新推荐文章于 2022-11-08 20:21:49 发布

阅读量128

点赞数

分类专栏： 3D 文章文章标签： 360

本文链接：https://blog.csdn.net/wjlgryx/article/details/83872862

版权

3D 文章专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<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='移动' ο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>