Animation 처리하기

앞장에서 큐브를 디스플레이하는 간단한 기능을 소개하였습니다.
여기서는 앞의 소스에 이어 간단한 animation을 처리하는 방법을 소개드립니다.

export class AppComponent implements OnInit, AfterViewInit {
  ngAfterViewInit() {
    ...........
    this.renderer.render(this.scene, this.camera);
    this.loop();
  }

  // loop 처리는 아래처럼 하면 cube 의 x, y, z 값이 0.05 씩 감소하면서 화면에 디스플레이 됩니다.
  private loop = () => {
    this.cube.position.x -=  0.05
    this.cube.position.y -=  0.05
    this.cube.position.z -=  0.05

    this.render();
    requestAnimationFrame(this.loop);
  }

}

이로서 간단한 Object를 출력후 조금씩 움직이는 간단한 샘플을 만들어 보았습니다.
다음 장에서는 앞서 간단하게 언급되었던 camera, lignt 및 다양한 Object에 대한 상세한 설명을 드리려고 합니다.