<div id="readability-page-1" class="page"><div><h2 id="debug-ui">Debug UI</h2>
While you can create your own debug UI using HTML / CSS / JS, there are already multiple libraries:
dat.GUI 
<a href="https://lil-gui.georgealways.com/">lil-gui</a> &lt;- 이걸 사용해보자 
control-panel 
ControlKit 
Uil 
Tweakpane 
Guify 
Oui
<h2 id="lil-gui">lil-gui</h2>
<img src="https://velog.velcdn.com/images/hyounglee/post/75db9896-842b-4405-9ec7-debbdb947c53/image.png">
Three.js로 생성한 캔버스 속 여러 속성을 편집할 수 있는 라이브러리
<pre><code>yarn add lil-gui</code></pre>
<pre><code>import GUI from 'lil-gui'

// Debug
const gui = new GUI()</code></pre>
<h2 id="range">Range</h2>
특정 값의 범위를 조절할 수 있는 GUI를 생성한다.
<img src="https://velog.velcdn.com/images/hyounglee/post/787668e2-11f0-4a6e-843b-ff8ba0e00df9/image.png">
<pre><code>// 아래의 두가지 방법은 동일한 동작을 한다. 개인적으론 두번째 방식이 이해하기에 쉬운 것 같음.
/*
 * gui.add()의 파라미터
 * - object: THREE.Vector3
 * - property: keyof THREE.Vector3
 * - min?: number | object | any[]
 * - max?: number
 * - step?: number
 */
gui.add(mesh.position, 'y', -3, 3, 0.01).name('y position')
gui.add(mesh.position, 'x').min(-3).max(3).step(0.01).name('x position')

/* 
 * gui.add 의 첫번째 파라미터는 항상 object여야 한다. 
 * string이나 number 타입은 동작하지 않는다.
 */
const myObject = {
	myValue: 0,
}
gui.add(myObject, 'myValue').min(-3).max(3).step(0.01).name('myValue')</code></pre>
<h2 id="checkbox">Checkbox</h2>
boolean 타입의 속성 변화를 줄 수 있다. 
<img src="https://velog.velcdn.com/images/hyounglee/post/43126820-f158-4794-95bf-104e9eff3b31/image.png">
<pre><code>// Checkbox
gui.add(mesh, 'visible')
gui.add(material, 'wireframe')</code></pre>
<h2 id="color">Color</h2>
<img src="https://velog.velcdn.com/images/hyounglee/post/0eab68dd-fb30-41c8-acca-fccd672bab5a/image.png">
<pre><code>// Color
gui.addColor(material, 'color')

// onChange 메소드와 getHexString() 메소드를 사용하여 변화된 색상의 
HexCode를 얻을 수 있다.
gui.addColor(material, 'color').onChange((value) =&gt; {
	console.log(value.getHexString())
})</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/32d2a3ed-0e4e-4a8d-a94c-925612376b5c/image.png">
응용 : Three.js 바깥에서 색상정보를 관리하기
<pre><code>debugObject.color = '#e9b66a'

const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ color: debugObject.color })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Color
gui.addColor(debugObject, 'color').onChange(() =&gt; {
	material.color.set(debugObject.color)
})</code></pre>
<h2 id="function--button">Function / Button</h2>
<img src="https://velog.velcdn.com/images/hyounglee/post/1261d2e3-cd7c-4d6d-926a-f0ff43d1b34f/image.png">
버튼을 눌렀을때 특정 함수를 실행시키기
<pre><code>// Function
debugObject.spin = () =&gt; {
	gsap.to(mesh.rotation, { duration: 1, y: mesh.rotation.y + Math.PI * 2 })
}

gui.add(debugObject, 'spin')</code></pre>
<h3 id="geometry-변경하기">Geometry 변경하기</h3>
<img src="https://velog.velcdn.com/images/hyounglee/post/a4d515ee-738a-4441-8779-5925ccfccc21/image.png">
<code>widthSegments</code>, <code>heightSegments</code>, <code>depthSegments</code>는 처음 생성 후 변경이 불가능하다. 
그래서 오래된 geometry를 destroy 하고, 새로운 geometry를 생성해야 한다. 
오래된 geometry를 제거하지 않고 생성만 한다면 메모리 누수가 발생할 수 있으니 주의하자.
<pre><code>// init geometry
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ color: debugObject.color, wireframe: true })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// subdivision
debugObject.subdivision = 2

