debug UI

debug UI 라이브러리

dat.GUI ⭐
control-panel
ControlKit
Uil
Tweakpane
Guify
Oui

Dat.GUI 적용

터미널로 npm install --save dat.gui 실행하면/node_modules/폴더에 설치 된 Dat.GUI를 js파일에 임포트해서 사용하면 된다

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import gsap from 'gsap'
import * as dat from 'dat.gui'

// 초기화
const gui = new dat.GUI()

위 대로 초기화를 하면 우측 상단에 작은 패널이 생기는데 그 패널에 여러 엘리먼트들을 추가할 수 있다

• Range - 최소 / 최댓값
• Color - 여러 형태의 색상
• Text - 기본 텍스트
• Checkbox - true or false
• Select - value 리스트 선택
• Button - 트리거 함수
• Folder - 엘리먼트가 너무 많을 경우 정리를 위한 폴더

엘리먼트 더하기

// 1st param = 오브젝트
// 2nd param = 변경하려는 오브젝트의 프로퍼티
gui.add(mesh.position, 'y')

// 3rd param = 최솟값
// 4th param = 최댓값
// 5th param = precision
gui.add(mesh.position, 'y', -3, 3, 0.01)

혹은 add(...) 메소드 뒤에 min(...), max(...), step(...) 함수를 사용해서 지정해 줄 수도 있다

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

라벨을 바꿔주려면 name(...)메소드를 활용한다

색상

색상을 변경해주려면 add(...)가 아닌 addColor(...)를 사용한다
👉 프로퍼티 타입으로만은 Dat.GUI가 어느 것을 조정하려는지 알 수 없으므로

const parameters = {
    color: 0xff0000
}

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

const material = new THREE.MeshBasicMaterial({ color: parameters.color })

import 문 바로 아래에 colorparameter 변수를 생성한다

onChange(...) 메소드와 material.color.set(...)를 통해 색상을 변경해주어야한다

함수

const parameters = {
    color: 0xff0000,
    spin: () =>
    {
        gsap.to(mesh.rotation, { duration: 1, y: mesh.rotation.y + Math.PI * 2 })
    }
}

gui.add(parameters, 'spin')

함수를 실행하려면 색상과 마찬가지로 오브젝트에 함수를 등록해야한다
앞서 색상을 등록할 때 사용했던 parameters 오브젝트에 spin 프로퍼티를 등록한다

숨기기

H버튼을 누르거나 처음부터 숨김 상태로 시작하려면 gui.hide()

닫기

패널의 아랫부분을 클릭해서 닫거나 항상 닫힘 상태이길 바란다면

const gui = new dat.GUI({ closed: true })

너비

좌측 경계를 드래그 하거나 특정 너비로 고정시키고 싶다면

const gui = new dat.GUI({ width: 400 })

참고 링크

Dat.GUI 깃허브
API 문서