인프런 커뮤니티 질문&답변
작성한 질문수
onClick 이벤트함수로 raycaster 방향이 자동으로 set되나요?
해결된 질문
작성
·
97
·
수정됨
0
const shoesClick = () => {
const intersects = raycaster.intersectObjects(
gltf.scene.children,
true
);
};강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?
답변 2
0
안녕하세요. grs0412님
코딩의세계 한태재입니다.
인프런 AI 인턴이 답변했듯이 r3f에서 useThree로 가져온 raycaster는 자동으로 현재 마우스 포인트를 감지하도록 설정되어있습니다. raycaster는를 useThree에서 불러오게되면 현재 마우스포인트와 카메라를 설정할 수 있는 setFromCamera가 이미 설정되어 있습니다.
raycaster.setFromCamera( 현재마우스포인트, 현재카메라 )
https://threejs.org/docs/#api/en/core/Raycaster.setFromCamera
( R3F가 아니라 three.js만 사용하시면 아래 url의 예시처럼 직접 setFromCamera를 호출하셔야합니다. https://threejs.org/docs/#api/en/core/Raycaster )
그리고 특정 포인트에 대한 raycast를 하고 싶거나, 다른 카메라 뷰에 대한 raycast를 하고싶으면
아래처럼 intersectObject를 호출하기전에 설정을 변경할 수 도 있습니다.
const crntPointer = new THREE.Vector2(point.x, point.y);
raycaster.setFromCamera(crntPointer, camera);
const intersects = raycaster.intersectObjects(gltf.scene.children);
요약하자면 현재 마우스포인트와, 현재 카메라를 사용해서 raycaster를 사용한다면
setFromCamera를 따로 설정하지 않고 바로 intersectObject를 사용하셔됩니다.
다른 질문 있으시면 편하게 남겨주세요. 감사합니다 !
0
안녕하세요, 인프런 AI 인턴입니다. grs0412님.
React Three Fiber 강의에서 raycaster를 사용하여 클릭 이벤트를 처리하는 방법에 대해 질문 주셨습니다. raycaster.intersectObjects 메서드는 특정 3D 오브젝트들과의 교차를 감지하는 기능을 제공합니다. 강의에서 사용된 예제처럼 gltf.scene.children을 넘겨주면 장면 내 모든 자식 오브젝트에 대한 교차 감지를 수행합니다.
raycaster의 방향 설정
raycaster는 기본적으로 camera와 mouse position을 기반으로 방향이 설정됩니다. 클릭 이벤트 시 마우스의 위치에 따라 raycaster의 방향이 조정되어 교차점을 찾습니다. 이때 별도로 클릭 이벤트 object를 넘기지 않아도 내부적으로 Raycaster는 현재의 마우스 위치를 사용하여 ray의 방향을 설정합니다.
참고할 만한 자료
- 인터랙티브 이벤트 설정하기: 강의 내에서 이벤트를 활용해 오브젝트와 상호작용하는 방법을 설명합니다.
- raycaster와 마우스 이벤트 처리: 모던 브라우저에서 마우스 이벤트를 사용하여 raycasting을 수행하는 방식에 대해 설명합니다.
간단히 요약하자면, raycaster는 클릭한 시점에서의 마우스 위치와 카메라를 기준으로 방향을 설정하여 교차 검사를 수행합니다. 따라서 클릭 이벤트 객체를 넘겨줄 필요는 없습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.