<div id="readability-page-1" class="page"><div><blockquote>
여러 이미지, 즉 프레임을 연속적으로 보여주면 마치 애니메이션을 보는 것과 같이 동작한다. 
이러한 착각을 만들어 내기 위해 사용할 수 있는 메서드를 알아보자. 
<img src="https://velog.velcdn.com/images/hyounglee/post/88218c51-dffc-4d12-b109-b84aa6a78918/image.png">
</blockquote>
<h2 id="requestanimationframe">requestAnimationFrame</h2>
이 함수 자체가 애니메이션을 동작하게 하는 것이 아니다! 이 함수는 새로운 프레임을 불러올 때마다 다시 호출되고, 또 호출되고, 또 호출될 것임을 의미한다. 
아래의 콘솔로그는 컴퓨터 사양에 따라 호출될 것이다. 60FPS의 컴퓨터에서는 초당 60번 호출된다.
<pre><code>// Animation
const tick = () =&gt; {
	console.log('tick')

	window.requestAnimationFrame(tick)
}

tick()</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/439a0e85-f613-4622-b8cb-4746c4ef9f1c/image.png">
<pre><code>// Animation
const tick = () =&gt; {
	// Update objects
	mesh.rotation.y += 0.01

	// Render
	renderer.render(scene, camera)

	window.requestAnimationFrame(tick)
}

tick()</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/967d2772-0816-431b-aff7-5139baae43b1/image.gif">
<h2 id="clock">Clock</h2>
three.js 에서 제공하는 Clock 인스턴스를 사용하면 좀 더 정밀한 애니메이션 조정이 가능하다.
<pre><code>const clock = new THREE.Clock()

// Animation
const tick = () =&gt; {
	// Clock
	const elapsedTime = clock.getElapsedTime() // 1초에 1이 더해지는 속도로 증가한다.

	// Update objects
	mesh.rotation.y = elapsedTime // 1초당 rotation 값이 1이 증가한다.
	mesh.rotation.y = elapsedTime * Math.PI * 2 // 1초에 rotation이 360도

	// Render
	renderer.render(scene, camera)

	window.requestAnimationFrame(tick)
}

tick()</code></pre>
<h2 id="position을-사용한-예제">Position을 사용한 예제</h2>
수포자는 웁니다...
<pre><code>const clock = new THREE.Clock()

// Animation
const tick = () =&gt; {
	// Clock
	const elapsedTime = clock.getElapsedTime()

	// Update objects
	mesh.position.y = Math.sin(elapsedTime)
	mesh.position.x = Math.cos(elapsedTime)

	// Render
	renderer.render(scene, camera)

	window.requestAnimationFrame(tick)
}

tick()</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/64de34f3-9fa4-4324-8d27-4d661de72f45/image.gif">
마찬가지로 카메라 포지션, 앵글도 애니메이션을 적용할 수 있다.
<pre><code>const clock = new THREE.Clock()

// Animation
const tick = () =&gt; {
	// Clock
	const elapsedTime = clock.getElapsedTime()

	// Update objects
	camera.position.y = Math.sin(elapsedTime)
	camera.position.x = Math.cos(elapsedTime)
	camera.lookAt(mesh.position)

	// Render
	renderer.render(scene, camera)

	window.requestAnimationFrame(tick)
}

tick()</code></pre>
<h2 id="gsap">Gsap</h2>
animation에 유용한 서드파티 라이브러리 
<a href="https://gsap.com/">https://gsap.com/</a> 
사이트 넘 이쁘다.......................😮</div></div>

(งᐖ)ว

여러 이미지, 즉 프레임을 연속적으로 보여주면 마치 애니메이션을 보는 것과 같이 동작한다.
이러한 착각을 만들어 내기 위해 사용할 수 있는 메서드를 알아보자.
requestAnimationFrame
이 함수 자체가 애니메이션을 동작하게 하는 것이 아니다! 이 함수는 새로운 프레임을 불러올 때마다 다시 호출되고, 또 호출되고, 또 호출될 것임을 의미한다.
아래의 콘솔로그는 컴퓨터 사양에 따라 호출될 것이다. 60FPS의 컴퓨터에서는 초당 60번 호출된다.
// Animation
const tick = () => {
    console.log('tick')
    window.requestAnimationFrame(tick)
}
tick()
// Animation
const tick = () => {
    // Update objects
    mesh.rotation.y += 0.01
    // Render
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}
tick()
Clock
three.js 에서 제공하는 Clock 인스턴스를 사용하면 좀 더 정밀한 애니메이션 조정이 가능하다.
const clock = new THREE.Clock()
// Animation
const tick = () => {
    // Clock
    const elapsedTime = clock.getElapsedTime() // 1초에 1이 더해지는 속도로 증가한다.
    // Update objects
    mesh.rotation.y = elapsedTime // 1초당 rotation 값이 1이 증가한다.
    mesh.rotation.y = elapsedTime * Math.PI * 2 // 1초에 rotation이 360도
    // Render
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}
tick()
Position을 사용한 예제
수포자는 웁니다...
const clock = new THREE.Clock()
// Animation
const tick = () => {
    // Clock
    const elapsedTime = clock.getElapsedTime()
    // Update objects
    mesh.position.y = Math.sin(elapsedTime)
    mesh.position.x = Math.cos(elapsedTime)
    // Render
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}
tick()
마찬가지로 카메라 포지션, 앵글도 애니메이션을 적용할 수 있다.
const clock = new THREE.Clock()
// Animation
const tick = () => {
    // Clock
    const elapsedTime = clock.getElapsedTime()
    // Update objects
    camera.position.y = Math.sin(elapsedTime)
    camera.position.x = Math.cos(elapsedTime)
    camera.lookAt(mesh.position)
    // Render
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}
tick()
Gsap
animation에 유용한 서드파티 라이브러리 
https://gsap.com/
사이트 넘 이쁘다.......................😮

TIL 112 | Three.js 기초 - 애니메이션

댓글