¿Cómo insertar model-viewer?

Soporte
1

Hola

Tenemos un Discourse autoalojado para nuestra startup. Necesitamos ver y analizar modelos 3D como parte de nuestro flujo de trabajo. Model-viewer ofrece una funcionalidad muy sencilla para visualizar modelos 3D en 360 grados. Solo requiere CSS, JS y unas pocas líneas de HTML como las siguientes:

<!-- Importar el componente -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<!-- Usarlo como cualquier otro elemento HTML -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="Un modelo 3D de un astronauta" auto-rotate camera-controls></model-viewer>

Puedo personalizar Discourse para incluir JS y CSS, pero ¿cómo podría usar el HTML anterior para incrustarlo? Según lo que he aprendido, la etiqueta div está prohibida, y no he encontrado nada sobre cómo usar la etiqueta HTML de model-viewer en absoluto aquí.

Mi idea, tras todo esto, es subir el archivo GLB a Discourse desde el editor, usar ese enlace en la etiqueta src de model-viewer y así obtenerlo incrustado como un modelo 3D interactivo.

Agradecería cualquier consejo.

1 me gusta
2

A primera vista, esto parece terreno de complementos; es posible que tengas que desarrollar algo personalizado para ello.

1 me gusta
3

Si alguien más encuentra este tema (como yo) al buscar en Google ‘Discourse 3D model viewer’, he creado un componente temático que lo admite, por lo que no es necesario ningún plugin. Puede encontrar detalles del componente e instrucciones sobre cómo usarlo en la categoría Componente temático en Insertar Modelo 3D.

4 Me gusta