[Capstone Project] three.js GUI로 변수 조작하기

※ 해당 글은 capstone 종합설계 프로젝트를 하면서 적었던 일지를 돌아보며 작성한 것입니다.

개발일지 2022.09.30 

2022-2 학기로 진행한 캡스톤 프로젝트를 하면서 적었던 일지들을 돌아보며 뭐라도 남기는 것이 좋을 것 같아, 포스팅에 옮기는 글을 쓰기 시작한다.

three.js와 react를 함께 이용하여 웹 UI로 그래픽을 조작할 수 있는 프로젝트였다. 

 애초에 three.js라는 라이브러리와 web으로 그래픽을 다루는 것을 난생 처음하는 것이었기에 three.js에 대한 이해가 필요했다.

 

처음에는 gui조작을 통해서 모델을 수정하기 위해서 gui다루는 라이브러리 dat.gui를 조작하는 법을 익혔다.

dat.gui를 사용하여 three.js 환경에서 변수를 조작하는 gui를 만들려고 하였다.

 dat gui 개념이 헷갈렸는데

// gui
const gui = new GUI();
const testVertex = { vertex1 : 1, vertex2 : 2};
const Gparameters = { x: 0, y: 0, z: 0}

var ui = gui.add(testVertex, 'vertex1');
ui = gui.add( Gparameters, 'x' ).min(0).max(200);
const uiFolder = gui.addFolder('A');
uiFolder.add(testVertex, 'vertex2');
uiFolder.open();

위 코드에서 GUI()는 dat.gui를 import한 것이고,

gui.add가 gui로 조절할 parameter설정, addfolder라는 함수가 있는데, 그건 그룹 단위인 듯 하다.

uiFolder라는 폴더를 생성하고, 그 안에 add로 gui parameter를 넣으면

이렇게 폴딩할 수 있는 변수가 된다.

folder의 open()으로 열어놓을 수도 있다.

보아하니 gui의 변수로 설정할 수 있는 값은 key/value 대칭이 되는 object 형태이어야 하는 것 같다.