ng-three

three.js

[![Gitter][gitter-badge]][gitter-badge-url] [![Latest NPM release][npm-badge]][npm-badge-url] [![License][license-badge]][license-badge-url] [![Dependencies][dependencies-badge]][dependencies-badge-url] [![Dev Dependencies][devDependencies-badge]][devDependencies-badge-url]

Angular 3D library

The Three.js 3D library has beed adapted for use with Angular >2.0!

Official Website —

Usage

Import Three.js into your module / component.

 
// TODO: Write Typescript Example
 
//Plain Javascript
 
var scene, camera, renderer;
var geometry, material, mesh;
 
init();
animate();
 
function init() {
 
    scene = new THREE.Scene();
 
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;
 
    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
 
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
 
    renderer = new THREE.WebGLRenderer();
    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 );
 
}

Change log

1. First Angular conversion.

Official THREE releases