Three.js를 활용한 3D 웹사이트 제작하기, Webgl

이불을 걷어차고 PC를 켰다.

안녕하세요. 맥가입니다. 위 글은  2008년 블로그에 작성했던 글입니다. 2003년부터 취미로 3Ds max를 공부했고 가끔 실무에서 디자인 요소에 3D를 활용하기도 했습니다. 저 글을 쓴 날은 아마도 웹디자이너인 제가 사무실에서 3D를 붙잡고 있자. 그 꼴이 마음에 안 들었던 사장님의 볼멘소리를 듣고 작성했던 글로 기억합니다.

해당 글을 쓰고나서 약 한 달 가까이를 웹에 3D를 적용해 보고자 자료를 찾았고, 결국 그해 가장 뜨거웠던 Unity를 활용한 웹 플레이어가 있다는 사실을 알고 실무에 적용했었습니다. 모델하우스 사이트의 ISO(아이소: 쿼터뷰 방식의 투시도)에 말이죠. 그 후론 삼실에서 3D를 하고 있어도 사장님이 뭐라 투덜대지 않았습니다.

암튼. 그렇게 시간이 흘렀고 며칠전 블로그 글을 정리하다 위의 내용을 읽고 이불킥하며 PC를 켰습니다. 최근 웹 3D는 어느 수준인지 궁금했거든요. 어차피 지난번 로티 적용 건도 정리되었고 마구마구 찾아봤습니다. 3일 정도 찾아보면서 알게 된 것들 그리고 작업한 것을 살짝 올려봅니다. 오늘은 그저 간단한 소개글입니다. 요이땅.

자바스크립트 기반의 3D 라이브러리 three.js

three.js – JavaScript 3D library

3D를 웹페이지에 구현하는데 있어 가장 유명하고 많이 쓰이는 three.js입니다. 이름에도 나와있듯 three.js는 자바스크립트 기반의 3D 라이브러리입니다. 꽤 오래전부터 있던 것으로 확인했고 그간 많이 업데이트를 거쳐 r115까지 나와있습니다. 지난번 로티와 마찬가지로 국내 관련 자료는 많지 않으며 설령 있다 해도 버전이 맞지 않거나 프론트엔드 개발자분들께서 작성하신듯합니다. 하여 또 두드러기 돋는 영어를 엄청 봐야 했습니다.

https://hinderer-wolff.fr/cepages-alsace

https://renaultespace.littleworkshop.fr/

위와 같은 다양한 형태의 3D사이트를 제작할 수 있습니다. three공식 페이지 메인에서 소개하고 있으니 한 번씩 확인해보세요. 정말 엄청난 것들이 많습니다. (위 이미지를 각각 클릭하면 해당 페이지로 이동합니다.)

3D를 공부해보셨다면 위 사진같은 프로그램이 익숙하실 텐데요. three는 위와 같은 에디터와 뷰어 등도 제공해줍니다. 웹에서 바로 실행되기도 하고, PC에 설치해서 사용할 수도 있습니다.

일주일 동한 작업한 테스트페이지(이미지 클릭하면 실페이지로 이동합니다.) 

three로 며칠간 공부하며 위 페이지를 만들어봤습니다. 아직 처음이라 최적화가 덜 되어있고, 반응형 작업도 하지 않았으니 PC에서만 봐주세요. 그저 브라우저에 3D를 잘 띄우는 것만 중점적으로 봤거든요. 초기 로딩에 조금 시간이 걸리니 살짝 기다려주시길 부탁드립니다. 

웹 3D 구현에 관심있으신 분들과 함께 공부하며 의견 나눠보고 싶습니다. 오늘도 읽어주셔서 감사드리며 이번 한 주도 모두 고생하셨습니다!