애니메이션

function draw () {
	mesh.rotation.y += 0.1; //이런식으로해도되고
    mesh.rotation.y += THREE.MathUtils.degToRad(1); //라디안값으로
    
    renderer.render(scene,camera);
    
    //window.requestAnimationFrame(draw); //계속 무한 반복
   
   	render.setAnimnationLoop(draw);
}

render안에 setAnimationLoop라는 기능이 있기때문에 두가지중에 원하는걸 사용하면된다. -

RequestAnimation -> 게임같은 가상현실 만들때 반드시 필요하다.

 

성능개선을 해주기!!

=> 1초에 60번 1초에 30번 이런식으로 성능에 따라 돌아가는 정도가 달라지면? 안된다...

=> clock을 사용해서 개선해보자.

 

function draw () {

	console.log(clock.getElapsedTime());
	mesh.rotation.y += 0.1; //이런식으로해도되고
    mesh.rotation.y += THREE.MathUtils.degToRad(1); //라디안값으로
    
    renderer.render(scene,camera);
    
    //window.requestAnimationFrame(draw); //계속 무한 반복
   
   	render.setAnimnationLoop(draw);
}

clock은 횟수는 똑같이 실행이 된다. -> 성능에 상관없는 시간이다.

 

const time = clock.getElapsedTime();

mesh.rotation.y = 2 *time; 

mesh.position.y ==0.01;

 

const delta = clock.getDelta(); // 시간차를 나타낸다.

 

getElpasedTime => 시간간격

getDelta => 시간차

 

--> 두개같이 쓰면안된다.