[Three.js] 돌 날아가유 게임

프로젝트 소개

GitHub URL(상세 내용 확인 가능)

https://github.com/chdev-kr/2025-project-rolling-stone
배포 주소

https://chdev-kr.github.io/2025-project-rolling-stone/

구현 화면 및 기능

메인 화면

%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2025-09-21_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_3.01.16.gif

프로젝트명- 돌 날아가유

Three.js를 활용하여 제작한 3D 웹 게임으로, 날아오는 바위를 클릭해 파괴하며 점수를 획득하는 방식의 캐주얼 게임입니다. 끊임없이 생성되는 바위를 처치하면서 높은 점수를 노리는 간단하지만 몰입감 있는 플레이를 제공합니다. 충청도의 ‘둘 굴러가유’라는 문장에서 아이디어를 얻어 ‘돌 날아가유’를 제작했습니다.

사용 기술 및 기술 스택

Three.js: 3D 그래픽 렌더링
GLTFLoader: GLB 형식 3D 모델 로딩
Raycaster: 마우스 클릭 감지 및 객체 상호작용
ES6 Modules: 모던 JavaScript 모듈 시스템
HTML5 Canvas: 3D 렌더링 캔버스

주요 특징

3D 환경: Three.js 기반의 몰입감 있는 게임 배경
실시간 바위 생성: 무작위 위치에서 바위가 지속적으로 생성
클릭 액션: 마우스로 바위를 클릭해 파괴
점수 시스템: 바위 파괴 시 점수 증가
시각적 피드백: 클릭 시 바위 색상 변경 후 제거
커스텀 커서: 저격용 십자선 커서 제공

개발 배경

이 프로젝트는 Three.js 학습과 3D 웹 게임 제작 경험을 쌓기 위해 진행되었습니다.

단순히 그래픽을 띄우는 데 그치지 않고, 실시간 상호작용·점수 시스템·반응형 UI를 포함하여 실제 게임에 가까운 구조를 구현하고자 했습니다.

이를 통해 3D 렌더링, 모델 로딩, 이벤트 감지 등 웹 환경에서의 다양한 기술적 경험을 축적할 수 있었습니다.

프로젝트명- 돌 날아가유

주요 특징

3D 환경: Three.js 기반의 몰입감 있는 게임 배경

실시간 바위 생성: 무작위 위치에서 바위가 지속적으로 생성

클릭 액션: 마우스로 바위를 클릭해 파괴

점수 시스템: 바위 파괴 시 점수 증가

시각적 피드백: 클릭 시 바위 색상 변경 후 제거

커스텀 커서: 저격용 십자선 커서 제공

개발 배경

이 프로젝트는 Three.js 학습과 3D 웹 게임 제작 경험을 쌓기 위해 진행되었습니다.

단순히 그래픽을 띄우는 데 그치지 않고, 실시간 상호작용·점수 시스템·반응형 UI를 포함하여 실제 게임에 가까운 구조를 구현하고자 했습니다.

이를 통해 3D 렌더링, 모델 로딩, 이벤트 감지 등 웹 환경에서의 다양한 기술적 경험을 축적할 수 있었습니다.