캔버스 크기를 지정했을 때 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

javascript 도움말 vsCode 확장팩 문의!

https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode이거 설치해보세요~

블로그 상단 페럴렉스 효과 구현 질문 있습니다!

안녕하세요. css의 background 속성을 url("...") center 0 / cover no-repeat; 로 설정해두고 시작하셔도 됩니다. 한 번 테스트 해보시겠어요?

모바일 스와이프 구현 마지막 숙제

안녕하세요.원하는대로 동작을 하신다면 맞습니다.제가 궁금한 부분은if (pageNum > 0) { pageNum--; } else { pageNum = totalNum - 1; }pageNum 이 0보다 작으면 pageNum = 0; 을 해줘야하는 것 아닌가요?어떻게 구현을 하시려는지 정확히 모르겠지만요. 아래도if (pageNum pageNum = totalNum - 1; 이라고 해줘야 할 것 같아요.아니면 빼도 동작이 같을 것 같아요. if (pageNum > 0) { pageNum--; } // if (pageNum

마우스 인터렉티브 변형 질문

안녕하세요 답변이 늦었습니다. '마우스 궤적을 따라서 이미지가 잔상처럼 늘어나는 것으로 보이게' 에 대한 정확한 느낌을 잘 모르겠어서 답변을 못드리고 있습니다. 혹시 비슷한 레퍼런스 사이트가 있으면 같이 고민해 볼 수 있을 것 같아요.

TextureLoader관련 질문 드립니다.

안녕하세요 캔은 3d 모델러가 모델링을 할 때 맵핑도 함께 해줬습니다. 상황은 다를 것 같고요. 하지만 텍스쳐 로더로 이미지를 로드하고 모델링에 맵핑하는 것은 맞습니다.https://pickywicky.co.kr/ 위 페이지 보시면 캔 모델링 하나 로드를 하고 맵핑 이미지는 세장을 로드한 뒤 클릭 시 교체해주는 방식이거든요.const textureLoader = new THREE.TextureLoader(); const texture0 = textureLoader.load("/model/can.png"); const texture1 = textureLoader.load("/model/can_smoky.png"); const texture2 = textureLoader.load("/model/can_hot.png"); const textureArr = [texture0, texture1, texture2]; //이미지 로드해서 배열에 넣음 model.traverse(function (child) { //모델링 순회하며 if (child.isMesh) { //메쉬일 경우 맵 교체 child.material = new THREE.MeshStandardMaterial({ map: textureArr[num], }); child.material.magFilter = THREE.NearestFilter; child.material.minFilter = THREE.NearestMipMapLinearFilter; } });위 처럼 한 것인데요.만약에 모델링에서 한 부분만 맵핑을 하고 싶으시면 모델러에게 모델링 될 부분의 name을 지정해달라고 하세요.아래처럼 해보면 될 것 같은데요?테스트가 필요하기는 합니다만.if (child.name == "mappingArea" ) { //맵핑 }