three.js 애니메이션

mesh를 회전시켜보자.

function draw(){
    mesh.rotation.y += THREE.MathUtils.degToRad(1);
    renderer.render(scene, camera);
    
    window.requestAnimationFrame(draw);
}

프레임마다 애니메이션을 호출할 때 requestAnimationFrame을 사용한다.

degToRad로 360도를 라디안으로 변경하여 rotation에 적용한다.

 

renderer.setAnimationLoop(draw);

requestAnimationFrame대신 renderer객체의 setAnimationLoop를 사용할 수도 있다.

 

프레임별 애니메이션은 컴퓨터의 성능에 따라서 FPS가 다르기 때문에 사용자마다 동일하게 설정해주기 위해서 시간을 이용하자.

const clock = new THREE.Clock();

function draw() {
    const time = clock.getElapsedTime();
    
    mesh.rotation.y = 2 * time;
    renderer.render(scene, camera);
    
    renderer.setAnimationLoop(draw);
}

three.js 객체의 Clock()을 이용해서 clock객체를 만들고 getElapsedTime()을 통해 현재시간을 사용할 수 있다.

 

const clock = new THREE.CLock();

function draw() {
	
    const delta = clock.getDelta();
    
    mesh.rotation.y += 2 * delta;
    mesh.position.y += 3 * delta;
    
    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

또 다른 방법으로는 clock 객체의 getDelta를 이용하는 방법이 있다. delta time은 시간의 간격이다.

javascript의 Date.now()를 사용해서 new time에서 old time을 빼는 방식으로 deltaTime을 구할 수도 있다.