Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
JavaScript 3D library.
JavaScript HTML Python C++ C GLSL Other

README.md

three.js

Javascript 3D Engine

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

API Reference — be aware that the API may change from revision to revision breaking backwards compatibility.

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

Examples

WebGL (Context 3D)

video dof ribbon vertexcolors particles lines shader materials_normalmap2 materials_grass materials_normalmap geometry_terrain_gl geometry_minecraft materials_shader_fresnel materials_cars materials_cubemap_refraction materials_cubemap_balls_reflection materials_cubemap_balls_refraction materials_cubemap_escher materials_cubemap materials_gl materials_shaders large_mesh

Canvas (Context 2D)

materials_reflection materials materials_depth materials_normal lights_pointlights interactive_cubes camera_ortographic geometry_birds geometry_earth geometry_terrain materials_video geometry_panorama geometry_cube particles_sprites particles_random particles_wave particles_floor

Featured projects

FastKat Sculpt Voxels The Wilderness Downtown CloudSCAD Or so they say... Rat Failure Space Cannon 3D Alocasia DDD jsflowfield4d spikeball

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 object, adds a bunch of random particles in it, creates a <canvas> renderer and adds its viewport in the document.body element.

<script>

    var camera, scene, renderer;

    init();
    animate();

    function init() {

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

        scene = new THREE.Scene();

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

            var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: Math.random() * 0xffffff } ) );
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
            particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
            scene.addObject( particle );

        }

        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() {

        renderer.render( scene, camera );

    }

</script>

Change Log

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

  • 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)
  • Changed build setup (Three.js now includes everything. Three*.js inside build/custom folder) (mrdoob)
  • Many internal changes.

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
Something went wrong with that request. Please try again.