[Three.js] Animation

animation

---

function draw() {
	// 애니메이션 동작
	mesh.rotation.y += THREE.MathUtils.degToRad(1);

	renderer.render(scene, camera);

	// 재귀를 통한 애니메이션
	window.requestAnimationFrame(draw); // 1) window func 이용
	renderer.setAnimationLoop(draw); // 2) three.js func 이용
}

 

성능 보정

---

기기 성능에 따라 animation frame 수가 다른 문제 해결

getElapsedTime()

💡 절대 시간을 변경 값에 이용하여 성능 보정

const clock = new THREE.Clock();

function draw() {
	const time = clock.getElapsedTime();
	mesh.rotation.y = time; // 변경 값에 절대 시간을 이용함

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

 

getDelta()

💡 함수 실행 간격 시간을 이용하여 성능 보정

const clock = new THREE.Clock();

function draw() {
	const delta = clock.getDelta();
	mesh.rotation.y += 1 * delta; // 변경 값에 draw 함수 실행 간격 시간을 이용함
	mesh.position.y += 0.8 * delta;

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

 

GSAP

---

three.js 애니메이션을 보다 손쉽게 구현할 수 있는 라이브러리 사용

npm i gsap

gsap.to(
        mesh.position,
        {
            duration: 1,
            y: 2,
        }
    )

 🔗 라이브러리 링크 : https://greensock.com/gsap/