mouse position interpolation과 transition linear interpolation의 차이

안녕하세요 좋은 질문입니다.실행 결과는 크게 다르지 않으나 코드 작성해서 비교 해보시면 느낌이 다르실거에요. 예제처럼 실시간으로 위치 값을 계산할때는 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/300i 값을 이용하려면 아래처럼 사용할 수 있습니다.https://picsum.photos/id/2/500/500 실제 코드const imageMap = new THREE.TextureLoader().load( `https://picsum.photos/id/${i}/500/500` );

threejs 사이트 들어가면 선생님과 같은 코드가 안나옵니다ㅠ

안녕하세요. three.js 파일이라는 게 cdn 주소를 말씀하시는 걸까요?수업 자료에 있는 three.js 주소를 사용하셔도 됩니다.페이지가 업데이트가 되면서 조금씩 달라지기는 합니다.만우리가 필요한 건 일단 아래처럼 three.js 를 불러와서 사용해보는 겁니다.다른 질문 있으시면 또 질문 남겨주세요~ import three from 'https://cdn.jsdelivr.net/npm/three@0.176.0/+esm'

캔버스 크기를 지정했을 때 onDocumentMouseMove 이벤트 관련

안녕하세요canvas 에 mouseMove 이벤트를 걸어보세요. document 에 이벤트가 걸려있어서 html 전체에서 이벤트가 작동을 하고 있거든요. 어떤 '간단한 방법'을 질문하시는 건지 잘 모르겠어요. 원하는 동작을 다시 한 번 질문해주세요~

mousemove 시 따라 다니는 커서 이미지 wheel 할 경우

안녕하세요 ai가 답변을 달아줬군요? 허허일단 wheel 이벤트에 x,y값을 변경하고 싶으신 이유가 페이지는 스크롤 이동 되는데 커서는 그대로 있어서겠죠? mouse move 이벤트는 마우스를 움직여야 발생하니까 그렇게 되는데요. ai답변이랑 비슷한데 requestAnimationFrame 을 이용해보세요. 강의 뒤에 나올텐데요. 아래 코드가 계속 돌아가면 스크롤이 어디에 있던 따라다닐거에요. 스크롤 이벤트에는 직접 함수를 작성하지 않으셔도 됩니다.requestAnimationFrame(() => { x = e.pageX; y = e.pageY; cursor.style.transform = `translate(${x}px, ${y}px)`; });

코드에 대해 질문있습니다.

안녕하세요 코딩일레븐입니다.모든 코드를 이해하지 않으셔도 사용하시는데 문제는 없지만 조명이나 포지션 등 차이 정도 해석은 가능하셔야 할 것 같아요. 그래야 나중에 필요한 것을 복붙해서 사용도 가능하니까요.지금은 있는 코드를 조금씩 바꿔가며 응용하시면 됩니다. 저도 모든 코드를 새로 작성하지는 않아요.

부드러운 움직임 구현1 강의 부분 질문있습니다.

인프런 AI 인턴이 잘 설명을 해줬네요.핵심은 초기값 0 설정마우스 위치 감지그리고 타겟이 마우스를 부드럽게 따라오게 만드는 것세가지 입니다.LOOP가 돌면서 마우스 위치에 따라 타겟의 위치를 '변화' 시켜주는 거에요.마우스 위치와 타겟 위치 간의 차이에 속도를 곱하여 남은 값만큼 이동. 매 프레임마다 마우스 위치로 조금씩 이동하여 부드러운 효과를 주게 됩니다. targetX += (x - targetX) * speed; targetY += (y - targetY) * speed; 현재위치 += (목표 - 남은거리) x 감속을 위한 숫자 1 += (10 - 1) x 0.02 부드럽게 움직이기 위한 공식이라고 생각하시고 사용하시면 됩니다. speed 변수 값을 바꿔보시면서 테스트 해보세요.console.log(targetX ) 찍어보시고요.

go live 실시간 크롬

안녕하세요. 혹시 vscode의 go live 버튼을 누르면 브라우저가 자동으로 실행이 되시나요?브라우저에서 http://127.0.0.1:5500/index.html