coding11

안녕하세요 좋은 질문입니다.실행 결과는 크게 다르지 않으나 코드 작성해서 비교 해보시면 느낌이 다르실거에요.&nbsp;예제처럼 실시간으로 위치 값을 계산할때는 requestAnimationFrame을 이용한 계산이60프레임 전부 사용할 수 있어서 움직임이 부드럽습니다.&nbsp;물론 실무에서는 버튼 롤오버 등 다양한 곳에 transition 을 많이 사용하기는 합니다.필요한 곳에 적절히 나눠서 사용하시면 되겠습니다. 두가지를 섞어도 사용하기도 합니다.

mouse position interpolation과 transition linear interpolation의 차이

안녕하세요올려주신 소스에 문제를 찾았습니다. (코드는 지워주세요)<pre><code class="language-javascript">pageNum = Math.min(Math.ceil(scrolly / 100), totalNum);

-> 수정

pageNum = Math.ceil(scrolly / 100); </code></pre>위 처럼 바꿔주시면 잘 됩니다.이미지는 잘 로드되고 있는데 스크롤 값이 안 넘어가서 발생한 문제였습니다.&nbsp;&nbsp;

잘 안되네요

완전 최신버전은 잘 안써요. 조금 안정된 이전 버전을 사용하는 게 보통입니다만. 강의 제작 시간이 좀 지나서 더 구버전이 되어버렸네요. ^^;버전이 올라갈 때마다 조금씩 달라지는 점이 있어요. 오래된 api 나 기능이 없어지기도 하고 작게는 프로퍼티 이름이 변화되기도 합니다. 지금 버전으로 기본기를 익히시고 버전을 올리실 필요를 느끼면 버전에 맞춰서 마이그레이션을 하면 됩니다. 큰 틀이 바뀌지는 않으니까요.

버전에 대해서....

안녕하세요.이제 해당 서비스에서 저 url을 지원을 안 하네요. 바뀐지 모르고 있었습니다.이 URL로 바꿔서 해보시겠어요? 랜덤으로 이미지가 나옵니다. (400/300 은 이미지 사이즈)<a target="_blank" rel="noopener noreferrer nofollow" href="https://picsum.photos/400/300">https://picsum.photos/400/300</a>i 값을 이용하려면 아래처럼 사용할 수 있습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://picsum.photos/id/2/500/500">https://picsum.photos/id/2/500/500</a>&nbsp;실제 코드<pre><code>const imageMap = new THREE.TextureLoader().load(
 `https://picsum.photos/id/${i}/500/500`
);</code></pre>

이미지가 안나옵니다.

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

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

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

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

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

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

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

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

인프런 AI 인턴이 잘 설명을 해줬네요.핵심은 초기값 0 설정마우스 위치 감지그리고 타겟이 마우스를 부드럽게 따라오게 만드는 것세가지 입니다.LOOP가 돌면서 마우스 위치에 따라 타겟의 위치를 '변화' 시켜주는 거에요.마우스 위치와 타겟 위치 간의 차이에 속도를 곱하여 남은 값만큼 이동. 매 프레임마다 마우스 위치로 조금씩 이동하여 부드러운 효과를 주게 됩니다.&nbsp;<pre><code class="language-javascript">targetX += (x - targetX) * speed; 
targetY += (y - targetY) * speed;

현재위치 += (목표 - 남은거리) x 감속을 위한 숫자
1 += (10 - 1) x 0.02 <- 0.18만큼 이동
1.18 += (10 - 1.18) x 0.02 <- 0.1764만큼 이동
.
.
.</code></pre>부드럽게 움직이기 위한 공식이라고 생각하시고 사용하시면 됩니다.&nbsp;speed 변수 값을 바꿔보시면서 테스트 해보세요.console.log(targetX ) 찍어보시고요.&nbsp;

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

안녕하세요. 혹시 vscode의 go live 버튼을 누르면 브라우저가 자동으로 실행이 되시나요?브라우저에서 <a target="_blank" rel="noopener noreferrer nofollow" href="http://127.0.0.1:5500/index.html">http://127.0.0.1:5500/index.html</a> <- 이런식으로 열리는지 확인해주세요~

coding11

Posts