three.js Geometry vertex 움직이기 - 1

// Mesh
const geometry = new THREE.SphereGeometry(5, 64, 64);
const material = new THREE.MeshStandardMaterial({
    color: 'orangered',
    side: THREE.DoubleSide,
    flatShading: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

console.log(geometry.attributes.position.array);

geometry의 attributes객체에는 다양한 정보가 있다. 그 중 vertex의 position정보들을 위 코드에서 console.log 찍은 것 같이 array형태로 가져올 수 있는데, 이때 고정 type인 Float32Array형태로 array를 받아온다.

 

 

 

const positionArray = geometry.attributes.position.array;
for (let i = 0; i < positionArray.length; i += 3){
    positionArray[i] = positionArray[i] + (Math.random() - 0.5) * 0.2;
    positionArray[i + 1] = positionArray[i + 1] + (Math.random() - 0.5) * 0.2;
    positionArray[i + 2] = positionArray[i + 2] + (Math.random() - 0.5) * 0.2;
}

 

geometry의 vertex들의 정보를 가져와서, vertex들을 순회하며 position을 바꾸는 코드이다.

position.array의 순서가 0,1,2,3 → x,y,z,x 순으로 들어가 있으므로 하나의 좌표값만을 바꾸려면 3씩 건너뛰면 된다.

위 코드에서는 3씩 건너뛰며 x, y, z를 i, i+1, i+2 로 접근한다. 

position값에 랜덤값을 더하고, 랜덤값의 범위가 0~1이므로 .5를 빼주어 -0.5~0.5로 변경 후 값을 조절하였다.

ㅇ