o3d 例3-跳动的篮球
来源:互联网 发布:ubuntu16 tensorflow 编辑:程序博客网 时间:2024/05/01 01:25
<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>
<!-- Start of O3D plugin -->
<div id="o3d" style="width: 600px; height: 600px;"></div>
<!-- End of O3D plugin -->
</body>
</html>
附效果图
<!-- 转载请注明出处 -->
- o3d 例3-跳动的篮球
- o3d 例子-跳动的篮球
- O3D 例2- 立方体的移动、缩放和旋转
- O3D 例2- 立方体的移动、缩放和旋转
- O3D 例1-红色立方体
- o3d教程3 - 模型变换
- 残奥会的轮椅篮球
- 篮球的起源
- 篮球场上的位置
- 篮球是编的
- 黑子的篮球
- 黑子的篮球
- 挚爱的篮球
- 篮球
- 篮球
- 篮球
- 篮球
- 篮球
- 总体参数估计概述
- 网站优化的内部优化
- 在 .NET 中使用大对象
- getResourceAsStream的解析
- Norton 诺顿
- o3d 例3-跳动的篮球
- 信号驱动IO的编程模型和多路复用IO的编程模型
- 局域网即时通讯Active Messenger 完美破解版本(最新版本破解)
- Decomposing a matrix(用于分解变换矩阵至旋转、平移,缩放分量)
- 無序的hashmap的順序迭代輸出
- C++ Builder中串行通信控件编程
- 人生定位
- Linux系统管理实践(4):忘记登录密码或账号
- Windows via C/C++:线程的执行时间