three.js Geometry vertex 움직이기 - 2

function draw() {
    const time = clock.getElapsedTime() * 30;

    for (let i = 0; i < positionArray.length; i += 3){
        positionArray[i] += Math.sin(time) * 0.02;
    }

    geometry.attributes.position.needsUpdate = true;

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

 

 

이번에는 position.array값들을 sin함수를 이용하여 진동하는 코드이다.

이때 매 프레임마다 vertex의 position을 update하는 설정을 허용하기 위해서 position.needsUpdate 옵션을 true로 설정해야한다.

 

const positionArray = geometry.attributes.position.array;
const randomArray = [];
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;

    randomArray[i] = (Math.random() - 0.5) * 0.2;
    randomArray[i + 1] = (Math.random() - 0.5) * 0.2;
    randomArray[i + 2] = (Math.random() - 0.5) * 0.2;
}

// 그리기
const clock = new THREE.Clock();

function draw() {
    const time = clock.getElapsedTime() * 3;

    for (let i = 0; i < positionArray.length; i += 3){
        positionArray[i] += Math.sin(time + randomArray[i] * 100) * 0.002;
        positionArray[i + 1] += Math.sin(time + randomArray[i + 1] * 100) * 0.002;
        positionArray[i + 2] += Math.sin(time + randomArray[i + 2] * 100) * 0.002;
    }

    geometry.attributes.position.needsUpdate = true;

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

이번에는 positionArray의 각 vertex들이 서로 다른 랜덤한 움직임을 갖도록 하는 코드이다.

positionArray와 같은 크기의 randomArray에 랜덤값을 넣고, 각각의 position에 시간에 따른 변화와 랜덤값을 넣는 방식이다. 아래 사진과 같이 움직이며, getElapsedTime이나 random값 또는 sin값에 곱하는 상수들의 크기에 따라서 다양한 움직임을 가진다.