K3D JavaScript 畫布庫/教程
K3D 物件具有使用者可定義的屬性，這些屬性描述了物件相對於原點的相對位置，並允許簡單的動畫，這些動畫會隨著時間的推移遞增物件的一個或多個角度或位置向量元素。還有一些屬性描述了物件應該如何被引擎渲染。使用這些屬性是熟悉它們如何控制物件渲染的好方法。
本示例展示瞭如何設定一個簡單的 HTML5 頁面，其中包含在畫布上將簡單的立方體初始化為 K3D 物件所需的最小要求。
<!DOCTYPE html>
<html>
<head>
<title>K3D - Example 1</title>
<script src="scripts/mathlib.js"></script>
<script src="scripts/k3d_main.js"></script>
<script src="scripts/k3d_controller.js"></script>
<script src="scripts/k3d_object.js"></script>
<script src="scripts/k3d_light.js"></script>
<script src="scripts/k3d_renderer.js"></script>
<script>
// bind to window onload event
window.addEventListener('load', onloadHandler, false);
function onloadHandler()
{
// get the canvas DOM element
var canvas = document.getElementById('canvas');
// bind a K3D Controller object to the canvas
// - it is responsible for managing the K3D objects displayed within it
var k3d = new K3D.Controller(canvas);
// request 60 frames per second animation from the controller
k3d.fps = 60;
// create a K3D object for rendering
var obj = new K3D.K3DObject();
with (obj)
{
color = [255,0,0]; // colour used for wireframe edges and depthcues
drawmode = "wireframe"; // one of "point", "wireframe", "solid"
shademode = "plain"; // one of "plain", "depthcue",
// "lightsource" (solid drawing mode only)
addphi = 1.0; // 1 degree of rotation around Y axis per frame
scale = 50; // make fifty times bigger
init(
// describe the eight points of a simple unit cube
[{x:-1,y:1,z:-1}, {x:1,y:1,z:-1}, {x:1,y:-1,z:-1}, {x:-1,y:-1,z:-1},
{x:-1,y:1,z:1}, {x:1,y:1,z:1}, {x:1,y:-1,z:1}, {x:-1,y:-1,z:1}],
// describe the twelve edges of the cube
[{a:0,b:1}, {a:1,b:2}, {a:2,b:3}, {a:3,b:0}, {a:4,b:5}, {a:5,b:6},
{a:6,b:7}, {a:7,b:4}, {a:0,b:4}, {a:1,b:5}, {a:2,b:6}, {a:3,b:7}],
// describe the six polygon faces of the cube
[{color:[255,0,0],vertices:[0,1,2,3]}, {color:[0,255,0],vertices:[0,4,5,1]},
{color:[0,0,255],vertices:[1,5,6,2]}, {color:[255,255,0],vertices:[2,6,7,3]},
{color:[0,255,255],vertices:[3,7,4,0]}, {color:[255,0,255],vertices:[7,6,5,4]}]
);
}
// add the object to the controller
k3d.addK3DObject(obj);
// begin the rendering and animation immediately
k3d.paused = false;
k3d.frame();
}
</script>
</head>
<body style="background-color: #bfbfbf">
<canvas id="canvas" width="256" height="256"
style="background-color: #ffffff"></canvas>
</body>
</html>
該檔案設定了一個基本的 HTML5 頁面結構，其中包含一個用於 K3D 渲染輸出的 canvas 元素。K3D JavaScript 庫被匯入。內聯 JavaScript 然後獲取 canvas DOM 元素以傳遞給 K3D。建立一個 K3D.Controller 物件，它負責管理多個 K3D 物件並將它們渲染到提供的 canvas 元素上。然後將一個簡單的 3D 立方體定義為 K3D.K3DObject，使用線框渲染模式。設定各種公共屬性來初始化顏色、縮放（大小）和動畫屬性。最後，將 K3D 物件新增到控制器並啟動動畫。
本示例在示例 1 的基礎上進行構建，這次演示瞭如何使用光源渲染模式顯示立方體，並使用內建的簡單動畫在虛擬邊界框周圍彈跳立方體。
<!DOCTYPE html>
<html>
<head>
<title>K3D - Example 2</title>
<script src="scripts/mathlib.js"></script>
<script src="scripts/k3d_main.js"></script>
<script src="scripts/k3d_controller.js"></script>
<script src="scripts/k3d_object.js"></script>
<script src="scripts/k3d_light.js"></script>
<script src="scripts/k3d_renderer.js"></script>
<script>
// bind to window onload event
window.addEventListener('load', onloadHandler, false);
function onloadHandler()
{
// get the canvas DOM element
var canvas = document.getElementById('canvas');
// bind a K3D Controller object to the canvas
// - it is responsible for managing the K3D objects displayed within it
var k3d = new K3D.Controller(canvas);
// request 60 frames per second animation from the controller
k3d.fps = 60;
// create a K3D object for rendering
var obj = new K3D.K3DObject();
with (obj)
{
color = [255,0,0]; // colour used for wireframe edges and depthcued rendering mode
drawmode = "solid"; // one of "point", "wireframe", "solid"
shademode = "lightsource"; // one of "plain", "depthcue", "lightsource" (solid mode only)
addtheta = addgamma = 1.0; // set rotation animation
scale = 25;
velx = 0.5; vely = velz = 1; // give the object some velocity in the 3 axes
// create a virtual "bounding box" within which the object will automatically bounce around
// the engine reverses the velocity of the axis when the mid point touches the edge of the box
bminx = bminy = bminz = -50;
bmaxx = bmaxy = bmaxz = 50;
init(
// describe the points of a simple unit cube
[{x:-1,y:1,z:-1}, {x:1,y:1,z:-1}, {x:1,y:-1,z:-1}, {x:-1,y:-1,z:-1},
{x:-1,y:1,z:1}, {x:1,y:1,z:1}, {x:1,y:-1,z:1}, {x:-1,y:-1,z:1}],
// describe the edges of the cube
[{a:0,b:1}, {a:1,b:2}, {a:2,b:3}, {a:3,b:0}, {a:4,b:5}, {a:5,b:6},
{a:6,b:7}, {a:7,b:4}, {a:0,b:4}, {a:1,b:5}, {a:2,b:6}, {a:3,b:7}],
// describe the polygon faces of the cube
[{color:[255,0,0],vertices:[0,1,2,3]},{color:[0,255,0],vertices:[0,4,5,1]},
{color:[0,0,255],vertices:[1,5,6,2]},{color:[255,255,0],vertices:[2,6,7,3]},
{color:[0,255,255],vertices:[3,7,4,0]},{color:[255,0,255],vertices:[7,6,5,4]}]
);
}
// add the object to the controller
k3d.addK3DObject(obj);
// begin the rendering and animation immediately
k3d.paused = false;
k3d.frame();
}
</script>
</head>
<body style="background-color: #bfbfbf">
<canvas id="canvas" width="256" height="256" style="background-color: #ffffff"></canvas>
</body>
</html>
與示例 1 中相同，但是這次使用 drawmode = "solid" 和 shademode = "lightsource" 將立方體顯示為具有預設光源的實心多邊形。此外，還為物件定義了一個虛擬彈跳框，K3D 使用它來提供一個簡單的動畫，使立方體在周圍彈跳。
本示例在示例 2 的基礎上進行構建，這次演示瞭如何將紋理應用於立方體的每個側面。
<!DOCTYPE html>
<html>
<head>
<title>K3D - Example 3</title>
<script src="scripts/mathlib.js"></script>
<script src="scripts/k3d_main.js"></script>
<script src="scripts/k3d_controller.js"></script>
<script src="scripts/k3d_object.js"></script>
<script src="scripts/k3d_light.js"></script>
<script src="scripts/k3d_renderer.js"></script>
<script>
// bind to window onload event
window.addEventListener('load', onloadHandler, false);
var bitmaps = [];
function onloadHandler()
{
// get the images loading
bitmaps.push(new Image());
var loader = new Preloader();
loader.addImage(bitmaps[0], 'images/texture5.png');
loader.onLoadCallback(init);
}
function init()
{
// get the canvas DOM element
var canvas = document.getElementById('canvas');
// bind a K3D Controller object to the canvas
// - it is responsible for managing the K3D objects displayed within it
var k3d = new K3D.Controller(canvas);
// request 60 frames per second animation from the controller
k3d.fps = 60;
// create a K3D object for rendering
var obj = new K3D.K3DObject();
obj.textures.push(bitmaps[0]);
with (obj)
{
drawmode = "solid"; // one of "point", "wireframe", "solid"
shademode = "lightsource"; // one of "plain", "depthcue", "lightsource" (solid drawing mode only)
addtheta = addgamma = 1.0;
scale = 65;
init(
// describe the points of a simple unit cube
[{x:-1,y:1,z:-1}, {x:1,y:1,z:-1}, {x:1,y:-1,z:-1}, {x:-1,y:-1,z:-1}, {x:-1,y:1,z:1}, {x:1,y:1,z:1}, {x:1,y:-1,z:1}, {x:-1,y:-1,z:1}],
// describe the edges of the cube
[{a:0,b:1}, {a:1,b:2}, {a:2,b:3}, {a:3,b:0}, {a:4,b:5}, {a:5,b:6}, {a:6,b:7}, {a:7,b:4}, {a:0,b:4}, {a:1,b:5}, {a:2,b:6}, {a:3,b:7}],
// describe the polygon faces of the cube
[{color:[255,0,0],vertices:[0,1,2,3],texture:0},{color:[0,255,0],vertices:[0,4,5,1],texture:0},{color:[0,0,255],vertices:[1,5,6,2],texture:0},{color:[255,255,0],vertices:[2,6,7,3],texture:0},{color:[0,255,255],vertices:[3,7,4,0],texture:0},{color:[255,0,255],vertices:[7,6,5,4],texture:0}]
);
}
// add the object to the controller
k3d.addK3DObject(obj);
// begin the rendering and animation immediately
k3d.paused = false;
k3d.frame();
}
</script>
</head>
<body style="background-color: #bfbfbf">
<canvas id="canvas" width="256" height="256" style="background-color: #ffffff"></canvas>
</body>
</html>
與示例 2 中相同，但是這次使用 Preloader 輔助類載入紋理影像。影像載入後，它被應用於立方體物件的每個面。然後，K3D 在渲染時紋理對映立方體。
請研究檔案 k3d_test.html 以及 scripts/k3ddemos.js，以及 ultralight.html 以及 scripts/ultralight.js。更改 .js 檔案中的一些引數並觀察結果可能最有用。使用 JavaScript 偵錯程式（例如 Firefox 的 Firebug、WebKit Inspector）在你掌握了庫的基礎知識和工作原理後可能會有所幫助。