Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL.
Three.js allows the creation of GPU-accelerated 3D animations using the JavaScript language as part of a website without relying on proprietary browser plugins. This is possible thanks to the advent of WebGL.
Features
Three.js includes the following features:
- Renderers: WebGL, WebGPU (experimental), SVG, CSS2D and CSS3D renderers.
- Effects: Anaglyph, ASCII, outline, parallax barrier, stereo and peppers ghost.
- Scenes: add and remove objects at run-time, fog, background, environment
- Cameras: perspective, orthographic and stereo
- Controllers: orbit, trackball, FPS, fly and more
- Animation: armatures, forward kinematics, inverse kinematics, morph and keyframe
- Lights: ambient, hemisphere, area, directional, point, spot lights and light probes
- Shadows: cast and receive
- Materials: PBR, Phong, Lambert, Toon, Matcap, Unlit and more
- Shaders: access to full OpenGL Shading Language (GLSL)
- Capabilities: lens flare, depth pass and extensive post-processing library
- Objects: meshes, instanced mesh, point clouds, lines, sprites, ribbons, bones and more
- Geometry: plane, cube, sphere, torus, 3D text and more
- Modifiers: curve, edge split, simplify and tessellate
- Data loaders: binary, image, JSON and scene
- Utilities: full set of time and 3D math functions
- including frustum, matrix, quaternion and more
- Support: API documentation, public forum, chat and wiki in full operation
- Examples: Over 350 files of coding examples plus fonts, models, textures, sounds and other support files
- Debugging: Stats.js, Three.js Developer Tools
Three.js runs in all browsers supported by WebGL.
It was first released by Ricardo Cabello (mrdoob) to GitHub in April 2010 and is made available under the MIT license.
Example Code:
Renders an animated cube.
<html>
<head>
<title>My first Three.js app</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
let camera, scene, renderer;
let geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
</script>
</body>
</html>
Useful links:
