목록DepthTest (1)

코딩하는 고릴라

[FE] React-three/fiber 겹친 오브젝트 간 렌더링 오류 트러블 슈팅

🦍 상황- 별을 클릭하여 게시글을 등록하거나 조회해야 하는데, 별의 크기가 너무 작아 클릭이 어려웠다. - 편의성 증대를 위해 별을 둘러싸고 있는 보다 커다랗고 투명한 구를 생성하여 클릭 시 편의성을 향상시켰다. - 이 때, 별과 별 사이를 잇는 별자리 선이 끝까지 이어지지 못하고 끊어져 보이는 렌더링 문제가 발생하였다.🐈 문제 원인 파악 및 해결 - 문제의 원인은 별을 잇는 선분과 별 주위 구체가 겹쳤기 때문이었다. 각 오브젝트들이 차지하는 공간은 다음과 같다. - 별을 잇는 선분과 클릭 편의성을 위해 만든 구체가 차지하는 공간이 겹쳐 일부는 제대로 보이고, 일부는 그렇지 않은 오류가 발생했다. - Material의 속성 중 depthTest라는 속성을 이용해 문제를 해결하였다. - depthTest ..
Project/별일 2024. 3. 5. 01:45
이전 Prev 1 Next 다음