three.js

three.js

Javascript 3D Engine

The aim of the project is to create a lightweight 3D engine with a very low level of complexity — in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.

Contributors — Getting Started — API Reference

More? #three.js on irc.freenode.net

Examples

WebGL (Context 3D)

Canvas (Context 2D)

Featured projects

Usage

Download the minified library and include it in your html.

<script src="js/Three.js"></script>

This code creates a camera, then creates a scene, adds a cube on it, creates a <canvas> renderer and adds its viewport in the document.body element.

<script>

    var camera, scene, renderer,
    geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.Cube( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.addObject( mesh );

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

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
        requestAnimationFrame( animate );
        render();

    }

    function render() {

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

</script>

Change Log

2011 05 31 - r41/ROME (265.317 KB, gzip: 64.849 KB)

(Up to this point, some rome specific features managed to get in the lib. The aim is to clean this up in next revisions.)

• Improved Blender Object and Scene exporters. (alteredq)
• Fixes on WebGL attributes. (alteredq and empaempa)
• Reduced overall memory footprint. (mrdoob)
• Added Face4 support to CollisionSystem. (NINE78)
• Made Blender exporter work on 2.57. (remoe)
• Added Particle support to Ray. (mrdoob and jaycrossler)
• Improved Ray.intersectObject performance by checking boundingSphere first. (mrdoob)
• Added `TrackballCamera. (egraether)
• Added repeat and offset properties to Texture. (mrdoob and alteredq)
• Cleaned up Vector2, Vector3 and Vector4. (egraether)

2011 04 24 - r40 (263.774 KB, gzip: 64.320 KB)

• Fixed Object3D.lookAt. (mrdoob)
• More and more Blender exporter goodness. (alteredq and mrdoob)
• Improved CollisionSystem. (drojdjou and alteredq)
• Fixes on WebGLRenderer. (empaempa)
• Added Trident object. (sroucheray)
• Added data object to Renderers for getting number of vertices/faces/callDraws from last render. (mrdoob)
• Fixed Projector handling Particles with hierarchies. (mrdoob)

2011 04 09 - r39 (249.048 KB, gzip: 61.020 KB)

• Improved WebGLRenderer program cache. (alteredq)
• Added support for pre-computed edges in loaders and exporters. (alteredq)
• Added Collisions classes. (drojdjou)
• Added Sprite object. (empaempa)
• Fixed *Loader issue where Workers were kept alive and next loads were delayed. (alteredq)
• Added THREE namespace to all the classes that missed it. (mrdoob)

2011 03 31 - r38 (225.442 KB, gzip: 55.908 KB)

• Added LensFlare light. (empaempa)
• Added ShadowVolume object (stencil shadows). (empaempa)
• Improved Blender Exporter plus added Scene support. (alteredq)
• Blender Importer for loading JSON files. (alteredq)
• Added load/complete callbacks to Loader (mrdoob)
• Minor WebGL blend mode clean up. (mrdoob)
• *Materials now extend Material (mrdoob)
• material.transparent define whether material is transparent or not (before we were guessing). (mrdoob)
• Added internal program cache to WebGLRenderer (reuse already available programs). (mrdoob)

2011 03 22 - r37 (208.495 KB, gzip: 51.376 KB)

• Changed JSON file format. (Re-exporting of models required) (alteredq and mrdoob)
• Updated Blender and 3DSMAX exporters for new format. (alteredq)
• Vertex colors are now per-face (alteredq)
• Geometry.uvs is now a multidimensional array (allowing infinite uv sets) (alteredq)
• CanvasRenderer renders Face4 again (without spliting to 2 Face3) (mrdoob)
• ParticleCircleMaterial > ParticleCanvasMaterial. Allowing injecting any canvas.context code! (mrdoob)

2011 03 14 - r36 (194.547 KB, gzip: 48.608 KB)

• Added 3DSMAX exporter. (alteredq)
• Fixed WebGLRenderer aspect ratio bug when scene had only one material. (mrdoob)
• Added sizeAttenuation property to ParticleBasicMaterial. (mrdoob)
• Added PathCamera. (alteredq)
• Fixed WebGLRenderer bug when Camera has a parent. CameraCamera.updateMatrix method. (empaempa)
• Fixed Camera.updateMatrix method and Object3D.updateMatrix. (mrdoob)

2011 03 06 - r35 (187.875 KB, gzip: 46.433 KB)

• Added methods translate, translateX, translateY, translateZ and lookAt methods to Object3D. (mrdoob)
• Added methods setViewport and setScissor to WebGLRenderer. (alteredq)
• Added support for non-po2 textures. (mrdoob and alteredq)
• Minor API clean up. (mrdoob)

2011 03 02 - r34 (186.045 KB, gzip: 45.953 KB)

• Now using camera.matrixWorldInverse instead of camera.matrixWorld for projecting. (empaempa and mrdoob)
• Camel cased properties and object json format (Re-exporting of models required) (alteredq)
• Added QuakeCamera for easy fly-bys (alteredq)
• Added LOD example (alteredq)

2011 02 26 - r33 (184.483 KB, gzip: 45.580 KB)

• Changed build setup (build/Three.js now also include extras) (mrdoob)
• Added ParticleSystem object to WebGLRenderer (alteredq)
• Added Line support to WebGLRenderer (alteredq)
• Added vertex colors support to WebGLRenderer (alteredq)
• Added Ribbon object. (alteredq)
• Added updateable textures support to WebGLRenderer (alteredq)
• Added Sound object and SoundRenderer. (empaempa)
• LOD, Bone, SkinnedMesh objects and hierarchy being developed. (empaempa)
• Added hierarchies examples (mrdoob)

2010 12 31 - r32 (89.301 KB, gzip: 21.351 KB)

• Scene now supports Fog and FogExp2. WebGLRenderer only right now. (alteredq)
• Added setClearColor( hex, opacity ) to WebGLRenderer and CanvasRenderer (alteredq & mrdoob)
• WebGLRenderer shader system refactored improving performance. (alteredq)
• Projector now does frustum culling of all the objects using their sphereBoundingBox. (thx errynp)
• material property changed to materials globaly.

2010 12 06 - r31 (79.479 KB, gzip: 18.788 KB)

• Minor Materials API change (mappings). (alteredq & mrdoob)
• Added Filters to WebGLRenderer
• python build.py --includes generates includes string

2010 11 30 - r30 (77.809 KB, gzip: 18.336 KB)

• Reflection and Refraction materials support in WebGLRenderer (alteredq)
• SmoothShading support on CanvasRenderer/MeshLambertMaterial
• MeshShaderMaterial for WebGLRenderer (alteredq)
• Removed RenderableFace4 from Projector/CanvasRenderer (maybe just temporary).
• Added extras folder with GeometryUtils, ImageUtils, SceneUtils and ShaderUtils (alteredq & mrdoob)
• Blender 2.5x Slim now the default exporter (old exporter removed).

2010 11 17 - r29 (69.563 KB)

• New materials API Still work in progress, but mostly there. (alteredq & mrdoob)
• Line clipping in CanvasRenderer (julianwa)
• Refactored CanvasRenderer and SVGRenderer. (mrdoob)
• Switched to Closure compiler.

2010 11 04 - r28 (62.802 KB)

• Loader class allows load geometry asynchronously at runtime. (alteredq)
• MeshPhongMaterial working with WebGLRenderer. (alteredq)
• Support for huge objects. Max 500k polys and counting. (alteredq)
• Projector.unprojectVector and Ray class to check intersections with faces (based on mindlapse work)
• Fixed Projector z-sorting (not as jumpy anymore).
• Fixed Orthographic projection (was y-inverted).
• Hmmm.. lib file size starting to get too big...

2010 10 28 - r25 (54.480 KB)

• WebGLRenderer now up to date with other renderers! (alteredq)
• .obj to .js python converter (alteredq)
• Blender 2.54 exporter
• Added MeshFaceMaterial (multipass per face)
• Reworked CanvasRenderer and SVGRenderer material handling

2010 10 06 - r18 (44.420 KB)

• Added PointLight
• CanvasRenderer and SVGRenderer basic lighting support (ColorStroke/ColorFill only)
• Renderer > Projector. CanvasRenderer, SVGRenderer and DOMRenderer do not extend anymore
• Added computeCentroids method to Geometry

2010 09 17 - r17 (39.487 KB)

• Added Light, AmbientLight and DirectionalLight (philogb)
• WebGLRenderer basic lighting support (philogb)
• Memory optimisations

2010 08 21 - r16 (35.592 KB)

• Workaround for Opera bug (clearRect not working with context with negative scale)
• Additional Matrix4 and Vector3 methods

2010 07 23 - r15 (32.440 KB)

• Using new object UV instead of Vector2 where it should be used
• Added Mesh.flipSided boolean (false by default)
• CanvasRenderer was handling UVs at 1,1 as bitmapWidth, bitmapHeight (instead of bitmapWidth - 1, bitmapHeight - 1)
• ParticleBitmapMaterial.offset added
• Fixed gap when rendering Face4 with MeshBitmapUVMappingMaterial

2010 07 17 - r14 (32.144 KB)

• Refactored CanvasRenderer (more duplicated code, but easier to handle)
• Face4 now supports MeshBitmapUVMappingMaterial
• Changed order of *StrokeMaterial parameters. Now it's color, opacity, lineWidth.
• BitmapUVMappingMaterial > MeshBitmapUVMappingMaterial
• ColorFillMaterial > MeshColorFillMaterial
• ColorStrokeMaterial > MeshColorStrokeMaterial
• FaceColorFillMaterial > MeshFaceColorFillMaterial
• FaceColorStrokeMaterial > MeshFaceColorStrokeMaterial
• ColorStrokeMaterial > LineColorMaterial
• Rectangle.instersects returned false with rectangles with 0px witdh or height

2010 07 12 - r13 (29.492 KB)

• Added ParticleCircleMaterial and ParticleBitmapMaterial
• Particle now use ParticleCircleMaterial instead of ColorFillMaterial
• Particle.size > Particle.scale.x and Particle.scale.y
• Particle.rotation.z for rotating the particle
• SVGRenderer currently out of sync

2010 07 07 - r12 (28.494 KB)

• First version of the WebGLRenderer (ColorFillMaterial and FaceColorFillMaterial by now)
• Matrix4.lookAt fix (CanvasRenderer and SVGRenderer now handle the -Y)
• Color now using 0-1 floats instead of 0-255 integers

2010 07 03 - r11 (23.541 KB)

• Blender 2.5 exporter (utils/export_threejs.py) now exports UV and normals (Thx kikko)
• Scene.add > Scene.addObject
• Enabled Scene.removeObject

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 references

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