[3D 인터랙티브 웹] 스크롤 인터랙션/애니메이션 적용하기

스크롤 위치 계산하는 방법 -> 현재 스크롤이 전체 스크롤 영역에서 몇 %에 위치해 있는지 구해야함

• 현재 스크롤의 위치
• 전체 스크롤 영역 길이
• 브라우저의 높이
• 스크롤 가능 영역 계산 : 전체 스크롤 영역 - 브라우저의 높이

코드로 스크롤 계산하기

//스크롤 위치 계산하는 방법

document.body.style.height = "3000px";

window.addEventListener("scroll", (event) => {

    const currentScroll = document.documentElement.scrollTop;

    const currentScrollHeight = document.documentElement.scrollHeight;

    const windowHeight = window.innerHeight;

    const scrollHeight = currentScrollHeight - windowHeight; //실질적인 scroll 영역 구하기 : windowHeight에서 짙은 회색의 scroll 버튼을 뺀 높이

    //최종 스크롤 위치

    const scrollRange = currentScroll/scrollHeight;

   

    // console.log("currentScroll?", currentScroll, "currentScrollHeight?", currentScrollHeight,

    // "windowHeight?", windowHeight, "scrollHeight?", scrollHeight);

    // console.log(currentScroll/scrollHeight)

 

})

 

Three.js에서 스크롤과 애니메이션 연동하기

// 01. get Scroll Wrapper

document.body.style.height= "3000px";

// 02. add EventListener to Scroll Wrapper HTML DOM Element

window.addEventListener("scroll", event => {

    const currentScroll = document.documentElement.scrollTop;

    const scrollHeight = document.documentElement.scrollHeight;

    const windowHeight = window.innerHeight;

    const scrollRange = scrollHeight - windowHeight;

    let scrollPercent = currentScroll/scrollRange;

    console.log(scrollPercent)

    //Safari Browser나 아이폰에서 확인시 scroll 자체에 가속도가 걸리는 경우 제한하기 -> scrollPercent의 범위를 0~1로 제한하기

    if(scrollPercent < 0 ) scrollPercent = 0;

    if(scrollPercent > 1) scrollPercent = 0.99;

 

    //애니메이션 지속시간

    const duration = action.getClip().duration; //animationAction에서 플레이 할 Animtaion에 대한 데이터를 가져옴

    //action에 스크롤값 연동하기

    action.time = scrollPercent * duration;

    mixer.update(0);

})

 

모델링 결과