Buckets:
| # three.js | |
| [![NPM Package][npm]][npm-url] | |
| [![Build Size][build-size]][build-size-url] | |
| [![NPM Downloads][npm-downloads]][npmtrends-url] | |
| [![DeepScan][deepscan]][deepscan-url] | |
| [![Discord][discord]][discord-url] | |
| #### JavaScript 3D library | |
| The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as addons. | |
| [Examples](https://threejs.org/examples/) — | |
| [Docs](https://threejs.org/docs/) — | |
| [Manual](https://threejs.org/manual/) — | |
| [Wiki](https://github.com/mrdoob/three.js/wiki) — | |
| [Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) — | |
| [Questions](https://stackoverflow.com/questions/tagged/three.js) — | |
| [Forum](https://discourse.threejs.org/) — | |
| [Discord](https://discord.gg/56GBJwAnUS) | |
| ### Usage | |
| 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 | |
| import * as THREE from 'three'; | |
| const width = window.innerWidth, height = window.innerHeight; | |
| // init | |
| const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 ); | |
| camera.position.z = 1; | |
| const scene = new THREE.Scene(); | |
| const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); | |
| const material = new THREE.MeshNormalMaterial(); | |
| const mesh = new THREE.Mesh( geometry, material ); | |
| scene.add( mesh ); | |
| const renderer = new THREE.WebGLRenderer( { antialias: true } ); | |
| renderer.setSize( width, height ); | |
| renderer.setAnimationLoop( animation ); | |
| document.body.appendChild( renderer.domElement ); | |
| // animation | |
| function animation( time ) { | |
| mesh.rotation.x = time / 2000; | |
| mesh.rotation.y = time / 1000; | |
| renderer.render( scene, camera ); | |
| } | |
| ``` | |
| If everything goes well, you should see [this](https://jsfiddle.net/2nyxkmco/). | |
| ### Cloning this repository | |
| Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the `depth` parameter to significantly reduce download size. | |
| ```sh | |
| git clone --depth=1 https://github.com/mrdoob/three.js.git | |
| ``` | |
| ### Change log | |
| [Releases](https://github.com/mrdoob/three.js/releases) | |
| [npm]: https://img.shields.io/npm/v/three | |
| [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 | |
| [npm-downloads]: https://img.shields.io/npm/dw/three | |
| [npmtrends-url]: https://www.npmtrends.com/three | |
| [deepscan]: https://deepscan.io/api/teams/16600/projects/19901/branches/525701/badge/grade.svg | |
| [deepscan-url]: https://deepscan.io/dashboard#view=project&tid=16600&pid=19901&bid=525701 | |
| [discord]: https://img.shields.io/discord/685241246557667386 | |
| [discord-url]: https://discord.gg/56GBJwAnUS | |
Xet Storage Details
- Size:
- 3 kB
- Xet hash:
- 73c873d1d9b1090a472539650df59bd57432def1eb87401566d6420ddb4c0452
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.