Skip to content

u4bi-dev/simple-angular4-threejs

Repository files navigation

Alt text

ng new angular-three
cd angular-three
npm install --save 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);
}

About

🚀 A Simple Three.js app in Angular4

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published