Simple Angular4 Threejs Save

generate a new project

ng new angular-three
cd angular-three

npm install : three

npm install --save three

npm install : @types/three

npm install --save-dev @types/three

import threejs : app.component.ts - top line

import * as THREE from 'three';

get element : app.component.ts - html division

private container : HTMLElement;

@ViewChild('container') elementRef: ElementRef;
this.container = this.elementRef.nativeElement;

screen initialize : app.component.ts - init()

private scene: THREE.Scene;
private camera: THREE.PerspectiveCamera;
private renderer: THREE.WebGLRenderer;

this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(view.angle, view.aspect, view. near, view.far);
this.renderer = new THREE.WebGLRenderer();
 
this.renderer.setSize(screen.width, screen.height);
this.container.appendChild(this.renderer.domElement);

animate loop : app.component.ts - render()

this.render();

render(){
  let self: AppComponent = this;
  (function render(){
    requestAnimationFrame(render);
    self.renderer.render(self.scene, self.camera);
    
    self.animate();
  }());
}

animate(){
  console.log('animate');
}

cube render : app.component.ts - animate()

private cube : THREE.Mesh;

this.scene.add(this.camera);
this.scene.add(new THREE.AxisHelper(20));
 
this.camera.position.set(10,10,10);
this.camera.lookAt(new THREE.Vector3(0,0,0));

let geometry = new THREE.BoxGeometry(5, 5, 5),
    material = new THREE.MeshBasicMaterial({ color : 0xFFFFFF, wireframe: true });
     
this.cube = new THREE.Mesh( geometry, material );
this.cube.position.set(-50,-50,-50);
 
this.scene.add(this.cube);

animate(){
  this.cube.rotateX(0.1);
  this.cube.rotateY(0.1);
  this.cube.position.addScalar(0.2);
}