gui
	.add(debugObject, 'subdivision')
	.min(1)
	.max(20)
	.step(1)
	.onFinishChange(() =&gt; {
 // Remove old mesh or there will be memory leak!
 mesh.geometry.dispose()
 // Create new geometry
 const subdivision = debugObject.subdivision
 mesh.geometry = new THREE.BoxGeometry(1, 1, 1, subdivision, subdivision, subdivision)
	![](https://velog.velcdn.com/images/hyounglee/post/d9d72bb8-f035-4b54-881b-eb92f2c0624c/image.png)
})</code></pre>
<h2 id="folders">Folders</h2>
많은 ui controller들을 그룹으로 묶고 싶은 경우 라이브러리의 addFolder 메소드를 사용하면 정말 간단하게 해결할 수 있다. 폴더를 생성하고 <code>gui.add</code> 를 모두 <code>폴더명.add</code> 로 변경해주면 된다. nested folder도 생성이 가능하다.
<img src="https://velog.velcdn.com/images/hyounglee/post/f047bcc2-3a05-4acc-a5c5-110fa58ad4ee/image.png">
<pre><code>// Folder
const cubeTweaks = gui.addFolder('Awesome Cube')

...

// Checkbox
cubeTweaks.add(mesh, 'visible')
cubeTweaks.add(material, 'wireframe')

// Color
cubeTweaks.addColor(debugObject, 'color').onChange(() =&gt; {
	material.color.set(debugObject.color)
})</code></pre>
<h2 id="그-외의-여러가지-기능">그 외의 여러가지 기능</h2>
<pre><code>// Debug
const gui = new GUI({
	width: 500,
	title: 'Nice Debug UI',
	closeFolders: false,
})


gui.close() // GUI를 닫는 method</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/9ce1344a-a4d5-458e-baf7-92c15c037d94/image.png">
<pre><code>gui.hide() // GUI를 숨기는 method

// h키로 gui의 노출을 토글할 수 있다.
window.addEventListener('keydown', (e) =&gt; {
	if (e.key === 'h') {
		gui.show(gui._hidden)
	}
})</code></pre>
그 외의 다양한 기능들은 <a href="https://lil-gui.georgealways.com/">lil-gui의 공식문서</a>를 참고하자. 중요한 것은 작업 중간에 gui를 반드시 활용하는 것이다. 손쉽게 최고의 화면 구성이나 색상, 중력 등을 고려하여 프로덕트를 만들 수 있을 것이다!
버튼UI 같은 것들 따로 만들 필요 없이 바로 기능만 붙여서 three.js 와 연동할 수 있다는게 엄청난 장점으로 느껴진다.. 잘 활용해봐야겠다!</div></div>

(งᐖ)ว

Debug UI
While you can create your own debug UI using HTML / CSS / JS, there are already multiple libraries:
dat.GUI
lil-gui <- 이걸 사용해보자
control-panel
ControlKit
Uil
Tweakpane
Guify
Oui
lil-gui
Three.js로 생성한 캔버스 속 여러 속성을 편집할 수 있는 라이브러리
yarn add lil-gui
import GUI from 'lil-gui'
// Debug
const gui = new GUI()
Range
특정 값의 범위를 조절할 수 있는 GUI를 생성한다.
// 아래의 두가지 방법은 동일한 동작을 한다. 개인적으론 두번째 방식이 이해하기에 쉬운 것 같음.
/*
 * gui.add()의 파라미터
 * - object: THREE.Vector3
 * - property: keyof THREE.Vector3
 * - min?: number | object | any[]
 * - max?: number
 * - step?: number
 */
gui.add(mesh.position, 'y', -3, 3, 0.01).name('y position')
gui.add(mesh.position, 'x').min(-3).max(3).step(0.01).name('x position')
/* 
 * gui.add 의 첫번째 파라미터는 항상 object여야 한다. 
 * string이나 number 타입은 동작하지 않는다.
 */
const myObject = {
 myValue: 0,
}
gui.add(myObject, 'myValue').min(-3).max(3).step(0.01).name('myValue')
Checkbox
boolean 타입의 속성 변화를 줄 수 있다.
// Checkbox
gui.add(mesh, 'visible')
gui.add(material, 'wireframe')
Color
// Color
gui.addColor(material, 'color')
// onChange 메소드와 getHexString() 메소드를 사용하여 변화된 색상의 
HexCode를 얻을 수 있다.
gui.addColor(material, 'color').onChange((value) => {
 console.log(value.getHexString())
})
응용 : Three.js 바깥에서 색상정보를 관리하기
debugObject.color = '#e9b66a'
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ color: debugObject.color })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// Color
gui.addColor(debugObject, 'color').onChange(() => {
 material.color.set(debugObject.color)
})
Function / Button
버튼을 눌렀을때 특정 함수를 실행시키기
// Function
debugObject.spin = () => {
 gsap.to(mesh.rotation, { duration: 1, y: mesh.rotation.y + Math.PI * 2 })
}
gui.add(debugObject, 'spin')
Geometry 변경하기
widthSegments, heightSegments, depthSegments는 처음 생성 후 변경이 불가능하다.
그래서 오래된 geometry를 destroy 하고, 새로운 geometry를 생성해야 한다.
오래된 geometry를 제거하지 않고 생성만 한다면 메모리 누수가 발생할 수 있으니 주의하자.
// init geometry
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ color: debugObject.color, wireframe: true })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// subdivision
debugObject.subdivision = 2
gui
 .add(debugObject, 'subdivision')
 .min(1)
 .max(20)
 .step(1)
 .onFinishChange(() => {
 // Remove old mesh or there will be memory leak!
 mesh.geometry.dispose()
 // Create new geometry
 const subdivision = debugObject.subdivision
 mesh.geometry = new THREE.BoxGeometry(1, 1, 1, subdivision, subdivision, subdivision)
 ![](https://velog.velcdn.com/images/hyounglee/post/d9d72bb8-f035-4b54-881b-eb92f2c0624c/image.png)
})
Folders
많은 ui controller들을 그룹으로 묶고 싶은 경우 라이브러리의 addFolder 메소드를 사용하면 정말 간단하게 해결할 수 있다. 폴더를 생성하고 gui.add 를 모두 폴더명.add 로 변경해주면 된다. nested folder도 생성이 가능하다.
// Folder
const cubeTweaks = gui.addFolder('Awesome Cube')
...
// Checkbox
cubeTweaks.add(mesh, 'visible')
cubeTweaks.add(material, 'wireframe')
// Color
cubeTweaks.addColor(debugObject, 'color').onChange(() => {
 material.color.set(debugObject.color)
})
그 외의 여러가지 기능
// Debug
const gui = new GUI({
 width: 500,
 title: 'Nice Debug UI',
 closeFolders: false,
})
gui.close() // GUI를 닫는 method
gui.hide() // GUI를 숨기는 method
// h키로 gui의 노출을 토글할 수 있다.
window.addEventListener('keydown', (e) => {
 if (e.key === 'h') {
 gui.show(gui._hidden)
 }
})
그 외의 다양한 기능들은 lil-gui의 공식문서를 참고하자. 중요한 것은 작업 중간에 gui를 반드시 활용하는 것이다. 손쉽게 최고의 화면 구성이나 색상, 중력 등을 고려하여 프로덕트를 만들 수 있을 것이다!
버튼UI 같은 것들 따로 만들 필요 없이 바로 기능만 붙여서 three.js 와 연동할 수 있다는게 엄청난 장점으로 느껴진다.. 잘 활용해봐야겠다!

TIL 115 | Three.js 기초 - Debug UI

댓글