[Capstone Project] three.js Geometry의 vertex를 gui로 조작해보기

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

개발일지 2022.09.30 

three.js의 mesh모델 정보는 geometry object안에 담겨있다.

geometry의 attributes에는 normal, position, uv 세 가지의 attribute가 있다.

이 값을 변경하여 생성한 mesh를 scene에 넣었을 때 gui 조작으로 실시간 mesh 수정이 가능하게 하는 것이 목표이다.

 

const testVertex = { vertex1 : 1.0, vertex2 : -1.0};

// Draw
function draw() {
    stats.update();

    testGeometry.attributes.position.array[0] = testVertex.vertex1;

    testGeometry.attributes.position.needsUpdate = true;

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

위 코드는 동적 mesh 수정을 테스트한 코드이다.

testVertex라는 오브젝트의 vertex1 값을 매번 렌더링마다 geometry의 position array를 통해 값을 수정하는 것으로 mesh를 조작할 수 있다.

 

const testVertex = { vertex1 : 1.0, vertex2 : -1.0};

// test mesh
const vertices = new Float32Array( [
	-1.0, testVertex.vertex1, testVertex.vertex2
	 1.0, -1.0,  1.0,
	 1.0,  1.0,  1.0,

	 1.0,  1.0,  1.0,
	-1.0,  1.0,  1.0,
	-1.0, -1.0,  1.0,
] );

const testGeometry = geometry.clone();
const testMaterial = new THREE.MeshStandardMaterial({
    color: 'seagreen',
    side : DoubleSide,
});
testGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const testMesh = new THREE.Mesh(testGeometry, testMaterial);
scene.add(testMesh);

처음에는 geometry.setAttribute로 들어가는 vertices 값을 변수로 설정했었다. 코드에서 1.0 상수 대신 testVertex.vertex1, testVertex.vertex2로 들어간 부분들이다.

이 경우 변수의 레퍼런스가 아니라 값만 들어가기 때문에 gui로 testVertex를 수정해도 실질적인 vertices값에는 동적인 변화가 없었다. 

 

// Draw
function draw() {
    stats.update();

    // testGeometry.attributes.position.array[0] = testVertex.vertex1;
    vertices[1] = testVertex.vertex1;
    
    // console.log(testVertex);

    testGeometry.attributes.position.needsUpdate = true;

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

 

geometry attribute에 vertices는 레퍼런스 채로 들어가 있으므로, vertices를 업데이트 하면 mesh를 조작할 수 있었다.

이때 geometry attributes의 needsUpdate를 true로 설정해주자. update 설정을 하지 않으면 mesh가 변화하지 않는다.

보아하니 최소한 attribute안에 들어가는 array의 레퍼런스는 변수 형태로 조작할 수 있는 모양이므로 이런 방식으로 수정하면 되겠다.