블렌더로 3D 로고 만들기 요즘 Three.js를 공부 중이라 인터넷에서 3D 모델을 구해 여러 기능을 실험하다보니 자연스럽게 3D 모델링에 관심이 가기 시작했다. 직접 만들어보면 재밌을 것 같기도 하고 내 로고를 3D로 만들어두면 두고두고 쓸 데가 많지 않을까 해서 3D로 로고를 제작해보기로 했다. 사용할 툴로 블렌더를 선택한 이유는 일단 무료라는 점, 그리고 프로그램이 가볍다는 점 때문이다. 하다가 막히면 강의를 찾아봐야겠다는 생각으로 무작정 시작했는데 간단한 것을 만드는거라 크게 어려움을 느낀 부분은 없어서 강의까지 찾아 볼 필요는 없었다. Three.js를 공부하다 왔더니 낯이 익은 단어와 기능들도 조금씩 있어서 약간은 도움이 되었던 것 같다. 참고로 이 글을 작성하기 전에 Three.js도 공부한 내용을 게시하려 했었는데 작성 마무리 단계에서 글을 날려먹는 바람에 아마 나중에 다시 작성해서 업로드하게 될 것 같다. 제작 과정 1. 기
https://codepen.io/RAREBEEF/pen/eYGKZKL JS와 CSS를 사용하여 기존에 만들던 것과는 다른 무언가를 만들어보고 싶었다. 3d로 무언가를 구현해보면 좋겠다는 생각이 들었는데, 처음엔 구체를 만들어볼까 했으나 표면이 꽉 채워진 구체는 현실적으로 구현하기가 어려울 것 같아서 무난하고 전체적으로 균형잡힌 정육면체를 제작해보기 했다. 1. 정육면체 구현 !codepen[RAREBEEF/embed/yLzEOaz?default-tab=html%2Cresult] 정육면체의 구현은 HTML 그리고 CSS 만으로 가능하다. HTML 축과 컨테이너 역할을 할 요소를 만들고 자식으로 정육면체의 각 면이 될 요소 6개를 생성한다. CSS 축과 컨테이너 역할을 할 요소에 transform-style: preserve-3d; 를 부여하여 3d 공간에 위치시킨다. 자식으로 들어있는 각 면들은 하나씩 차근차근 translateX, `trans