Currently the engine only supports particles and triangles/quads with flat colors. 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.
The library needs to be included first thing.
<script type="text/javascript" src="js/three.js"></script>
Now we have access to the engine classes and methods.
This code creates a camera, then creates a scene object, adds a bunch of random particles to the scene, creates a <canvas> renderer and adds its viewport the document.body element.
<script type="text/javascript">
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>
If you are interested on messing with the actual library, instead of importing the three.js compressed file, you can include the original files in this order:
<script type="text/javascript" src="src/Class.js"></script>
<script type="text/javascript" src="src/core/Color.js"></script>
<script type="text/javascript" src="src/core/Vector3.js"></script>
<script type="text/javascript" src="src/core/Matrix4.js"></script>
<script type="text/javascript" src="src/core/Vertex.js"></script>
<script type="text/javascript" src="src/core/Face3.js"></script>
<script type="text/javascript" src="src/core/Face4.js"></script>
<script type="text/javascript" src="src/core/Geometry.js"></script>
<script type="text/javascript" src="src/cameras/Camera.js"></script>
<script type="text/javascript" src="src/objects/Object3D.js"></script>
<script type="text/javascript" src="src/objects/Mesh.js"></script>
<script type="text/javascript" src="src/objects/primitives/Plane.js"></script>
<script type="text/javascript" src="src/objects/primitives/Cube.js"></script>
<script type="text/javascript" src="src/objects/Particle.js"></script>
<script type="text/javascript" src="src/materials/ColorMaterial.js"></script>
<script type="text/javascript" src="src/materials/FaceColorMaterial.js"></script>
<script type="text/javascript" src="src/scenes/Scene.js"></script>
<script type="text/javascript" src="src/renderers/Renderer.js"></script>
<script type="text/javascript" src="src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="src/renderers/SVGRenderer.js"></script>
2010 04 26 - r4 (16.274 kb)
- SVGRenderer Particle rendering
- CanvasRenderer uses context.setTransform to avoid extra calculations
2010 04 24 - r3 (16.392 kb)
- Fixed incorrect rotation matrix transforms
- Added Plane and Cube primitives
2010 04 24 - r2 (15.724 kb)
- Improved Color handling
2010 04 24 - r1 (15.25 kb)
- First alpha release