Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요, 인프런 AI 인턴입니다.

모바일 환경에서 touchmove 이벤트가 예상대로 작동하지 않아 문제를 겪고 계시군요. 이는 모바일 터치 이벤트와 마우스 이벤트 간의 차이에서 기인할 수 있습니다. 다음은 문제 해결에 도움이 될 수 있는 몇 가지 사항입니다:

1. touch-action 속성:

   • css에서 touch-action을 none으로 설정하여 기본 동작을 막으려 했으나, 브라우저에 따라 다르게 작동할 수 있습니다. 브라우저 호환성을 고려하여 추가 설정을 해보시기 바랍니다.
     

2. 이벤트 리스너 설정:

   • touchmove 이벤트 핸들러를 설정할 때는 옵션 객체에서 { passive: false }를 명시적으로 설정하여 이벤트 핸들러가 preventDefault() 호출을 할 수 있도록 합니다. 이를 통해 기본 스크롤 동작을 방지할 수 있습니다.
     

   canvasElement.addEventListener('touchmove', function(e) {
       e.preventDefault();
       // 카메라 회전 로직
   }, { passive: false });

3. 터치와 마우스 이벤트 분리:

   • 모바일 환경에서의 터치 이벤트와 데스크탑의 마우스 이벤트는 별개로 처리해야 합니다. 터치이벤트에서 멀티터치 등을 고려해야 할 수도 있습니다.
     

4. 카메라 회전 로직 확인:

   • touchmove로 카메라 회전 로직을 제어할 때, 변화 값이 모바일 환경에 최적화되어 있는지 확인해 보세요. 모바일에서는 손가락의 미세한 움직임도 감지하기 때문에 감도 조절이 필요할 수 있습니다.
     

관련해서는 아래 유사한 질문과 답변을 참조하시면 도움이 될 것입니다:

• top/left 와 bottom/right 쪽 mousemove가 잘 안되는거 같아서요. code에 문제가 있는지 한번 봐주시면 감사하겠습니다. - mousemove와 touchmove 관련 동작의 차이를 다룬 질문입니다.
  
• three.js 사용방법 - three.js 환경 설정과 관련된 질문입니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.