wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • 디자인 패턴
  • 원형적인 움직임
  • joi 에러
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • 오프-프레미스(off-premise) 방식
  • 함수의 범위
  • axeshelper
  • 함수 선언문
  • 삼각함수
  • three.js 구성 요소
  • getdelta()
  • math.sin()
  • math.cos()
  • isabstract
  • react 성능 최적화
  • API
  • 스코프
  • reactive variables
  • 렌더링 성능 최적화
  • type-graphql
  • 함수 표현식
  • 초기 환경설정
  • getelapsedtime()
  • e.preventdefault()
  • gridhelper
  • Decorators
  • 함수 리터럴
  • Interface
  • mapped types
  • 데이터 포맷

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

Raycaster, 동작 원리
Frontend/Three.js

Raycaster, 동작 원리

2024. 11. 12. 21:03

 

Raycaster의 동작 원리

 

주로 3D 그래픽이나 게임 개발에서 특정 방향으로 가상의 광선을 쏘아 물체와의 충돌 여부를 계산하는 방식으로 사용된다.

 

 

  • Ray(광선)는 x-ray 할 때 그 ray이다.
  • 광선은 Mesh를 관통한다.
  • 이러한 특징을 이용해 광선을 이용해 클릭된 Mesh를 감지할 수 있다.
  • Ray를 Casting 한다 해서 Raycaster라고 부른다.

 

 

  1. 광선 생성
    • 특정 위치(일반적으로 카메라의 위치)에서 특정 방향으로 가상의 광선을 쏜다.
    • 이 광선은 직선 경로로 설정된다.


  2. 교차 검사
    • 광선이 가는 경로 상에 있는 3D 객체들과 교차하는지를 확인한다.
    • 여기서 교차 여부를 계산하기 위해 수학적인 교차 알고리즘이 사용된다.


  3. 충돌 객체 찾기
    • 광선이 여러 개의 객체와 충돌하는 경우 가장 가까운 객체를 찾거나, 특정 조건에 맞는 객체만을 필터링할 수 있다.
    • 이를 통해 화면에 렌더링할 대상이나 상호작용할 대상을 식별한다.


  4. 결과 반환
    • 충돌이 발생한 객체의 정보, 충돌 지점, 거리 등을 반환한다.


이 방식은 특히 시야 내에 있는 특정 객체를 선택하거나 클릭할 때, 혹은 캐릭터가 충돌 감지와 같은 물리적 상호작용을 할 때 유용하게 쓰인다.

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Three.js' 카테고리의 다른 글

Raycaster, 클릭한 Mesh 감지하기  (0) 2024.11.14
Raycaster, 특정 방향의 광선(Ray)에 맞은 Mesh 판별하기  (0) 2024.11.12
조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과  (0) 2024.11.11
조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과  (0) 2024.11.11
조명, SpotLight_스포트라이트 효과_무대 조명이나 손전등과 같은 빛을 표현  (0) 2024.11.10
    'Frontend/Three.js' 카테고리의 다른 글
    • Raycaster, 클릭한 Mesh 감지하기
    • Raycaster, 특정 방향의 광선(Ray)에 맞은 Mesh 판별하기
    • 조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과
    • 조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과
    wam
    wam

    티스토리툴바