/three.js

JavaScript 3D library.

Primary LanguageJavaScriptMIT LicenseMIT

three.js (sparse)


About this fork

This fork of three.js r87 is a "sparse" customized build created for a specific purpose. Many, many features have been removed in the interest of producing a much slimmer library. This fork is not intended as a general-purpose replacement for the real three.js library and its changes are not meant to be integrated back into the main project.

Documentation, tests and examples have been kept as-is, but do not reflect this particular fork's features.

Parts that've been removed are:

  • Most built-in geometries
  • Most built-in materials
  • Lights
  • Audio framework
  • Animation framework
  • Legacy layer/deprecation warnings
  • WebGL shadow maps, sprites, flares, lights, VR

Gitter Latest NPM release License Dependencies Dev Dependencies

JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.

ExamplesDocumentationWikiMigratingHelp

Usage

Download the minified library and include it in your html, or install and import it as a module, Alternatively see how to build the library yourself.

<script src="js/three.min.js"></script>

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally it animates the cube within the scene for the camera.

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

init();
animate();

function init() {

	scene = new THREE.Scene();

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

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

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

	renderer = new THREE.WebGLRenderer();
	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 );

}

If everything went well you should see this.

Change log

releases