three.js의 내장 Inspector 코드 정리

내장 인스펙터 UI의 설치는 다음과 같습니다.

import { Inspector } from 'three/addons/inspector/Inspector.js';

...

renderer.inspector = new Inspector();
this.domApp.appendChild(renderer.domElement);

제어하고자 하는 객체는 다음과 같습니다.

const obj = {
  bVisible: false,

  value: 0.5,

  color: new THREE.Color(0xff0000),
  // color: 0xffff00,
  // color: '#ff00ff',

  item: 'glass'
}

객체에 대한 각 필드를 제어하는 UI의 추가는 다음과 같습니다.

const gui = this.renderer.inspector.createParameters('파라메터 설정1');

gui.add(obj, 'bVisible').name('obj의 bVisible')/*.onChange(v => { console.log(v) });*/
gui.add(obj, 'value', 0, 1, 0.01).name('obj의 value')/*.onChange(v => { console.log(v) });*/
gui.addColor(obj, 'color').name('obj의 color')/*.onChange(v => { console.log(v) });*/
gui.add(obj, 'item', [ 'duck', 'glass' ]).name('obj의 item')/*.onChange(v => { console.log(v) });*/

결과 UI는 다음과 같습니다.

아래와 같은 three.js 최신버전에서의 인스펙터 이슈가 있습니다.

three.js r184의 Inspector UI 적용시