Three.js로 웹부터 게임까지
피키위키 캔김치를 위한 노오력
웹에서 돌아가는 3D에 관심이 많다.
평면적인 웹페이지들이 대부분인데, 입체적이면 아무래도 눈이 더 가기 마련이니.
나도 그런 것에 혹하는 1인이라 뭘 만들 때도 Three.js를 많이 사용하는 편이다.
(입체적으로 막 돌아가면 기분이 조크든요)
최근에 Three.js 를 이용해서 만든 페이지 두 개 소개한다.
피키위키 캔김치 브랜드 사이트
언젠간 어딘가에는 쓰겠지 싶어서 캔김치 3D 모델링을 미리 만들어뒀었다.
게임 회사 다니는 친구에게 참치회 사주기로 하고 부탁... 을 하고 아직 못 사줬네 (TMI)
그 모델링을 피키위키 웹 페이지를 만들 때 사용한 것.
피키위키 캔김치의 디자인이 워낙 예쁘기도 하고,
비율도 귀여워서 사진만으로는 표현이 잘 안 되었다.
(사진으로 표현이 된다고 해도 3D를 사용했겠지만 ㅋ)
모델링 맵핑 소스실제 캔을 찍을 때 사용했던 ai 소스를 받아서 맵핑 소스로 만들었다.
CMYK 대용량 ai 디자인 파일이 있어서 아주 선명한 3D 모델이 나와줬다.
초초선명 깔끔. 라이팅에도 신경을 좀 써줬다.
김치캔 하나에 86KB !김치캔 모델링 하나에 맵핑 소스 세 가지 (오리지날, 매운맛, 훈제맛) 맵핑 소스를 사용하여
클릭 시 이미지 맵만 교체 되도록 처리.
실제 페이지는 위에서 볼 수 있다.
내용이 많지 않은 페이지라 원 페이지로 구성했다.
실제 캔김치 구매는 네이버 스마트 스토어에서 가능.
피키위키 김치 뉴타운 게임
레트로 갬성을 자극하는 초간단 게임을 하나 만들었다.
좌, 우 버튼만 누르면 되니 남녀노소 누구나 즐길 수 있음!
과거 피처폰 시절 유명했던 니편내편 스타일. 이미 하나의 장르가 되어버린!
게임은 이벤트로 활용을 할 수도 있고, 브랜드 홍보를 위해 쓰일 수도 있겠다.
지금은 구매 링크 배너만 넣어놓은 상태.
초기 프로토타입과 최종 결과물굉장히 2D 스러운 게임인데 Three.js를 사용했다.
바닥과 벽만 네모네모로 만들어서 맵핑한 게 전부고 아이템들은 이미지다.
카메라 무빙은 없지만 사실 다른 3D 작업을 할 때와 똑같다.
카메라가 설치되어 있고, 나름 조명도 몇 개나 설치되어 있음!
게임 아이템들은 아이패드에서 그렸다. 도트 스타일로.
양배추가 제일 귀엽. (치즈도 있다)
유튜버 영국남자가 피키위키 김치와 치즈를 이용한 김치 토스트를
영국에서 판매해서 기사까지 나왔던 적이 있어서
처음에는 게임 이름을 '졸리 토스트 스토어'로 할까 했었는데...
최종적으로 '김치 뉴타운'으로 결정!
레트로 갬성을 잘 살린 이름 같아서 만족스럽다.
내가 개발을 했지만 난 50만점대가 최고점.
현재 1위는 340만점...
도대체 어떻게 그 점수가 나오는거지?
게임은 위 링크에서 해보실 수 있음!
PWA를 적용해 놓아서 스마트폰이나 PC 배경화면에 아이콘 설치도 가능함.
많은 분들이 "피키 위키 김치는 어디서 구매가 가능한가요?"
...라고 물어보실 것 같아서 링크를 남김
