model-viewer를 삽입하는 방법?

제품 지원
1

안녕하세요

우리는 스타트업용으로 자체 호스팅된 Discourse를 사용하고 있습니다. 워크플로的一部分으로 3D 모델을 보고 분석해야 하는 경우가 있습니다. Model-viewer는 3D 모델을 360도로 매우 간단하게 확인할 수 있는 기능을 제공합니다. 아래처럼 CSS, JS와 HTML 몇 줄만 있으면 됩니다.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>

Discourse를 커스터마이징하여 JS와 CSS를 포함하는 것은 가능하지만, 위의 HTML을 어떻게 사용해 임베드할 수 있을까요? 제 소견으로는 div 태그가 금지되어 있고, model-viewer HTML 태그 사용법에 대한 정보를 여기에서 전혀 찾을 수 없었습니다.

결국 제 아이디어는 편집기에 glb 파일을 업로드한 뒤, 그 링크를 model-viewer의 src 태그에 사용해 인터랙티브 3D로 임베드하는 것입니다.

조언 부탁드립니다.

2

한눈에 봐도 플러그인 영역으로 보이며, 이 작업을 위해 커스텀 개발이 필요할 수 있습니다.

3

'Discourse 3D model viewer’를 검색하다가 이 주제를 발견하신 분(저도 그랬습니다)을 위해, 이제 이를 지원하는 테마 컴포넌트를 만들었습니다. 따라서 플러그인은 더 이상 필요하지 않습니다. 해당 컴포넌트에 대한 자세한 내용과 사용 방법은 Insert Model 3D의 테마 컴포넌트 카테고리에서 확인하실 수 있습니다.