three.js ======== [![NPM package][npm]][npm-url] [![Build Size][build-size]][build-size-url] [![Build Status][build-status]][build-status-url] [![Dependencies][dependencies]][dependencies-url] [![Dev Dependencies][dev-dependencies]][dev-dependencies-url] [![Language Grade][lgtm]][lgtm-url] #### JavaScript 3D library #### The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples. [Examples](http://threejs.org/examples/) — [Documentation](http://threejs.org/docs/) — [Wiki](https://github.com/mrdoob/three.js/wiki) — [Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) — [Questions](http://stackoverflow.com/questions/tagged/three.js) — [Forum](https://discourse.threejs.org/) — [Gitter](https://gitter.im/mrdoob/three.js) — [Slack](https://join.slack.com/t/threejs/shared_invite/enQtMzYxMzczODM2OTgxLTQ1YmY4YTQxOTFjNDAzYmQ4NjU2YzRhNzliY2RiNDEyYjU2MjhhODgyYWQ5Y2MyZTU3MWNkOGVmOGRhOTQzYTk) ### Usage ### Download the [minified library](http://threejs.org/build/three.min.js) and include it in your HTML, or install and import it as a [module](http://threejs.org/docs/#manual/introduction/Import-via-modules), Alternatively, see [how to build the library yourself](https://github.com/mrdoob/three.js/wiki/Build-instructions). ```html ``` 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. ```javascript var camera, scene, renderer; var 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 ); } ``` If everything went well you should see [this](https://jsfiddle.net/f2Lommf5/). ### Change log ### [Releases](https://github.com/mrdoob/three.js/releases) [npm]: https://img.shields.io/npm/v/three.svg [npm-url]: https://www.npmjs.com/package/three [build-size]: https://badgen.net/bundlephobia/minzip/three [build-size-url]: https://bundlephobia.com/result?p=three [build-status]: https://travis-ci.org/mrdoob/three.js.svg?branch=dev [build-status-url]: https://travis-ci.org/mrdoob/three.js [dependencies]: https://img.shields.io/david/mrdoob/three.js.svg [dependencies-url]: https://david-dm.org/mrdoob/three.js [dev-dependencies]: https://img.shields.io/david/dev/mrdoob/three.js.svg [dev-dependencies-url]: https://david-dm.org/mrdoob/three.js#info=devDependencies [lgtm]: https://img.shields.io/lgtm/grade/javascript/g/mrdoob/three.js.svg?label=code%20quality [lgtm-url]: https://lgtm.com/projects/g/mrdoob/three.js/