o3d demos 跳动的球

wjlgryx

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

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<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');
o3djs.require('o3djs.io');
//全局变量定义
var g_o3d;        //o3d对象
var g_math;
var g_client;
var g_root;
var g_viewInfo;
var g_pack;
var g_balltran;   //球的 transform
var g_y = 0;      //球的高度
var g_up=0;       //球的移动方向

window.onload = init;
window.onunload = uninit;
function initGlobals(clientElements) {
var o3dElement = clientElements[0];
g_o3d = o3dElement.o3d;
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, 2, 15],
      [0, 0, 0],
      [0, 1, 0]);
}
function init() {
o3djs.util.makeClients(main);
}
function uninit(){
if(g_client)
g_client.cleanup();
}
/*
* 功能：生成篮球场地面
*/
function createGround(){
o3djs.io.loadTexture(
g_pack,            //容器
'pic/ground.jpg', //贴图路径
function(texture,exception){ //图片获取后的回调函数
   if(exception){
    alert(exception);
    return;
   }

   //创建无光照基本材质
   var mat = o3djs.material.createBasicMaterial(
    g_pack,
    g_viewInfo,
    texture
   );
   var verts = o3djs.primitives.createPlaneVertices(
    50,        //长
    23,        //宽
    1,         //长度分段
    1          //宽度分段
   );
        var tcs = verts.findStream(g_o3d.Stream.TEXCOORD, 0);
         //平面贴图默认为平铺方式，在此平面上，贴图纵横平铺5次
        for (var v = 0; v < tcs.elements.length; ++v) {
          tcs.elements[v] *= 5;
        }
        var shape = verts.createShape(g_pack, mat);
   g_root.addShape(shape);
}
);
}
/*
* 功能：创建篮球
*/
function createBall(){
//初始化球体 transform
g_balltran = g_pack.createObject('Transform');
//作为g_root的子孙
g_balltran.parent = g_root;
o3djs.io.loadTexture(
g_pack,            //容器
'pic/bball1.jpg', //贴图路径
function(texture,exception){ //图片获取后的回调函数
   //获取材质文件出现异常，弹出对话框
   if(exception){
    alert(exception);
    return;
   }

   //创建无光照基本材质
   var mat = o3djs.material.createBasicMaterial(
    g_pack,
    g_viewInfo,
    texture
   );
   var shape = o3djs.primitives.createSphere(
    g_pack,    //容器
    mat,       //材质
    0.4,         //半径
    32,         //轴向分段
    32          //高度分段
   );
   g_balltran.addShape(shape);
   //把球移动到地平面上
   g_balltran.translate(0,0.3,0);
}
);
}
/*
* 功能：篮球跳动
*/
function balljump(){
if (g_up) {
g_y += 0.02;
if(g_y >= 1)
   g_up=0;
}else{
g_y -= 0.02;
if(g_y <= 0)
   g_up=1;
}
g_balltran.identity();
g_balltran.translate(0,g_y + 0.3,0);
}

function main(clientElements){
initGlobals(clientElements);
initContext();
/***** 添加绘图代码 *****/
//创建地板
createGround();
//创建篮球
createBall();
//设置渲染回调函数，每次渲染后都会执行 balljump 函数
g_client.setRenderCallback(balljump);
}

</script>
</head>
<body>


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

</body>
</html>

分享到：