[Capstone Project] dat.GUI를 활용하여 vertices를 수정하고 확인하기

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

개발일지 2022.10.01

three.js에서 vertex를 모니터링하고 때로는 수정하기위해 dat.GUI를 이용하여 일종의 Assist UI을 간단하게나마 작성하였다.

 

https://codepen.io/slpkite108/pen/OJZZXbx

Assist

위 링크는 함께 프로젝트 했던 팀원의 사이트를 빌렸습니다^^

 

GUI

_setupGUI(){
        const guiParam = {
            b_segmentNumber:0,
            segmentNumber:0,
            b_vertexNumber:0,
            vertexNumber:0,
            x:0.0,
            y:0.0,
            z:0.0,
            changed:true,
        }
        this._guiParam = guiParam;

        const gui = new GUI();

        const guiFolderVertex = gui.addFolder('Vertex');
        guiFolderVertex.add(this._guiParam,'segmentNumber',0,this._mesh.geometry.getAttribute('position').array.length/9-1,1)
        guiFolderVertex.add(this._guiParam,'vertexNumber',0,2,1)
        guiFolderVertex.add(this._guiParam,'x',-10,10,0.01).listen();
        guiFolderVertex.add(this._guiParam,'y',-10,10,0.01).listen();
        guiFolderVertex.add(this._guiParam,'z',-10,10,0.01).listen();
        guiFolderVertex.open()
    }

update

update(time){
        const vertices = this._mesh.geometry.attributes.position.array;
        if(this._guiParam.vertexNumber!=this._guiParam.b_vertexNumber||this._guiParam.segmentNumber!=this._guiParam.b_segmentNumber){
            this._guiParam.b_vertexNumber = this._guiParam.vertexNumber;
            this._guiParam.b_segmentNumber = this._guiParam.segmentNumber;
            this._guiParam.changed = true;
        }

        if(this._guiParam.changed){
            this._guiParam.x = vertices[9*this._guiParam.segmentNumber+3*this._guiParam.vertexNumber];
            this._guiParam.y = vertices[9*this._guiParam.segmentNumber+3*this._guiParam.vertexNumber+1];
            this._guiParam.z = vertices[9*this._guiParam.segmentNumber+3*this._guiParam.vertexNumber+2];
            this._guiParam.changed=false;
        }

        vertices[9*this._guiParam.segmentNumber+3*this._guiParam.vertexNumber] = this._guiParam.x;
        vertices[9*this._guiParam.segmentNumber+3*this._guiParam.vertexNumber+1] = this._guiParam.y;
        vertices[9*this._guiParam.segmentNumber+3*this._guiParam.vertexNumber+2] = this._guiParam.z;
        
        this._mesh.geometry.attributes.position.needsUpdate = true;
        console.log(this._guiParam.x);
    }

mesh.geometry.attributes.position.array를 통해 vertex에 접근한다.

x,y,z 값이 바뀌는 경우를 탐지하기 위해 changed를 이용하였다.

vertexNumber와 segmentNumber가 바뀌면 changed = true로 입력하기 위해 이전 값을 저장하는 b_vertexNumber와 b_segmentNumber를 사용하였다.