inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

raycaster로 intersect object 받아와서 처리하기

물질을 클릭했을 때 이벤트

해결된 질문

402

: 흥

작성한 질문수 4

0

물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.

javascript react typescript 인터랙티브-웹 three.js webgl react-three-fiber

답변 1

0

코딩의세계 한태재

안녕하세요 :흥 님. 질문주셔서 감사합니다.

 

먼저 오브젝트에 클릭이벤트를 주어 물체를 이동하시려면 아래 강의를 참고하시면 따라하실 수 있을 것 같습니다.

섹션 7. Interaction & event / raycaster - r3f interaction event 종류들 및 오브젝트 변경

 

또한 카메라의 시점을 변경하고 싶으시면 아래 강의를 참고하시면 좋을것 같습니다.

섹션 10. [프로젝트] 카메라 컨트롤 - 카메라 부드럽게 이동하기

 

그리고 물체를 한번에 순간 이동하는 것이 아니라 매 프레임마다 천천히 이동하고 싶으시면 아래 강의를 참고하셔서

useFrame안에서 조금씩 포지션을 변경하는 방법을 사용하시면 됩니다.

섹션 2. R3F 설명 - Renderer ( useFrame )

 

잘 안되시면 어떤 부분에서 막히시는지 알려주시면 같이 살펴보겠습니다! 감사합니다 :)

1

: 흥

다른 강의에 내용이 있었네요 급한나머지 너무 알고싶어서 그랬네요^^ 제가 shapespark라는 프로그램으로 작업을 하는데 알고 계시는지요??

0

코딩의세계 한태재

또 답글이 있는지 몰랐네요! 음.. shapespark라는 프로그램은 저도 경험이 없어서 잘 모르겠습니다. 잠깐 찾아보니 3D 모델을 쉽게 업로드하고 테스트해볼 수 있을것 같네요 ㅎ 감사합니다 !

13강 프로젝트 생성 Next.js 설치이슈

0

9

2

Shell Command: Install 'cursor' command 진행에서 막혔습니다

0

10

2

74. 데이터 캐시 - 1 (이론) 강의 영상 누락

0

8

0

Agent team / subagent 생성시 재사용 가능 여부

0

19

2

shirimp task manager는 프로젝트 처음 시작 단계에서도 쓴는 것 과 관련해서 질문

0

11

2

MCP 서버 내용 변경

0

16

2

설치가 완료되었다고 하는데 왜 확인이 안될까요?ㅠ

0

20

3

맥에서 git이 설치되지 않아요...

0

14

2

ll 명령어 문의

0

11

2

퀴즈 생성

0

17

2

프로젝트 하위 .claude 폴더

0

18

2

클로드코드에서 yes 를 always 로 설정하려면 어떻게 해야하죠?

0

22

2

ai 도구 질문

0

31

1

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

0

55

2

섹션 10을 들었을때 궁금증

0

87

2

material 파트까지 들은 후 생긴 궁금증

0

149

1

zoom과 fov의 차이점이 잘 이해가 안됩니다.

1

274

2

1강 관련하여 의견을 여쭙고 싶은 게 있습니다.

0

127

1

'JSX.IntrinsicElements' 유형에 'mesh' 속성이 없습니다. 경고 해결법

1

306

2

onClick 이벤트함수로 raycaster 방향이 자동으로 set되나요?

0

175

2

화면에 렌더링은 되는데 코드에서 빨간줄이 떠요

0

382

2

문제 해결했습니다.

0

179

1

문제 있어요! alias Path @ 문제

0

461

2

dom / svg / canvas

0

230

1