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.
Contributors โ API Reference
More? #three.js on irc.freenode.net
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 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>
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
rendersFace4
again (without spliting to 2Face3
) (mrdoob)ParticleCircleMaterial
>ParticleCanvasMaterial
. Allowing injecting anycanvas.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 toParticleBasicMaterial
. (mrdoob) - Added
PathCamera
. (alteredq) - Fixed
WebGLRenderer
bug when Camera has a parent. CameraCamera.updateMatrix
method. (empaempa) - Fixed
Camera.updateMatrix
method andObject3D.updateMatrix
. (mrdoob)
2011 03 06 - r35 (187.875 KB, gzip: 46.433 KB)
- Added methods
translate
,translateX
,translateY
,translateZ
andlookAt
methods toObject3D
. (mrdoob) - Added methods
setViewport
andsetScissor
toWebGLRenderer
. (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 toWebGLRenderer
(alteredq) - Added
Line
support toWebGLRenderer
(alteredq) - Added vertex colors support to
WebGLRenderer
(alteredq) - Added
Ribbon
object. (alteredq) - Added updateable textures support to
WebGLRenderer
(alteredq) - Added
Sound
object andSoundRenderer
. (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 supportsFog
andFogExp2
.WebGLRenderer
only right now. (alteredq)- Added
setClearColor( hex, opacity )
toWebGLRenderer
andCanvasRenderer
(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 tomaterials
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 onCanvasRenderer
/MeshLambertMaterial
MeshShaderMaterial
forWebGLRenderer
(alteredq)- Removed
RenderableFace4
fromProjector
/CanvasRenderer
(maybe just temporary). - Added extras folder with
GeometryUtils
,ImageUtils
,SceneUtils
andShaderUtils
(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
andSVGRenderer
. (mrdoob) - Switched to Closure compiler.
2010 11 04 - r28 (62.802 KB)
Loader
class allows load geometry asynchronously at runtime. (alteredq)MeshPhongMaterial
working withWebGLRenderer
. (alteredq)- Support for huge objects. Max 500k polys and counting. (alteredq)
Projector.unprojectVector
andRay
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
andSVGRenderer
material handling
2010 10 06 - r18 (44.420 KB)
- Added
PointLight
CanvasRenderer
andSVGRenderer
basic lighting support (ColorStroke/ColorFill only)Renderer
>Projector
.CanvasRenderer
,SVGRenderer
andDOMRenderer
do not extend anymore- Added
computeCentroids
method toGeometry
2010 09 17 - r17 (39.487 KB)
- Added
Light
,AmbientLight
andDirectionalLight
(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
andVector3
methods
2010 07 23 - r15 (32.440 KB)
- Using new object
UV
instead ofVector2
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
withMeshBitmapUVMappingMaterial
2010 07 17 - r14 (32.144 KB)
- Refactored
CanvasRenderer
(more duplicated code, but easier to handle) Face4
now supportsMeshBitmapUVMappingMaterial
- Changed order of
*StrokeMaterial
parameters. Now it'scolor
,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
andParticleBitmapMaterial
Particle
now useParticleCircleMaterial
instead ofColorFillMaterial
Particle.size
>Particle.scale.x
andParticle.scale.y
Particle.rotation.z
for rotating the particleSVGRenderer
currently out of sync
2010 07 07 - r12 (28.494 KB)
- First version of the
WebGLRenderer
(ColorFillMaterial
andFaceColorFillMaterial
by now) Matrix4.lookAt
fix (CanvasRenderer
andSVGRenderer
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
supportsBitmapUVMappingMaterial
.
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
andSVGRenderer
clearRect
optimisations onCanvasRenderer
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
andFaceColorStrokeMaterial
geometry.faces.a
are now indexes instead of references
2010 04 26 - r4 (16.274 KB)
SVGRenderer
Particle renderingCanvasRenderer
usescontext.setTransform
to avoid extra calculations
2010 04 24 - r3 (16.392 KB)
- Fixed incorrect rotation matrix transforms
- Added
Plane
andCube
primitives
2010 04 24 - r2 (15.724 KB)
- Improved
Color
handling
2010 04 24 - r1 (15.25 KB)
- First alpha release