1. 문제 정의와 요구사항

사용자가 3D 치아 모델(stl)에 마우스로 점을 찍으면 해당 점들끼리 이어지는 선을 만들어어야한다.

해당 선은 “마진라인”이라 불리는 선으로 보철물이 치아에 부착되는 곳이기 때문에 찍은 점을 직선이나 곡선으로 그냥 이어주면 안되고 표면을 따라 정교하게 만들어져야하는 상황이다.

1-1) 마진라인이란?

마진라인은 치과 보철물(크라운, 브릿지 등)이 자연치아와 만나는 경계선이다. 이 선의 정확도는 보철물의 적합도에 직접적인 영향을 미치기 때문에 다음과 같은 요구사항이 있다.

• 표면 밀착: 선이 3D 모델 표면에서 뜨거나 내부로 침투하면 안 됨
• 부드러운 곡선: 치아의 자연스러운 곡면을 따라 매끄럽게 연결
• 정밀도: 보철물 제작을 위한 정확한 좌표 정보 제공

2. mesh 표면에 점을 생성하고 연결하기

먼저 사용자가 3D 모델을 클릭했을 때 해당 위치에 점을 생성한다.

const handleMeshClick = (event: ThreeEvent<PointerEvent>) => {
  // Raycaster를 통해 클릭 위치의 표면 교차점 획득
  const intersectionPoint = event.point;
  
  // 점 추가
  setPoints(prev => [...prev, intersectionPoint]);
};

points라는 배열 state를 만들고 클릭한 좌표를 points에 추가해서 업데이트 한다.

하지만 단순히 mesh를 클릭하는 것에만 끝나면 안된다. 문제가 생겼는데 점은 잘 클릭 되지만 mesh의 내면까지 클릭되는 문제가 생겼다. mesh의 외면이 아닌 내면까지 클릭할 수 있도록 자유도를 줘버리면 UX는 현저하게 떨어진다. 그래서 클릭한 mesh의 내면과 외면을 구분할 수 있는 코드도 추가해주어야한다.