three.js

three.js

Javascript 3D Engine

The aim of this project is to create a 3D engine with a very low level of abstraction (aka for dummies). Currently there is no documentation available but feel free to use the examples as a reference and/or read the source code. However, be aware that the syntax may change from revision to revision breaking compatibility.

The engine can render using <canvas> and <svg> by now and WebGL renderer will be available soon.

More info...

Other similar projects: pre3d, pvjs, jsgl, k3d, ...

Examples

Usage

The library needs to be included first thing.

<script type="text/javascript" src="js/three.js"></script>

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 in the document.body element.

<script type="text/javascript">

    var camera, scene, renderer;

    init();
    setInterval( loop, 1000 / 60 );

    function init() {

        camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

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

            var particle = new THREE.Particle( new THREE.ColorFillMaterial( 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;
            scene.add( particle );

        }

        document.body.appendChild( renderer.domElement );

    }

    function loop() {

        renderer.render( scene, camera );

    }

</script>

For creating a customised version of the library, including the source files in this order would be a good way to start:

<script type="text/javascript" src="js/three/Three.js"></script>
<script type="text/javascript" src="js/three/core/Color.js"></script>
<script type="text/javascript" src="js/three/core/Vector2.js"></script>
<script type="text/javascript" src="js/three/core/Vector3.js"></script>
<script type="text/javascript" src="js/three/core/Vector4.js"></script>
<script type="text/javascript" src="js/three/core/Rectangle.js"></script>
<script type="text/javascript" src="js/three/core/Matrix4.js"></script>
<script type="text/javascript" src="js/three/core/Vertex.js"></script>
<script type="text/javascript" src="js/three/core/Face3.js"></script>
<script type="text/javascript" src="js/three/core/Face4.js"></script>
<script type="text/javascript" src="js/three/core/Geometry.js"></script>
<script type="text/javascript" src="js/three/cameras/Camera.js"></script>
<script type="text/javascript" src="js/three/objects/Object3D.js"></script>
<script type="text/javascript" src="js/three/objects/Mesh.js"></script>
<script type="text/javascript" src="js/three/objects/Particle.js"></script>
<script type="text/javascript" src="js/three/objects/Line.js"></script>
<script type="text/javascript" src="js/three/materials/BitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/ColorFillMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/ColorStrokeMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/FaceColorFillMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/FaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="js/three/scenes/Scene.js"></script>
<script type="text/javascript" src="js/three/renderers/Renderer.js"></script>
<script type="text/javascript" src="js/three/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="js/three/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="js/three/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="js/three/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="js/three/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="js/three/renderers/renderables/RenderableLine.js"></script>

Change Log

2010 06 22 - r10 (23.959 kb)

• Changed Camera system. (Thx Paul Brunt)
• Object3D.overdraw = true to enable CanvasRenderer screen space point expansion hack.

2010 06 20 - r9 (23.753 kb)

• JSLinted.
• autoClear property for renderers.
• Removed SVG rgba() workaround for WebKit. (WebKit now supports it)
• Fixed matrix bug. (transformed objects outside the x axis would get infinitely tall :S)

2010 06 06 - r8 (23.496 kb)

• Moved UVs to Geometry.
• CanvasRenderer expands screen space points (workaround for antialias gaps).
• CanvasRenderer supports BitmapUVMappingMaterial.

2010 06 05 - r7 (22.387 kb)

• Added Line Object.
• Workaround for WebKit not supporting rgba() in SVG yet.
• No need to call updateMatrix(). Use .autoUpdateMatrix = false if needed. (Thx Gregory Athons).

2010 05 17 - r6 (21.003 kb)

• 2d clipping on CanvasRenderer and SVGRenderer
• clearRect optimisations on CanvasRenderer

2010 05 16 - r5 (19.026 kb)

• Removed Class.js dependency
• Added THREE namespace
• Camera.x -> Camera.position.x
• Camera.target.x -> Camera.target.position.x
• ColorMaterial -> ColorFillMaterial
• FaceColorMaterial -> FaceColorFillMaterial
• Materials are now multipass (use array)
• Added ColorStrokeMaterial and FaceColorStrokeMaterial
• geometry.faces.a are now indexes instead of links

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