Three

Mr Doob has created a 3D engine library called “three”. Currently the engine only supports particles and triangles/quads with flat colors.

Comments from the Author:

The aim is to keep the code as simple and modular as possible. At the moment the engine can render using <canvas> and <svg>. WebGL rendering would come at a later stage but feel free to fork the project and have a go. Although this allows 3D for iPhoneOS and Android platforms the performance on these devices is not too good.

Three

threeD

Using the library is as simple as including it on your page with a normal JavaScript include for access to the engine classes and methods.

The following code creates a camera and a scene object, adds a bunch of random particles to the scene, creates a renderer and adds its viewport the document.body element.

<script type="text/javascript">// <![CDATA[
var camera, scene, renderer;
init();
setInterval(loop, 1000 / 60);

function init() {

camera = new Camera(0, 0, 1000);
scene = new Scene();
renderer = new CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

for (var i = 0; i < 1000; i++) {

var particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
particle.size = Math.random() * 10 + 5;
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.updateMatrix();
scene.add( particle );

}
document.body.appendChild(renderer.viewport);

}
function loop() {
renderer.render(scene, camera);
}
// ]]></script>

Click the link to view a selection of demos, download the library and learn how to use it.

Info

Type:
Libraries, Tools
Author:
Ricardo Cabello
Posted on:
April 26th, 2010
Posted by:
Andi Smith
Views:
24630

Rating

2.79

Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

Works on

BETA Please let us know if you find Three works in other browsers by leaving a comment below.

Comments

Add comment

(required)
(required)
(will not be published)
(required)