책 표지 이미지를 넣으면 3D 모양의 책으로 보여주는 웹사이트를 만들었습니다.
기존에도 존재하는 사이트가 몇몇 있었지만 제가 원하는 방식으로 된 곳은 찾기 힘들더군요.
다 외국 사이트이기도 하고, 이번에 react도 배울겸 직접 웹사이트를 하나 제작했습니다.
https://startover01.mycafe24.com/book/
책 표지 인쇄할 때 쓴 이미지를 그대로 넣으면
착착 접어서 3D로 보여주는 겁니다.
책 사이즈를 고를 수도 있고, 마우스나 터치로 자유롭게 확대/축소, 회전이 가능하게끔 만들었습니다.
기본 제공되는 사이즈에서 변형을 줄 수도 있고, 책의 두께를 mm단위로 조절할 수 있습니다.
이미지를 다운로드 하면 png로 뽑을수도 있고요.
카메라 화각을 조절해서 이렇게 감각적인 모습으로도 만들 수 있습니다.
처음에는 유니티라는 게임 엔진에 넣어서 텍스쳐로 씌울까 생각도 했는데 매번 그러기엔 좀 번거로웠고요,
블렌더나 스케치업 같은 3D 전용 프로그램을 써서 만들자니 이것도 너무 불편했습니다.
그래서 사용하기 편하게 웹사이트로 만들어서, 이미지 한장만 올리면 알아서 책 모양대로 덮어 써지는걸 만들게 되었네요. 어차피 책 모양은 거의 다 사각형이고 사이즈랑 제본 방법 정도만 달라질테니까요.
지금은 제일 흔하게 볼 수 있는 무선제본 방식의 책 모양만 구현해 놨는데,
나중에 양장본, 링제본같은것도 모델링 해서 구현해 놓으면
다양한 책의 모양을 미리보기 할수 있을것 같습니다.