mrdoob/three.js

JavaScript 3D Library.

# three.js [![NPM Package][npm]][npm-url] [![Build Size][build-size]][build-size-url] [![NPM Downloads][npm-downloads]][npmtrends-url] [![jsDelivr Downloads][jsdelivr-downloads]][jsdelivr-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 WebGL and WebGPU renderers but 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( animate ); document.body.appendChild( renderer.dom