3D 그래픽스 애플리케이션을 개발하다 보면, 사용자가 클릭한 지점에서 가장 가까운 기하학적 요소를 찾아야 하는 상황이 자주 발생한다. 벡터의 투영(Vector Projection) 개념을 활용하면 쉽게 해결할 수 있다.

이번 글에서는 React Three Fiber 환경에서 실제 구현한 코드를 통해 벡터 수학이 어떻게 실용적으로 활용되는지 살펴보자.

1. 문제 정의

사용자가 3D 공간의 임의의 지점을 클릭했을 때, 기존에 연결된 여러 점들로 이루어진 선분들 중에서 가장 가까운 선분을 찾아 그 사이에 새로운 점을 삽입해야 한다.

2. 벡터 투영의 핵심 아이디어

2-1) 문제를 벡터로 표현하기

임의의 선분 AB와 클릭 지점 P가 있을 때:

*// 벡터 정의*
const segmentVector = B.clone().sub(A);  *// AB 벡터 (선분의 방향과 길이)*
const clickVector = P.clone().sub(A);    *// AP 벡터 (A에서 클릭 지점까지)*

2-2) 투영점 찾기

클릭 지점 P에서 선분 AB에 수직으로 내린 발(투영점)을 구해야한다. 이때 벡터의 내적(Dot Product)을 활용한다.

const t = clickVector.dot(segmentVector) / segmentVector.lengthSq();

이 공식이 왜 성립하는지 벡터 수학적으로 살펴보자.

3. 벡터 내적과 투영의 수학적 원리

3-1) 기본 개념

• |clickVector|: 벡터 AB의 길이