Three.js Panel

강정우·2025년 1월 1일

three.js

목록 보기

2/24

Panel

Stats

stats 은 왼쪽 상단에 현재 상태를 표출해준다. 그리하여 해당 동작이 어떤 영향을 주고 있는지를 파악할 수 있다.
그리하여 코드를 최적화할 때 사용하면 된다.

표출되는 시간은 ms(밀리초) 이다. 뿐만이니라 FPS, MB로 사용중인 메모리 용량까지 표출할 수 있다.
참고로 이는 브라우저에 따라 다르게 표출될 수 있다.

import Stats from "three/examples/jsm/libs/stats.module";

const stats = new Stats();
document.body.appendChild(stats.dom);

하지만 이것만 추가하면 아무것도 하지 않을 것이다. 여기서는 JS 의 animate 가 동작하도록 추가해줘야한다.

update()

function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
  	// 이 update 함수를 추가
    stats.update();
}

animate()

원래는 requestAnimationFrame 을 각 모니터에 주사율에 맞게 re-render 하는 함수를 만들어줘야하지만 다행이 이는 window 객체에서 제공한다.

begin(), end()

또한 굉장히 세부적인 코드만 측정할 수도 있다.

function animate() {
    requestAnimationFrame(animate)
  	
    stats.begin();
	// 요 부분만 측정
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    stats.end();
  
    renderer.render(scene, camera)
    // stats.update();
}

animate()

이를 사용하는 이유는 나중에 코드가 복잡해지면 어떤 지점에서 병목 현상이 일어나는지 짚어봐야하기 때문이다.

shoePanel()

최초에 진입하였을 때 어떤 값을 먼저 표출해줄 지 default 를 설정하는 함수이다.

Dat GUI (댓 구이) => Lil GUI (릴 구이)

Dat GUI 는 three.js 에 들어있는 건 아니고 three.js 를 더 편하게 사용할 수 있도록 GUI 를 재공하는 것이다.
물론 이 Dat GUI 말고도 다른 여러가지 GUI를 선택하여 사용해도 되고 혹은 JS로 그냥 만들어 버려도 된다.

다른 GUI

lil.GUI: dat.GUI의 현대적인 대체재. 기존 API와 유사하지만, 성능 및 기능 개선에 중점을 둠.
Tweakpane: 직관적이고 반응성이 뛰어난 GUI 라이브러리로, 스타일 커스터마이징이 쉬움.
Control Panel (control-panel): Three.js와의 통합이 쉬운 경량 GUI 라이브러리.
React GUI: React와 Three.js를 함께 사용하는 경우 GUI 라이브러리(예: react-three-fiber, Leva)를 활용.

three.js 135 버전 이후부터 lil GUI 가 공식으로 자리잡았다. 따라서 별도로 lil-gui 를 설치할 필요는 없다. 이미 three.js에 내장되어있기 때문이다.

import GUI from 'three/addons/libs/lil-gui.module.min.js'

add()

첫 번째 파라미터는 Object 즉, 내가 수정하려하는 객체를 넣어주고
두 번째 파라미터는 해당 객체의 속성값을 String 으로 넣어줘야한다.
세 번재 파라미터부터는 굉장히 다양하게 넣을 수 있는데 min, max 를 넣어줘 보겠다.

내가 넣은 객체에는 단위가 "오일러"이고 라디안 값이라고 명시되어있기 때문에 360을 넣어줬다.

import GUI from 'lil.gui'

const gui = new GUI()

const cubeFolder = gui.addFolder('Cube')
cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2)
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2)
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2)
cubeFolder.open()

const cameraFolder = gui.addFolder('Camera')
cameraFolder.add(camera.position, 'z', 0, 20)
cameraFolder.open()

addFolder(), close()

또한 위 속성값들을 addFolder 함수를 사용하여 folder 화 하여 보기 좋게 나눌 수 있다.

또한 open() 이 lil-gui 로 넘어오면서 default 가 되어서 특별히 닫을 것이 있는 것들만 close() 함수로 새로고침을 했을 때의 default 값을 "닫기"로 설정할 수 있다.

name()

import GUI from 'lil.gui'

const gui = new GUI()

const cubeFolder = gui.addFolder('Cube')
cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2).name("쏼라쏼라")