Three.js / [4] Panel - Stats & Data GUI

- 본 게시글은 Three.js 홈페이지 및 Three.js and TypeScript 강의를 바탕으로 작성한 글입니다. -

---

 

Three.js / [3] animate & requestAnimationFrame

---

이전 게시물에 이어서 작성.

이번에도 강의 위주로 설명진행할 예정.

 

처음엔 이 글을 보는 누구나 쉽게 이해할수있도록 글을 작성해야지 하고 생각을 했는데,

글을 쓰는게 나 스스로도 정리가 많이 되는것 같아서 기쁘다 :>

 

그럼 시작

---

 

three.js의 다양한 예제를 보다보면 상단에 뭔가 조절을 할 수 있는 패널들이 있다.

 

출처 : https://threejs.org/examples/#webgl_animation_skinning_blending

위의 사진을 보면 왼쪽에, 그리고 오른쪽에 다양한 패널들이 있는데,

왼쪽의 패널은 현재 렌더린된 이 페이지의 상태를 보여주며,

오른쪽의 친구들은 내가 만든 three.js를 바로바로 움직여보고 돌려도보고 할수 있도록 할 수 있는 패널이다.

 

이번에는 이 두 가지 패널을 구현해보려고 한다.

 

---

1. Stats Panel

이 상태 패널은 기본적으로 three.js의 모듈안에 있는데, import해서 곧바로 쓰려고 하니까 잘안됨

import Stats from 'three/examples/jsm/libs/stats.module'

일단 이렇게 상단에 불러와서

 

const stats = Stats();
document.body.appendChild(stats.dom);

이렇게 작성만 해주면 곧바로 왼쪽 상단에 스테이터스 패널이 생김

 

랜더링 되기 전에 아무곳에서나 이 스테이터스 바를 만들어주면 됨.

그런데 여기까지만 해주면 그냥 패널만 떠있고 움직이질 않음.

왜냐면 이 stats는 계속해서 업데이트가 필요한 친구이기 때문임.

 

function render() {
    stats.update()
    renderer.render(scene, camera)
}

그래서 렌더할때, 혹은 애니메이션 부분에 이렇게 stats의 update를 실행시켜주면 드디어 패널안에 꼬롬이들이 보이기 시작함

 

결과물!

 

2. GUI Data Panel

Gui패널은 위에서 말한대로 내가 만든 요소를 이렇게 저렇게 움직이고 바꿔볼수 있는 패널인데,

강의를 기준으로 해당패널이 three.js에서 제외됐기 때문에 별도로 설치를 해야 해당 모듈을 사용할 수 있다.

npm install dat.gui --save-dev

 

dat.gui

*여담인데 구글이 만든거라고 한다.

 

이렇게 설치를 한 후에 stats를 불러올때처럼 import해온다.

import { GUI } from 'dat.gui'

 

gui 패널은 내가 생성한 객체를 활용해서 매서드를 사용한다.

const gui = new GUI()
const cubeFolder = gui.addFolder('Cube')
cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2)
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2)
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2)
cubeFolder.open()
const cameraFolder = gui.addFolder('Camera')
cameraFolder.add(camera.position, 'z', 0, 10)
cameraFolder.open()

우선 gui 변수에 새로운 GUI 객체 인스턴스를 넣어준다.

그리고 난 후 폴더를 생성해준다.

이 폴더는 위의 그림에서 보이는 아래 삼각형이 있는 Cube와 Camera처럼 카테고리를 담당하는데,

이게 지정하지 않고 곧바로 gui에 add 매서드를 활용해 패널을 구현해도 괜찮다.

 

일단 예재대로 움직여 보겠음

 

폴더를 만들기 위해서는 gui에 addFolder 메소드를 사용해주며 인자로 폴더명을 넣어준다.

폴더에 요소들을 넣기 위해서는 만들어진 폴더에 add 매서드를 활용한다.

 

add는 다음과 같은 파라미터를 순서대로 받는다.

 

target:Object - 내가 행위를 진행할 객체, 위에서는 cube의 rotation을 넣어준다.

propName:string - 내가 사용할 타겟에서의 요소, 위에서는 각각의 x,y,z축을 이용한다.

min?:number - 해당값을 변경시킬 최소값

max?:number - 해당값을 변경시킬 최대값(위에서는 2바퀴를 기준으로 잡아서 PI*2만큼을 최대값으로 지정해둠)

 

(이외에도 받는게 4개정도 더 있는데 우선 강의에선 설명을 안하니 공식문서 보면서 내용을 알게되면 다시 돌아오갓음)

 

이렇게 값을 넣어주게 되면 위의 사진과 같은 렌더링 결과값이 나오게 된다.

 

그리고 중간중간 끼여있는

.open()메소드의 경우 페이지가 첫 렌더링 되었을때 기본적으로 폴더를 열어놓는 것을 의미한다.

아니면 닫겨있음

---

최종 결과물!

(이제 제대로 보여줄라고 codesandbox 넣는것 까지 배웠당)