DebugUI Flashcards
Qual biblioteca usamos para criar uma Debug UI com sliders e controles?
lil-gui
Como iniciar o GUI após importar?
const gui = new GUI()
Como adicionamos um slider para mesh.position.y com limites?
gui.add(mesh.position, ‘y’).min(-3).max(3).step(0.01)
Como alterar o nome (label) de um controle?
Usando .name(‘nome’)
Como mudar o valor de uma variável que não pertence a um objeto?
Envolvendo a variável em um objeto (ex: debugObject)
Como adicionamos uma checkbox para mostrar/ocultar um mesh?
gui.add(mesh, ‘visible’)
Como adicionamos um controle de cor para um material?
gui.addColor(material, ‘color’)
Por que usar um objeto como debugObject para a cor?
Para controlar a cor fora da instância Three.js e poder aplicar .set() no material
Como aplicamos a nova cor ao material quando a cor no UI mudar?
Usando .onChange(() => { material.color.set(debugObject.color) })
Como adicionamos um botão que executa uma função?
Colocamos a função como propriedade em debugObject e usamos gui.add(debugObject, ‘func’)
Qual método usamos para reagir a mudanças somente após o usuário soltar o controle?
.onFinishChange()
Como substituímos a geometria do mesh com novos valores?
mesh.geometry.dispose(); mesh.geometry = new THREE.BoxGeometry(…)
Por que devemos chamar .dispose() na geometria antiga?
Para liberar memória da GPU e evitar vazamento
Como agrupamos múltiplos controles em uma pasta?
const folder = gui.addFolder(‘nome’); folder.add(…)
Como ocultar a interface gráfica do lil-gui completamente?
gui.hide()
Como alternar a visibilidade da UI com uma tecla?
Usando window.addEventListener(‘keydown’, …) e gui.show(gui._hidden)
