코딩하는 고릴라

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

🦍 상황- React-three/fiber를 활용하여 별이 떠있는 밤하늘을 3D로 구현해야했다. - 별들의 x, y, z 좌표를 계산해 하늘에 띄워야 했고, 별들을 잇는 선분들의 좌표 또한 필요로 했다.🐈 로직1. 별 띄우기1. 별자리 이미지를 구해온다 (스텔라리움) 2. 블렌더에서 해당 별자리 이미지를 배경으로 설정하고 별들이 위치한 곳에 구체(Sphere)를 위치시켜 X, Z 좌표를 구한다.3. 별들의 높이(Y 좌표)는 피타고라스 정리를 통하여 구한다. 4. 모든 별들의 X, Y, Z 좌표를 하드코딩하여 배열로 저장# data.js // position : 별 [x, y, z] export const position = [ // 0 URSA MINOR 작은곰자리 [ [0, 35, 0], [-1.8, ..

🦍 상황 - Three.js(React-three/fiber)를 활용한 프로젝트 진행 중, 특정 별자리내 모든 별의 불을 밝히면 해당 별자리를 선명하게 표현해야 하는 기능을 구현했어야 했음 🐌 로직 1. 별자리 형성 여부 체크 - 모든 별들의 등록 상태를 담고 있는 누적합 세그먼트 트리 생성 - 등록된 별의 경우 point update를 이용해 해당 별의 정보를 담고 있는 리프노드의 값을 1로 설정 - 별자리 형성을 체크할 때는 range query를 활용해 해당 별자리 내 별의 개수와 등록된 별 개수를 비교, 일치할 때 별자리 형성 2. 별자리 형성 여부에 따른 props 전달 및 react-three/fiber 오브젝트 속성 제어 - GroupStar 컴포넌트 레벨에서 해당 별자리의 생성 여부를 체크..

🍕 문제 상황 검은색 커다란 구를 생성한 후, 검은색 구 내부에 초록색 구, 노란색 구 등을 배치시켰다. 의도는 해당 초록, 노란 구들의 배경이 검은색으로 깔리는 것이였는데 외부에서는 검은색 구가 정상적으로 출력되나 검은색 구 내부에서는 검은 면이 출력되지 않았다. 🍔 문제 해결 렌더링 대상이 되는 오브젝트의 material 속성에는 오브젝트의 내부, 외부, 양면 모두 렌더링 옵션을 선택할 수 있는 속성이 존재했고, 따로 지정해주지 않으면 외부만 렌더링 하는 것이 기본값이다. 따라서 이 옵션을 내부 렌더링으로 바꿔 검은색 구 내부에서 검은 배경을 깔 수 있게 되었다. function Sphere({ position, size, color, type }) { const mesh = useRef(null);..