[ #8.5 ] ThreeJS의 Debug UI - 2탄

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★  

 

시작하기 전, 1탄을 안보신 분들이라면..
꼭꼭! 보고 오십셔!! 이전 내용과 이어지니께!!

👇 ThreeJS의 Debug UI - 1탄

[ #8 ] ThreeJS의 Debug UI - 1탄

 

 

🍀 Geometry 조정

우리가 Geometry를 생성할 때 사용했던 코드.. 기억 나시나요?

const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);

'모든 Geometry는 BufferGeometry의 속성을 상속받는다' 라고 설명했던 것 기억... 나실까요? 

안나시거나, 금시초문이라면 아래의 게시글 한번 읽고 오시는 것을 추천드립니당!

[ #7 ] ThreeJS의 Geometry

한번 저 Segments을 조정해보는 코드를 만들어 봅시다!

시작하기 전에, 먼저 Material의 wireframe를 활성화하여 삼각형들이 잘 보일 수 있도록 해줍시당!    

const material = new THREE.MeshBasicMaterial({
  color: '#9c7fe3',
  wireframe: true,
});

// !작동이 안되는 코드
gui.add(geometry, 'widthSegments').min(1).max(20).step(1);

음.. 이렇게 하면 될줄 알았건만.. 전혀 작동하지 않습니다!
왜일까요??!

widthSegments는 geometry의 속성이 아니였습니다..!!! 

widthSegments는 단지 BoxGeometry 클래스를 통해 인스턴스화를 할 때에, 보내지는 매개변수일 뿐인 것이죠..!
한마디로, Geometry 인스턴스를 생성할 때 딱 한번만 쓰이는 값인거죠..!

우리는 직접 만든 객체를 사용해서 필요할 때마다 Geometry 인스턴스를 새로 만들어, Mesh에 할당해주어야 하는 상황이 된 것입니다.!

const debugObject = {};

// ...

debugObject.subdivision = 2; // Segments를 위한 속성 생성 
gui
    .add(debugObject, 'subdivision')
    .min(1)
    .max(20)
    .step(1)
    .onFinishChange((value) => // onChange가 아닌 onFinishChange 사용
    {
        mesh.geometry.dispose(); // 기존의 geometry 삭제 
        mesh.geometry = new THREE.BoxGeometry(
            1, 1, 1,
            value, value, value
        );
    });

👆 onFinishChange( )를 사용하여, 사용자가 변경을 완료한 후 값이 적용하고 있습니다.
이를 통해 Segments의 잦은 변경을 통해 발생할 수 있는 CPU 성능하락을 해결할 수있습니다. 

👆 mesh.geometry.dispose( )를 사용하여, geometry를 새롭게 생성하기 전, 이전의 geometry를 삭제해주고 있습니다.
이를 통해 이전의 geometry들을 통해 발생할 수 있는 메모리 누수를 해결할 수 있습니다.  

 

 

🍀 폴더 생성

많은 UI들이 생기게 되면, 폴더 별로 정리하는 것이 유용하겠죠?

const cubeTweaks = gui.addFolder("Awesome Cube");

// gui.add(...) 또는 gui.addColor(...)의 코드 변경
// gui -> cubeTweaks 로 변경
cubeTweaks.add(mesh.position, "y").min(-3).max(3).step(0.01).name("elevation");

cubeTweaks.add(mesh, "visible");

cubeTweaks.addColor(debugObject, "color").onChange((value) => {
  material.color.set(debugObject.color);
});

debugObject.spin = () => {
  gsap.to(mesh.rotation, {
    duration: 2,
    y: mesh.rotation.y + Math.PI * 2,
    ease: "power2.inOut",
  });
};
cubeTweaks.add(debugObject, "spin");

debugObject.subdivision = 2;
cubeTweaks
  .add(debugObject, "subdivision")
  .min(1)
  .max(20)
  .step(1)
  .onFinishChange((value) => {
    mesh.geometry.dispose();
    mesh.geometry = new THREE.BoxGeometry(1, 1, 1, value, value, value);
  });

 

const cubeTweaks = gui.addFolder('Awesome cube');
cubeTweaks.close();

👆 위 cubeTweaks.close( ) 메서드를 사용하여 초기에 폴더를 닫은 상태로 설정할 수 있습니당!   

 

 

🍀 GUI 설정

[ 🌳 Width ]

UI들의 상자의 width를 변경할 수 있습니다!

const gui = new GUI({
    width: 300
});

[ 🌳 Title ]

최상단 폴더의 제목을 변경할 수 있습니다!
default - "Controls"

const gui = new GUI({
    title: 'Nice debug UI'
});

[ 🌳 Close Folders ]

초기에 모든 폴더를 닫은 상태로 설정할 수 있습니다!

const gui = new GUI({
    closeFolders: true
});

[ 🌳 Close GUI ]

초기에 최상위 폴더를 닫은 상태로 설정할 수 있습니다!

const gui = new GUI({
    width: 300,
    title: 'Nice debug UI',
    closeFolders: false,
});
gui.close();

[ 🌳 Hide GUI ]

초기에 GUI의 숨김처리를 설정할 수 있습니다!

const gui = new GUI({
    width: 300,
    title: 'Nice debug UI',
    closeFolders: false,
});
gui.hide();

위에는 맛보기였구, 진짜는 아래입니다요.

keydown을 통해 GUI 숨김/표출을 설정할 수 있습니다!

const gui = new GUI({
    width: 300,
    title: 'Nice debug UI',
    closeFolders: false,
});

window.addEventListener('keydown', (event) =>
{
    if(event.key == 'h')
        gui.show(gui._hidden);
        // gui.hidden은 현재 숨김 여부의 값 반환
});

[ 🌳 ECT ]

이외에도 다양한 설정이 가능합니다! 자세한 내용은 아래 공식문서를 통해 확인해보세요!

lil-gui 0.19.2