three.js_애니메이션 (6)

애니메이션 적용

<script>
	// camera.position.x = 1;
    // camera.position.y = 2;

	~ 중간 생략 ~
    
    function draw(){}
</script>

작업하기에 앞서 카메라의 위치값에서 x,y를 주석처리 해준다.
(이렇게 되면 정육면체의 정면 모습만 보이는 형태가 나타남)

그 후 애니메이션을 페인팅 해주는 draw 함수를 생성한다!

window.requestAnimationFrame 적용

<script>
    function draw(){
    	mesh.rotation.y += 0.1; 
    	renderer.render(scene,camera);
		
        window.requestAnimationFrame(draw); ⭐️
    }
    
    draw();
</script>

draw 함수에 기존에 셋팅해두었던 renderer.render(scene,camera); 를 넣어주어
함수가 실행 시에 scene과 camera가 렌더링 되도록 설정!

그리고 mesh를 y축으로 하여금 회전시키게 하기위해서
mesh.rotation.y을 += 0.1 이 되도록 셋팅해준다.

그리고 가장 중요한 requestAnimationFrame인데
해당 메소드는 📎해당 링크에서 더 디테일하게 확인할 수 있다!
requestAnimationFrame 함수에서 해당 draw();를 선언해주어 draw 함수가 계속해서 읽히도록 설정!
그렇다면 아래의 이미지와 같이 mesh가 y축을 중심으로 0.1씩 회전을 하게된다.

---

threeJS MathUtils과 degToRad

<script>
    function draw(){
    	// mesh.rotation.y += 0.1;
        mesh.rotation.y += THREE.MathUtils.degToRad(1); ⭐️
    	renderer.render(scene,camera);
		
        window.requestAnimationFrame(draw); 
    }
    
    draw();
</script>

rotation 0.1을 하게되면 생각보다 회전 속도가 빠르게 진행이 되는데
해당 부분은 각도의 radian을 사용했다느니~~ 뭐 좀 어려운 말이라 SKIP!
mesh.rotation.y += 0.1; 로 사용하기 보다는
threeJS에서 사용하기 편하게 되어있는 기능인 MathUtils를 사용!
(threeJS 기능이니 앞에 THREE를 선언해서 불러주는것 잊지말자)

그리고 degToRad의 경우는 deg to radian이라는 뜻으로,
각도의 radadian을 우리가 일반적으로 쓰는 각도인 degree로 한다는 말로
mesh.rotation.y += THREE.MathUtils.degToRad(1);
즉 1도 셋팅하도록 하는 방법이다!
degToRad(10) 과 같이 셋팅한다면 10도씩 돌아가서 더 빠르게 회전한다!

---

이제는 회전하게 셋팅도 했으니 조금 역동적이게 셋팅!

<script>
    function draw(){
    	// mesh.rotation.y += 0.1;
        mesh.rotation.y += THREE.MathUtils.degToRad(1); 
        mesh.position.y += 0.05; ⭐️
        if(mesh.position.y > 3){ ⭐️
            mesh.position.y = 0;
        }
    	renderer.render(scene,camera);
		
        window.requestAnimationFrame(draw); 
    }
    
    draw();
</script>

mesh의 y의 위치값을 0.05씩 올라가도록 셋팅,
조건문을 사용해서 위치값이 3이 됐을 때 다시 0으로 돌아도록 셋팅!
이렇게 한다면 1도씩 y축으로 회전하며 위로 상승했다가 특정 위치에서 다시
복귀해서 반복되도록 보이게 된다!

---

threeJS setAnimationLoop

<script>
	// window.requestAnimationFrame(draw); 
    renderer.setAnimationLoop(draw);
</script>

window.requestAnimationFrame과 동일한 기능을 가지는 threeJS의 메소드가 있다!
renderer가 가지고 있는 것인데, 그것이 바로 setAnimationLoop다!

두 코드의 기능은 똑같이~ 구현이 되서 무엇을 사용해도 문제는 없지만
setAnimationLoop만! 사용해야 할 상황이 있는데,
그 상황은 threeJS를 사용해서 AR이나 VR같은 콘텐츠를 만들 때는 무.조.건
setAnimationLoop를 사용해야만 한다!

기존 작업보다 살짝 어려운 부분이니 잊지않도록 유의하자