Matterport 3D 모델 삽입하기

 

Matterport 3D 모델 링크를 공유하고 링크를 사용자 지정하는 방법도 있지만 모델을 웹사이트에 직접 삽입할 수도 있습니다.

삽입 방식을 선택하면 Matterport 모델이 YouTube 동영상처럼 웹페이지 중앙에 나타납니다. 예를 들어 다음과 같습니다.

삽입 방법

  1. 모델을 공개로 설정합니다.
  2. 모델을 추가할 웹페이지를 확인합니다.
  3. 웹페이지에 다음 HTML 소스 코드를 추가합니다.
    • <iframe width="853" height="480" src="https://my.matterport.com/show/?m=xxxxxxxxxxx" frameborder="0" allowfullscreen allow="xr-spatial-tracking"></iframe>
    • 정확한 명령어는 웹사이트의 고유 코드에 따라 다릅니다.
  4. src 속성의 URL을 바꿉니다.
  5. 삽입 시 iframe 코드에 "allowfullscreen"을 포함합니다.

타사 CMS(Wordpress, Drupal, Wix, Zendesk, Medium) 사용하기 

타사 콘텐츠 관리 시스템으로 웹사이트를 관리하는 경우 해당 페이지의 HTML 소스 코드를 열고 다음 방법을 따라야 합니다.

  1. CMS 백엔드에 로그인합니다.
  2. 편집할 게시물/페이지/문서를 찾습니다.
  3. CMS 뷰로 소스 코드를 확인합니다.
    • 일반적으로 CMS에서 </> 버튼을 클릭하면 됩니다(아래 예 참조).zendesk-open-source-code.png
    • 코드를 탐색하고 <iframe>을 붙여넣을 정확한 위치를 판별하려면 HTML에 대한 어느 정도의 기본 지식이 필요합니다.
    • 특정 CMS(예: Matterport가 사용하는 Zendesk)의 경우 iframe이 올바르게 실행되려면 "안전하지 않은 HTML 허용(Allow unsafe HTML)"을 선택해야 할 수도 있습니다.

Wordpress CMS 

Wordpress.com은 iframe을 허용하지 않으므로 Wordpress 게시물에는 Matterport 3D 모델을 삽입할 수 없습니다. 그러나 Wordpress CMS를 사용하는 웹사이트는 iframe을 허용하므로 원하는 페이지에 직접 iframe 코드를 붙여넣을 수 있습니다. 이 작업에 사용할 수 있는 WP 플러그인은 다음과 같습니다.

  1. Embed.ly 플러그인
  2. Embed.ly의 Matterport 지원 플러그인
  3. iframe 플러그인
  4. WP3D 모델

Wix 

아래 방법에 따라 Wix 페이지에 Matterport 모델을 삽입합니다. 

  1. 코드를 삽입할 Wix 페이지를 엽니다.
  2. "추가(Add)" > "자세히(More)" > 사이트 삽입(Embed a Site)을 클릭합니다. 
  3. 회색 상자가 나타나면 상자를 끌어 페이지에서 임베드 위치를 바꿉니다.
  4. "웹사이트 주소 입력(Enter Website Address)"을 클릭합니다. 
  5. 필드에 URL을 붙여넣습니다. 상자에 3D Showcase가 나타납니다.Wix_Example.png

Medium 블로그 게시물

아래 방법에 따라 Medium 블로그 게시물에 Matterport 모델을 삽입합니다. 

  1. 코드를 삽입할 Medium 페이지를 엽니다.
  2. "+" 버튼을 클릭하여 새 섹션을 추가합니다.
  3. <>를 클릭하여 코드 삽입 의사를 알립니다.
  4. 3D 모델의 URL을 붙여넣습니다.MediumEmbed123.png

Placester 

아래 방법에 따라 Placester에 Matterport 모델을 삽입합니다. 

  1. 코드를 삽입할 Placester 페이지를 엽니다.
  2. HTML 아이콘 "<>"을 클릭합니다.open-html-code-on-placester.png
  3. iframe 임베드 코드를 붙여넣습니다.
  4. HTML 아이콘 "<>"을 클릭하여 비주얼 에디터로 돌아갑니다.
    • 직접 삽입된 iframe이 나타나야 합니다.
  5. 변경 내용을 저장하면 삽입된 모델이 사이트에서 실행됩니다.

이 프로세스에 대한 자세한 내용은 Placester 지원 페이지를 참조하십시오.

HTML 소스 코드 직접 액세스

CMS가 변경 작업을 허용하지 않으면 사이트 웹마스터에게 문의하여 액세스 권한을 요청해야 합니다. 사이트 HTML에 대한 편집 액세스 권한이 있는 경우 HTML 소스 코드에 직접 <iframe> 코드를 추가합니다.

또 다른 질문이 있으십니까? 문의 등록