Angular에서 Three.js 사용하기
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 값을 사용해야 한다.
- 1. scene 설정 : new THREE.Scene() - 디스플레이 할 화면의 크기등을 설정
- 2. renderer 설정 : new THREE.WebGLRenderer() - 렌더링 설정
- 2.1. this.domContainer.nativeElement.appendChild(renderer.domElement); // 설정된 renderer를 canvas에 결합하기
- 3. camera 설정 : new THREE.PerspectiveCamera()
- 4. Object 그리기
- 4.1. scene.add( myObject ); object를 그린후 scene 에 추가
- 5. Light 설정 : new THREE.AmbientLight(0xffffff, .9)
- 5.1. scene.add( mylight ); Light를 설정후 scene 에 추가
- 6. rendering 하기 : this.renderer.render(this.scene, this.camera); // 설정된 scene과 camera를 rendering 한다.
- 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);
// angular의 ElementRef 를 사용하지 않고 pure javascript를 사용할 경우 아래와 같이 처리하여도 됩니다.
// const container = document.getElementById('domContainer'); // <div id="domContainer">
// container.appendChild(this.renderer.domElement);
// object 그리기 (아래 참조)
// light 처리 (아래 참조)
this.renderer.render(this.scene, this.camera);
}
}
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));
object 그리기
다양한 object를 그리면 됩니다.
여기서는 큐브를 그리도록 하겠습니다.
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube ); // 만들어진 scene에 추가합니다.
light 처리
const globalLight = new THREE.AmbientLight(0xffffff, .9);
const shadowLight = new THREE.DirectionalLight(0xffffff, 1);
shadowLight.position.set(-30, 40, 20);
shadowLight.castShadow = true;
shadowLight.shadow.camera.left = -400;
shadowLight.shadow.camera.right = 400;
shadowLight.shadow.camera.top = 400;
shadowLight.shadow.camera.bottom = -400;
shadowLight.shadow.camera.near = 1;
shadowLight.shadow.camera.far = 2000;
shadowLight.shadow.mapSize.width = shadowLight.shadow.mapSize.height = 2048;
this.scene.add(globalLight);
this.scene.add(shadowLight);