react 2

별 헤는 밤 BHNB - 유성

https://bhnb.havana.moe/ BHNB bhnb.havana.moe 지난번 개발했던 별 헤는 밤에 랜덤하게 유성이 떨어지는 기능을 추가로 구현하였습니다. 개발 과정은 아래와 같습니다. 개발 과정 유성을 그리기 위해서는 무엇을 해야 할까요? 우선 유성이 어떻게 떨어지는지를 생각해봐야 합니다. 실제로 밤하늘의 유성을 보신 분들이 얼마나 있을지 모르겠지만, 직접 본 것이 아니더라도 미디어 등에서 한 번쯤은 봤을 것이라고 생각합니다. 유성은 밤하늘에 하얀 선이 그려졌다가 서서히 사라지는 방식으로 우리 눈에 보입니다. 아래는 그러한 유성을 three.js로 유사하게 구현하기 위한 과정입니다. 선 그리기 앞서 말했듯이 유성은 밤하늘에 하얀 선이 그려진다고도 생각할 수 있습니다. 실제로 밤하늘 사진을 ..

별 헤는 밤 BHNB 알파 버전 개발 후기

https://bhnb.havana.moe/ BHNB bhnb.havana.moe 별 헤는 밤(BHNB)을 WebGL을 사용해 개발해보았습니다. 별 헤는 밤은 천문 동아리 선배인 PngWnA 선배가 처음 개발한 프로젝트로, 웹 브라우저로 현재 접속 중인 위치에서의 밤하늘이 어떻게 보이는지 구현한 플라네타리움입니다. 해당 프로젝트를 나중에 또 다른 천문 동아리 선배인 susemeee 선배가 React로 포팅한 버전인 BHNB-react가 있고, 이를 다시 한 번 WebGL로 구현한 것이 이번 프로젝트입니다. 기술 스택 사용된 기술 스택은 다음과 같습니다. Next.js, React TypeScript three.js, react-three-fiber, react-three/drei Github Action..