(6)번과 같이 애니메이션을 작동할 때 성능부분에서 문제가 있을 수 있다!
각각 사용자마다 다른 기기로 열어보게 되는데 그 기기마다 성능차이가 있을 수 있기 때문에
좋은 컴퓨터에서는 모르지만 좋지 않은 컴퓨터에서는 버벅임이 있을 수 있다!
그 부분을 잡는 방법 2가지가 있는데 그걸 정리하려고 한다!
해당 코드는 ⭐️ 구역만 수정된 부분으로 해당 구역만 집중해서 보면 된다!
getElapsedTime
<script>
//그리기
const clock = new THREE.Clock(); ⭐️
function draw(){
console.log(clock.getElapsedTime()); ⭐️
const time = clock.getElapsedTime(); ⭐️
// mesh.rotation.y += 0.1;
// mesh.rotation.y += THREE.MathUtils.degToRad(1); ✅
mesh.position.y += 0.01;
if(mesh.position.y > 3){
mesh.position.y = 0;
}
renderer.render(scene,camera);
// window.requestAnimationFrame(draw);
renderer.setAnimationLoop(draw);
}
</script>우선적으로 clock이라는 변수를 선언해서 threeJS의 기능인 Clock을 선언한다.
이 clock 자체가 경과된 시간을 값으로 가지고 있는데 그 값을 출력을 해보겠다!
콘솔창에 getElapsedTime()라는 메서드를 사용하여 확인을 하면
아래의 이미지와 같이 초단위로 콘솔창에 계속해서 찍히게 된다.
이처럼 0부터 1초씩 증가하는 값이 무한히 출력된다.
그렇다면 time이라는 변수를 생성하여 해당 메서드를 넣어준다!
그리고 y의 rotation값을 1도씩 증가하게 만드는 코드✅ 는 주석처치를 해준다.
주석처리를 해준 이유는 1초씩 값이 증가하는 time 변수를 대체해서 사용하려고 한다!
<script>
//그리기
const clock = new THREE.Clock();
function draw(){
console.log(clock.getElapsedTime());
const time = clock.getElapsedTime();
// mesh.rotation.y += 0.1;
// mesh.rotation.y += THREE.MathUtils.degToRad(1);
mesh.rotation.y = 2 * time; ⭐️
mesh.position.y += 0.01; ✅
if(mesh.position.y > 3){
mesh.position.y = 0;
}
renderer.render(scene,camera);
// window.requestAnimationFrame(draw);
renderer.setAnimationLoop(draw);
}
</script> mesh의 rotation y값을 수정하는 값을 time으로 적용한다면,time은 1(초)씩 증가하는 형태라
mesh.rotation.y += THREE.MathUtils.degToRad(1); 와 동일한 구조를 나타낸다!
여기서 주의해야 하는것은 +=를 =로 수정해주는 것!
이유는 간단하게 THREE.MathUtils.degToRad(1); 1도라는 값을 점진적으로 추가해가는 것이 아닌 1도라는 값을 정의해준 것이기에 +=로 값을 점진적으로 추가해주었지만
time은 기본적으로 1(초)씩 증가하기에 =로 해주어야 한다!
그렇다면 ✅ mesh의 position y값도 time으로 수정해주면 어떨까?
그 결과는 정상적으로 time이 증가하듯 위로 올라가다가
아래에 있는 if(mesh.position.y > 3) 조건문에 의해서 원상복귀 되고난 후에는
position 값은 고정되어 버리는 오류가 생긴다! 이 부분을 잡기위해 getDelta가 필요로 하다!
getDelta
<script>
const clock = new THREE.Clock();
function draw(){
// elapsed = '경과'라는 뜻
// getElapsedTime와 getDelta를 동시에 사용하면 오류가 생김!
// const time = clock.getElapsedTime();
const delta = clock.getDelta(); ⭐️
// mesh.rotation.y += 0.1;
// mesh.rotation.y += THREE.MathUtils.degToRad(1);
mesh.rotation.y += 2 * delta; ⭐️
mesh.position.y += delta;
if(mesh.position.y > 3){
mesh.position.y = 0;
}
renderer.render(scene,camera);
// window.requestAnimationFrame(draw);
renderer.setAnimationLoop(draw);
}
</script>time 변수를 주석처리를 해주고 delta라는 변수를 새로 생성,
clock에 getDelta라는 메서드를 사용해준다.
getDelta는 getElapsedTime 와 차이점이 있다.
getElapsedTime: 단순하게 시간의 흐름을 초로 보여주는 메서드getDelta: draw 함수가 반복적으로 실행되는 고정적인 시간
delta라는 getDelta를 mesh의 rotation y값으로 넣어주는데
값이 계속 증가하는 getElapsedTime와 다르게 특정시간이 정해지는 getDelta는
+=를 사용해서 값을 늘려주어야 값이 증가해 애니메이션이 정상적으로 작동한다!
getElapsedTime보다getDelta를 주로 사용하니 기억해두자!!
