inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Three.js 3D 인터랙티브 바로 시작하기

mouse 위치값으로 3D 제어

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

95

수연

작성한 질문수 1

0

애초에 캔버스 크기를

let WIDTH = 400; 
let HEIGHT = 400;

이렇게 설정하고

 

마우스이벤트를

const onDocumentMouseMove = (event) => {
  if (0 < event.clientX && WIDTH > event.clientX) {
    mouseX = event.clientX - windowHalfX;
  }
  if (0 < event.clientY && HEIGHT > event.clientY) {
    mouseY = event.clientY - windowHalfY;
  }

};

이렇게 설정해서 작동은 됩니다만
혹시 다른 간단한 방법이 있을까요?

 

캔버스 크기를 설정하면

WIDTH, HEIGHT를 넘어가도 이벤트가 실행이 되어서요

인터랙티브-웹 three.js

답변 1

1

코딩일레븐

안녕하세요

  1. canvas 에 mouseMove 이벤트를 걸어보세요. document 에 이벤트가 걸려있어서 html 전체에서 이벤트가 작동을 하고 있거든요.

  2. 어떤 '간단한 방법'을 질문하시는 건지 잘 모르겠어요. 원하는 동작을 다시 한 번 질문해주세요~

0

수연

해결했습니다! 감삼당!

imagesLoaded에 관한 질문

0

12

2

ai 도구 질문

0

30

1

box3.position.x 위치

0

37

1

'스크롤/텍스트 애니메이션 제작_2' 강의 문의

0

36

1

오브젝트에의 이벤트 감지 vs 레이캐스팅

0

55

2

mouse position interpolation과 transition linear interpolation의 차이

0

74

1

단위 벡터에 거리를 다시 곱하는 부분 질문 있습니다.

0

46

1

맥북 듀얼모니터 사용 displaylink manager 사용시 화면이 안보입니다.

0

75

1

이미지 배경 문의

0

67

1

transform-style: preserve-3d; 를 추가하면

0

47

1

프로젝트 완성본 보내주실수 있나요?

0

50

1

섹션04 Layout에서 Mixed Layout파트의 실습 index.html파일 열었을때 선생님께서 보여주시는 가로스크롤이 안나타남.

0

85

3

섹션 10을 들었을때 궁금증

0

87

2

리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?

0

80

1

잘 안되네요

0

54

2

버전에 대해서....

0

62

1

이미지가 안나옵니다.

0

72

2

hover pulse animation 관련해서 질문있습니다!

0

64

2

수업을 들으면서...

0

44

1

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

0

110

1

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

0

123

2

TextureLoader관련 질문 드립니다.

0

435

1

이미지 클릭 시 페이지 이동

0

629

1

3d 모델링에 애니메이션을 여러개 넣으려면 어떻게 해요?

0

705

1