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.
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.
Comments
Related demos