| 1 | three.js
|
|---|
| 2 | ========
|
|---|
| 3 |
|
|---|
| 4 | #### JavaScript 3D library ####
|
|---|
| 5 |
|
|---|
| 6 | The aim of the project is to create a lightweight 3D library with a very low level of complexity â in other words, for dummies. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.
|
|---|
| 7 |
|
|---|
| 8 | [Examples](http://threejs.org/) â [Documentation](http://threejs.org/docs/) â [Migrating](https://github.com/mrdoob/three.js/wiki/Migration) â [Help](http://stackoverflow.com/questions/tagged/three.js)
|
|---|
| 9 |
|
|---|
| 10 |
|
|---|
| 11 | ### Usage ###
|
|---|
| 12 |
|
|---|
| 13 | Download the [minified library](http://threejs.org/build/three.min.js) and include it in your html.
|
|---|
| 14 | Alternatively see [how to build the library yourself](https://github.com/mrdoob/three.js/wiki/build.py,-or-how-to-generate-a-compressed-Three.js-file).
|
|---|
| 15 |
|
|---|
| 16 | ```html
|
|---|
| 17 | <script src="js/three.min.js"></script>
|
|---|
| 18 | ```
|
|---|
| 19 |
|
|---|
| 20 | This code creates a scene, then creates a camera, adds the camera and cube to the scene, creates a <canvas> renderer and adds its viewport in the document.body element.
|
|---|
| 21 |
|
|---|
| 22 | ```html
|
|---|
| 23 | <script>
|
|---|
| 24 |
|
|---|
| 25 | var camera, scene, renderer;
|
|---|
| 26 | var geometry, material, mesh;
|
|---|
| 27 |
|
|---|
| 28 | init();
|
|---|
| 29 | animate();
|
|---|
| 30 |
|
|---|
| 31 | function init() {
|
|---|
| 32 |
|
|---|
| 33 | camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
|
|---|
| 34 | camera.position.z = 1000;
|
|---|
| 35 |
|
|---|
| 36 | scene = new THREE.Scene();
|
|---|
| 37 |
|
|---|
| 38 | geometry = new THREE.CubeGeometry( 200, 200, 200 );
|
|---|
| 39 | material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
|
|---|
| 40 |
|
|---|
| 41 | mesh = new THREE.Mesh( geometry, material );
|
|---|
| 42 | scene.add( mesh );
|
|---|
| 43 |
|
|---|
| 44 | renderer = new THREE.CanvasRenderer();
|
|---|
| 45 | renderer.setSize( window.innerWidth, window.innerHeight );
|
|---|
| 46 |
|
|---|
| 47 | document.body.appendChild( renderer.domElement );
|
|---|
| 48 |
|
|---|
| 49 | }
|
|---|
| 50 |
|
|---|
| 51 | function animate() {
|
|---|
| 52 |
|
|---|
| 53 | // note: three.js includes requestAnimationFrame shim
|
|---|
| 54 | requestAnimationFrame( animate );
|
|---|
| 55 |
|
|---|
| 56 | mesh.rotation.x += 0.01;
|
|---|
| 57 | mesh.rotation.y += 0.02;
|
|---|
| 58 |
|
|---|
| 59 | renderer.render( scene, camera );
|
|---|
| 60 |
|
|---|
| 61 | }
|
|---|
| 62 |
|
|---|
| 63 | </script>
|
|---|
| 64 | ```
|
|---|
| 65 | If everything went well you should see [this](http://jsfiddle.net/ksRyQ/).
|
|---|
| 66 |
|
|---|
| 67 | ### Change log ###
|
|---|
| 68 |
|
|---|
| 69 | [releases](https://github.com/mrdoob/three.js/releases)
|
|---|
