model-viewerの挿入方法

サポート
1

こんにちは

スタートアップで自己ホスト型のDiscourseを利用しています。ワークフローの一部として3Dモデルの表示と分析を行う必要があります。Model-viewerを使用すると、3Dモデルを非常にシンプルに360度表示できます。これは、以下のCSS、JS、および数行のHTMLで実現可能です。

<!-- コンポーネントのインポート -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<!-- 他のHTML要素と同様に使用 -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>

DiscourseのカスタマイズでJavaScriptやCSSを含めることは可能ですが、上記のHTMLを埋め込むにはどうすればよいでしょうか？divタグの使用は禁止されていると学んだのですが、model-viewerのHTMLタグの使い方について何も見つけることができませんでした。

最終的なアイデアは、エディタでGLBファイルをDiscourseにアップロードし、そのリンクをmodel-viewerのsrcタグに使用して、インタラクティブな3Dモデルとして埋め込むことです。

ご教示いただけますと幸いです。

「いいね！」 1
2

一見すると、これはプラグインの領域のように思えます。これにはカスタム開発が必要になるかもしれません。

「いいね！」 1
3

もし「Discourse 3Dモデルビューア」でグーグル検索してこのトピックにたどり着いた人がいたら（私もそうでした）、プラグイン不要でこれをサポートするテーマコンポーネントを作成しました。コンポーネントの詳細と使用方法については、テーマコンポーネントのカテゴリにあるInsert Model 3Dをご覧ください。

「いいね！」 4