질문&답변
안녕하세요 좋은 질문입니다. 실행 결과는 크게 다르지 않으나 코드 작성해서 비교 해보시면 느낌이 다르실거에요. 예제처럼 실시간으로 위치 값을 계산할때는 requestAnimationFrame을 이용한 계산이 60프레임 전부 사용할 수 있어서 움직임이 부드럽습니다. 물론 실무에서는 버튼 롤오버 등 다양한 곳에 transition 을 많이 사용하기는 합니다. 필요한 곳에 적절히 나눠서 사용하시면 되겠습니다. 두가지를 섞어도 사용하기도 합니다.
질문&답변
안녕하세요 올려주신 소스에 문제를 찾았습니다. (코드는 지워주세요) pageNum = Math.min(Math.ceil(scrolly / 100), totalNum); -> 수정 pageNum = Math.ceil(scrolly / 100); 위 처럼 바꿔주시면 잘 됩니다. 이미지는 잘 로드되고 있는데 스크롤 값이 안 넘어가서 발생한 문제였습니다.
질문&답변
완전 최신버전은 잘 안써요. 조금 안정된 이전 버전을 사용하는 게 보통입니다만. 강의 제작 시간이 좀 지나서 더 구버전이 되어버렸네요. ^^; 버전이 올라갈 때마다 조금씩 달라지는 점이 있어요. 오래된 api 나 기능이 없어지기도 하고 작게는 프로퍼티 이름이 변화되기도 합니다. 지금 버전으로 기본기를 익히시고 버전을 올리실 필요를 느끼면 버전에 맞춰서 마이그레이션을 하면 됩니다. 큰 틀이 바뀌지는 않으니까요.
질문&답변
안녕하세요. 이제 해당 서비스에서 저 url을 지원을 안 하네요. 바뀐지 모르고 있었습니다. 이 URL로 바꿔서 해보시겠어요? 랜덤으로 이미지가 나옵니다. (400/300 은 이미지 사이즈) https://picsum.photos/400/300 i 값을 이용하려면 아래처럼 사용할 수 있습니다. https://picsum.photos/id/2/500/500 실제 코드 const imageMap = new THREE.TextureLoader().load( `https://picsum.photos/id/${i}/500/500` );
질문&답변
안녕하세요. three.js 파일 이라는 게 cdn 주소를 말씀하시는 걸까요? 수업 자료에 있는 three.js 주소를 사용하셔도 됩니다. 페이지가 업데이트가 되면서 조금씩 달라지기는 합니다.만 우리가 필요한 건 일단 아래처럼 three.js 를 불러와서 사용해보는 겁니다. 다른 질문 있으시면 또 질문 남겨주세요~ import three from 'https://cdn.jsdelivr.net/npm/three@0.176.0/+esm'
질문&답변
안녕하세요 canvas 에 mouseMove 이벤트를 걸어보세요 . document 에 이벤트가 걸려있어서 html 전체에서 이벤트가 작동을 하고 있거든요. 어떤 '간단한 방법'을 질문하시는 건지 잘 모르겠어요. 원하는 동작을 다시 한 번 질문해주세요~
질문&답변
안녕하세요 ai가 답변을 달아줬군요? 허허 일단 wheel 이벤트에 x,y값을 변경하고 싶으신 이유가 페이지는 스크롤 이동 되는데 커서는 그대로 있어서겠죠? mouse move 이벤트는 마우스를 움직여야 발생하니까 그렇게 되는데요. ai답변이랑 비슷한데 requestAnimationFrame 을 이용해보세요. 강의 뒤에 나올텐데요. 아래 코드가 계속 돌아가면 스크롤이 어디에 있던 따라다닐거에요. 스크롤 이벤트에는 직접 함수를 작성하지 않으셔도 됩니다. requestAnimationFrame(() => { x = e.pageX; y = e.pageY; cursor.style.transform = `translate(${x}px, ${y}px)`; });
질문&답변
안녕하세요 코딩일레븐입니다. 모든 코드를 이해하지 않으셔도 사용하시는데 문제는 없지만 조명이나 포지션 등 차이 정도 해석은 가능하셔야 할 것 같아요. 그래야 나중에 필요한 것을 복붙해서 사용도 가능하니까요. 지금은 있는 코드를 조금씩 바꿔가며 응용하시면 됩니다. 저도 모든 코드를 새로 작성하지는 않아요.
질문&답변
인프런 AI 인턴이 잘 설명을 해줬네요. 핵심은 초기값 0 설정 마우스 위치 감지 그리고 타겟이 마우스를 부드럽게 따라오게 만드는 것 세가지 입니다. LOOP가 돌면서 마우스 위치에 따라 타겟의 위치를 '변화' 시켜주는 거에요. 마우스 위치와 타겟 위치 간의 차이에 속도를 곱하여 남은 값만큼 이동 . 매 프레임마다 마우스 위치로 조금씩 이동 하여 부드러운 효과를 주게 됩니다. targetX += (x - targetX) * speed; targetY += (y - targetY) * speed; 현재위치 += (목표 - 남은거리) x 감속을 위한 숫자 1 += (10 - 1) x 0.02 부드럽게 움직이기 위한 공식이라고 생각하시고 사용하시면 됩니다. speed 변수 값을 바꿔보시면서 테스트 해보세요. console.log(targetX ) 찍어보시고요.
질문&답변
안녕하세요. 혹시 vscode의 go live 버튼을 누르면 브라우저가 자동으로 실행이 되시나요? 브라우저에서 http://127.0.0.1:5500/index.html
