Dat GUI

Dat.GUI 는 Three.js 에 대해 배우는데 사용하는 매우 유용한 도구 이다

설치

dat.gui 받아오기

npm install dat.gui --save-dev

이제 기존 javascript 파일에 가져온다

import { GUI } from 'dat.gui'

threejs 에서 따로 제공해주는 gui

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min"

x,y,z 적용하기

x,y,z 기준으로 회전값을 설정해 준다

const gui = new GUI()
const cubeFolder = gui.addFolder("Cube");
const cubeRotationFolder = cubeFolder.addFolder("Rotation");
cubeRotationFolder.add(cube.rotation, "x", 0, Math.PI * 2);
cubeRotationFolder.add(cube.rotation, "y", 0, Math.PI * 2);
cubeRotationFolder.add(cube.rotation, "z", 0, Math.PI * 2);
cubeFolder.open();
cubeRotationFolder.open();

x,y,z 기준으로 위치값을 설정해 준다

const gui = new GUI()
const cubeFolder = gui.addFolder('Cube')
const cubePositionFolder = cubeFolder.addFolder("Position");
cubePositionFolder.add(cube.position, "x", -10, 10, 1);
cubePositionFolder.add(cube.position, "y", -10, 10, 1);
cubePositionFolder.add(cube.position, "z", -10, 10, 1);
cubeFolder.open();
cubePositionFolder.open();

x,y,z 기준으로 크기를 설정해 준다

const gui = new GUI()
const cubeFolder = gui.addFolder('Cube')
const cubeScaleFolder = cubeFolder.addFolder("Scale");
cubeScaleFolder.add(cube.scale, "x", -5, 5);
cubeScaleFolder.add(cube.scale, "y", -5, 5);
cubeScaleFolder.add(cube.scale, "z", -5, 5);
cubeFolder.open();
cubeScaleFolder.open();

결과