온스토리

updated_at: 2025-01-24 10:58

angular에서 three.js는 버전별로 충돌하는 것이 많아 사용이 용의하지는 않다.
여기서는 angular 19 를 위주로 설명드리며 three.js 버전별 호환성등을 별도로 설명드리겠습니다.

Install

npm i three  // 0.172.0 (이전에는 호환성 때문에 0.155.0 를 사용)
npm i --save-dev @types/three

Import

..........
import * as THREE from 'three';
..........
export class AppComponent {
}

기본적인 폼

기본 형식의 폼

three.js는 canvas에 그래픽을 출력하는 형태이다.
따라서 canvas를 지정해야 하는데 html이 로딩된 후 특정 html element 값을 사용해야 한다.
아래와 같이 필요한 부분을 정의하여 사용하면 됩니다.

template(html)

<div #domContainer></div>

import { Component,OnInit,AfterViewInit,ViewChild,ElementRef} from '@angular/core';
import * as THREE from 'three';
..........
export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('domContainer', {
    static: true
  }) domContainer!: ElementRef < HTMLDivElement > ;

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

  constructor() { }

  ngOnInit() {}
  ngAfterViewInit() {
    // scene(canvas)의 크기를 구한다.
    const sceneWidth = this.domContainer.nativeElement.offsetWidth;
    const sceneHeight = this.domContainer.nativeElement.offsetHeight;

    this.scene = new THREE.Scene(); // scene 설정
    
    // 카메라 설정 (아래 "camera 기능 활성화하기" 참조)....

    this.renderer = new THREE.WebGLRenderer({ // renderer 설정
      alpha: true,
      antialias: true
    });
    
    // 현재 renderer를 domContainer 에 넣음. 이렇게 함으로서 실제 graphic을 출력될 준비가 끝나는 상태가 됩니다.
    this.domContainer.nativeElement.appendChild(this.renderer.domElement); 
  }
}

camera 기능 활성화하기

scene의 설정이 끝났으면 camera를 설정해야 합니다.
Three.js는 이 camera 기능을 활용하여 다양한 효과를 제공하게 됩니다.(근/원거리, 속도, zoom 등..)

this.aspectRatio = this.WIDTH / this.HEIGHT;
this.fieldOfView = 50;
this.nearPlane = 1;
this.farPlane = 2000;
this.camera = new THREE.PerspectiveCamera(
  this.fieldOfView,
  this.aspectRatio,
  this.nearPlane,
  this.farPlane
);
this.camera.position.x = 0;
this.camera.position.z = this.cameraPosGame;
this.camera.position.y = 30;
this.camera.lookAt(new THREE.Vector3(0, 30, 0));