Three.js Dubug UI (dat.gui)

오늘은 기본적인 Dubug UI 에 대해 알아 보겠다. 

 

 

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

 

공식 사이트에 있는 예제들 중 오른쪽 상단에 저런 높이 등 객체의 속성 조절, on off 등 다양한 속성들을 조절 할 수 있는 기능에 대해 알아 보겠다. 

 

바로 dat.gui 라는 패키지인데

npm install --save dat.gui

 

설치 해준 뒤에

import * as dat from 'dat.gui' // 불러오기
const gui  = new dat.GUI();  // 객체 생성

 

 

이제 gui 변수명의 저 객체를 사용해주면 될텐데 한가지 주의점이 우리가 저 디버그 툴로 관리해줄 객체가 만들어지고 난 뒤에 gui 객체로 관리해줘야 한다. 

 

 

const gui = new dat.GUI();
gui.add(mesh.position, 'y')


~~~~~~~~~~
geometry 생성, 
material 생성, 
mesh 생성 
scene.add(mesh)


///////////////////// 위의 방식처럼 하면 안되구


const gui = new dat.GUI();

geometry 생성, 
material 생성, 
mesh 생성 
scene.add(mesh)



gui.add(mesh.position, 'y')
~~~~ 요론 흐름대로 작성해주면 된다.

 

 

벌써 반은 성공했다. 

 

하지만 지금 상태로 마우스로 y 값을 드래그 해서 움직이다 보면 값이 너무 빨리 이리저리 바뀌게 된다. 

아주 조금 오른쪽으로 드래그 했을때 ㄷㄷ

 

이렇게 수치가 장황하게 변하게 되면 정상적인 디버깅이 힘들기 때문에 뒤에 파라미터 몇개를 넣어줌으로서 관리가 가능하다. 

 

gui.add(관리할 객체, 객체의 속성값 문자열루, 최소값, 최댓값, 사이 변화할 때의 값 단위)

gui.add(mesh.position, 'y',-3,3,0.01);  // 첫번째 방법
gui.add(mesh.position, 'y').min(-3).max(3).step(0.01)  // 두번째 방법

 

 

요로코롬 프로그레스 바 같은 것도 생기면서 컨트롤 하기 더 쉬운 것을 볼 수가 있다. 드래그 하기 편하다. 

 

 

라벨도 변경 할 수 있다. 

gui.add(mesh.position, 'y').min(-3).max(3).step(0.01).name('sanghoon')

 

 

 

 

gui.add(mesh, 'visible')

 

 

다음으로 색깔을 바꾸는 것을 알아보자. 직접 객체.color 로 접근하게 되면 실제로는 color 클래스에 접근하게 되는 것이라서 color = '색' 으로 변경이 불가피하다. 

 

 

const gui  = new dat.GUI();
const parameters = {
    color:0xff0000
}

gui.addColor(parameters, 'color').onChange(()=> {
    material.color.set(parameters.color)
})

 

이런 식으로 color 클래스에 set 메소드를 이용해서 material의 색을 바꿔주면 되겠다.