<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>
附效果圖
<!-- 轉載請註明出處 -->