Kukk3D - Javascript 3D Engine
Published Thursday, April 30, 2009 in Development, Javascript, Old School
I had so much fun playing around with canvas when I built the Pixastic Editor that I decided to port my really old 3D-engine, Kukk3D, to JS.
Click the image to view a demo
At the moment it's really basic even though it has support for faces (something that the old one never had) as well as lines and vectors.
You can add any type of object you like to the scene, move it around and re-render it. To animate you'd wanna do this X times per second, usually through a setTimeout.
A basic example:
<canvas id="kukk3d"></canvas>
<script type="text/javascript">
// Initiate the engine, pass in the canvas-ID and set width and height
Kukk3D.init('kukk3d', 640, 480);
// Create an object
// You can create any object you like or use one of the presets in objectSkeletons
var cube = Kukk3D.addObject(Kukk3D.objectSkeletons.cube());
// Now that the scene contains something, let's render it
// You can pass in a color-object as the only argument to render
// in order to fill the scene with a background-color
Kukk3D.render({r: 0, g: 0, b: 0, a: 1});
// To animate we simply move about the object and re-render
// the scene in a setInterval that runs every 50 ms
setInterval(function () {
cube.rotation.y += 2;
cube.rotation.z += 1;
Kukk3D.render();
}, 50); // 50 ms = 20 fps
</script>
What you reckon?
