[Three.js] 개발 보조 도구

오늘 배운 것들

• greensock 라이브러리를 이용한 애니메이션 구현
• 축, 그리드 헬퍼
• FPS 체크하기
• GUI 컨트롤 도구

Greensock 라이브러리를 이용한 애니메이션 구현

 

https://greensock.com/

GreenSock

npm i gsap

을 이용하여 설치할 수 있는 이 라이브러리는, 애니메이션을 구현할 때 제일 많이 쓰이는 자바스크립트 라이브러리다.

 

//gsap animation
    gsap.to(
        mesh.position,
        {
            duration: 1,
            y: 2,
            z: 3
        }
    );

 

to는 변화 함수. mesh.position과 같은 객체와 설정값을 인자로 넣으면 해당 수치가 변화하며 애니메이션 동작이 구현된다. 이 코드는 1초동안 y와 z 좌표가 각각 2와 3만큼 변화하는 코드.

 

축, 그리드 헬퍼

 

축 헬퍼

//axesHelper
	const axesHelper = new THREE.AxesHelper(3);
	scene.add(axesHelper);

AxesHelper 안에 숫자를 변경하면 축의 길이를 변경할 수 있다.

 

 

그리드 헬퍼

 

//gridHelper
	const gridHelper = new THREE.GridHelper();
	scene.add(gridHelper);

 

축이나 그리드를 설정함으로써 포지션 변경 시 위치 기준점을 잡기가 좀 더 수월해진다. 

 

 

 

FPS 체크하기

stats.js 설치

외부 라이브러리인 stats.js를 통해 초당 프레임 수를 체크할 수 있다.

 

//stats -> 콘솔출력보다 성능체크에 좋음.
    const stats = new Stats();
    document.body.append(stats.domElement);

 

브라우저 콘솔에 console.log를 통해 FPS와 같은 걸 체크하다보면 성능에 영향을 줄 수 있기 때문에 조금 더 정확한 성능 체크를 위해서는 이러한 도구를 활용하는 것이 필요하다고 한다.

 

 

 

GUI 컨트롤 도구

dat.gui 설치

마찬가지로 외부 라이브러리인 dat.gui를 사용하게 되면 일일이 소스코드를 수정하지 않아도 position이나 rotation같은 값을 수정할 수 있어 개발이 편리해진다.

 

const gui = new dat.GUI();
    gui.add(mesh.position, 'y', -5, 5, 1);
    gui
        .add(camera.position, 'x')
        .min(-5)
        .max(5)
        .step(0.1)
        .name('x rotation');

 

함수에 인자를 여러 개 넣는 방식으로 할 수도 있고 여러 줄로 처리할 수도 있다. 표현만 다를 뿐 하는 일은 똑같다.

 

dat.gui 실행화면

 

저 파란 바를 마우스로 드래그하면 설정한 속성값이 바뀌며 화면도 바뀐다.