퓨전360을 이용한 3D 뷰어 제작

Sep 27, 2023

Contents

퓨전 360을 이용한 3D 뷰어 만들기 목표 3D 뷰어 사용의 장점 퓨전 360을 이용한 3D 뷰어 제작 절차 3D 뷰어 제작 모델 준비하기 모델 공유를 위한 html 코드 제공 받기 html 코드를 이용해 3D 뷰어 페이지 만들기

퓨전 360을 이용한 3D 뷰어 만들기

목표

퓨전 360에서 제공하는 모델 공유 기능을 통해, html 파일을 만들어서 웹페이지 형식으로 접근 가능한 3D 뷰어를 만듭니다.

3D 뷰어 사용의 장점

3D 뷰어를 이용하면 클라이언트에게 이미지 만으로 디자인을 전달할 때보다 모델을 상세하게 보여줄 수 있습니다. 그래서 저는 모델의 세부적인 구조를 보여줘야 하는 상황처럼 필요에 따라 3D 뷰어를 제작해 미팅에 사용하곤 합니다.

퓨전 360을 이용한 3D 뷰어 제작 절차

퓨전 360을 이용하면 일반적으로 3D 컨피규레이터(configurator)라고도 부르는 3D 뷰어를 빠르고 간단하게 구현할 수 있습니다. 이 글에서 퓨전 360을 이용한 3D 뷰어 제작 방법을 공유하도록 하겠습니다.간단한 절차만 따르면 곧바로 활용할 수 있는 3D 뷰어가 탄생하니 차근차근 따라 해보면 좋을 것 같습니다. 절차는 크게 다음의 단계를 따릅니다.

모델 준비하기

모델 공유를 위한 html 코드 제공 받기

html 코드를 이용해 3D 뷰어 페이지 만들기

3D 뷰어 제작

모델 준비하기

퓨전 360을 이용해 3D 뷰어를 제작하려면 먼저 퓨전 360 모델 파일을 가지고 있어야 합니다. 처음부터 퓨전 360을 이용해 모델링을 진행했다면 바로 다음 단계로 넘어가면 됩니다. 만약 라이노 등 타 프로그램에서 모델링을 진행했다면 퓨전 360으로 모델링 파일을 이전하도록 합니다. 여기서는 라이노에서 퓨전 360으로 모델을 가져오는 방법만 간단하게 알려드리도록 하겠습니다.

라이노에서 퓨전 360으로 파일을 옮길 때 기본적으로 STEP 확장자를 이용해 export하면 문제 없이 파일을 내보내고 퓨전 360으로 가져올 수 있습니다. 주의해야 할 점은 라이노 파일을 통째로 내보내기 하면 모델의 그룹 관리가 불가능해집니다. 예를 들어 3D 뷰어 상에서 분해 조립 애니메이션을 보여줘야 하는 경우 모델이 부품 별 Component가 아닌 Bdoy로 이루어져 있어 일일이 Component로 만들어줘야 합니다.

그래서 추천하는 방법은 ‘export selected’ 명령어를 통해 각 부품 별로 따로 선택해 내보내기 하여 모델을 마련한 뒤 모든 부품을 업로드해 조합하는 방식입니다. 이 방식으로 파일을 만들면 부품 별로 component가 생성되므로 모델 관리가 쉬워집니다.

모델 공유를 위한 html 코드 제공 받기

모델이 준비 되었다면 해당 모델을 퓨전 360의 공유 기능을 통해 3D 뷰어로 만들 수 있습니다. 퓨전 360 상단 ‘File’ 탭에서 ‘View Details on Web’을 클릭하면 프로젝트의 정보를 확인할 수 있는 웹페이지가 열립니다.

우측 상단에 보이는 공유 버튼을 클릭하면 다른 사람들에게 프로젝트를 열람할 수 있도록 하는 옵션들이 팝업 창에 나타납니다.

팝업 창에서 ‘포함’ 탭을 누르면 <iframe>이라는 태그로 묶인 html 코드를 볼 수 있습니다. 코드의 내용이 무엇을 의미하는지는 몰라도 3D 뷰어를 제작하는 데는 문제가 없습니다. 우리는 이렇게 제공 받은 코드 전체를 복사해서 사용하기만 하면 됩니다.

html 코드를 이용해 3D 뷰어 페이지 만들기

이제 이 코드를 이용해 웹 페이지 형식으로 접근할 수 있는 html 파일을 만들어야 합니다. html 파일을 만드는 가장 단순한 방법은 메모장 프로그램을 실행하고 복사한 코드를 붙여 넣기 한 뒤 파일을 저장할 때 확장자를 html로 바꿔주는 방법입니다. 파일 이름 뒤에 .html을 덧붙이기만 하면 html 파일 형식으로 변환됩니다.