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);
}