o3d 例子-跳动的篮球

最新推荐文章于 2025-12-01 22:54:44 发布

转载最新推荐文章于 2025-12-01 22:54:44 发布 · 1.1k 阅读

文章标签：

#exception #callback #function #up #math #html

O3D开发专栏收录该内容

13 篇文章

订阅专栏

本例通过加载两个贴图文件并应用到篮球场地面和篮球上，实现了篮球在地面上的跳动动画效果。通过调用o3djs.io.loadTexture加载贴图，使用o3djs.material.createBasicMaterial生成材质，并设置了动画回调函数。

<html>
<head>
<!--

   此例子主要讲解三个部分
   1. 贴图文件获取
        贴图文件的装载采用 io 库实现，调用方法为 o3djs.io.loadTexture，此方法需要一个回调函数，
       贴图（texture）作为回调函数的一个参数返回
   2. 生成贴图材质
        生成贴图材质有多种方法，本例中我们采用和例1一样的材质生成方法，
       调用 o3djs.material.createBasicMaterial()方法来产生材质
   3. 动画效果
   g_client.setRenderCallback(callback);
        此方法用于每次渲染后执行 callback 函数，可以在callback函数中实现移动，以实现动画效果

   请建立pic文件夹，和 html文件同级，找2个jpg 文件， ground.jpg（地板）和 bball1.jpg（篮球），用于贴图使用
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');
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>

附效果图