@citizenfx/three - npm explorer

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. The library provides Canvas 2D, SVG, CSS3D and WebGL renderers.

Examples —
Documentation —
Wiki —
Migrating —
Questions —
Forum —
Gitter —
Slack

$3

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.

``

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.

$3

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/

$3

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.

``

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.