如何插入 model-viewer？

支持
1

你好，

我们初创公司使用自托管的 Discourse。在我们的工作流程中，需要查看和分析 3D 模型。Model-viewer 提供了一个非常简单的 360 度 3D 模型查看功能。它只需要 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="一个宇航员的 3D 模型" auto-rotate camera-controls></model-viewer>

我可以自定义 Discourse 以包含 JS 和 CSS，但如何嵌入上述 HTML 代码呢？据我所知，div 标签被禁止使用，而且我完全找不到关于如何使用 model-viewer HTML 标签的任何信息。

我的想法是：在 Discourse 编辑器中上传 GLB 文件，然后将该链接用于 model-viewer 的 src 属性，从而实现交互式 3D 模型的嵌入。

恳请给予建议。

2

乍一看，这像是插件的范畴，您可能需要为此开发一些定制功能。

3

如果其他人像我一样在谷歌搜索“Discourse 3D 模型查看器”时遇到此主题，那么我现在已经创建了一个支持此功能的组件，因此无需插件。您可以在组件类别中找到有关该组件的详细信息以及如何使用它的说明：插入模型 3D。