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）在你掌握了库的基础知识和工作原理后可能会有所帮助。