Comment insérer model-viewer ?

Bonjour,

Nous hébergeons nous-mêmes Discourse pour notre startup. Dans le cadre de notre flux de travail, nous devons visualiser et analyser des modèles 3D. Model-viewer offre une possibilité très simple de visualisation à 360 degrés des modèles 3D. Il suffit d’intégrer du CSS, du JS et quelques lignes de HTML comme ci-dessous.

<!-- Importer le composant -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<!-- L'utiliser comme n'importe quel autre élément HTML -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="Un modèle 3D d'un astronaute" auto-rotate camera-controls></model-viewer>

Je peux personnaliser Discourse pour inclure du JS et du CSS, mais comment puis-je intégrer le code HTML ci-dessus ? D’après ce que j’ai appris, la balise div est interdite, et je n’ai rien trouvé concernant l’utilisation de la balise HTML model-viewer ici.

Mon idée est de télécharger un fichier glb sur Discourse via l’éditeur, puis d’utiliser ce lien dans l’attribut src de model-viewer pour l’intégrer sous forme de modèle 3D interactif.

Je vous remercie par avance pour vos conseils.

1 « J'aime »

À première vue, cela ressemble à un domaine réservé aux plugins ; vous devrez peut-être développer une solution personnalisée pour cela.

1 « J'aime »

Si quelqu’un d’autre tombe sur ce sujet (comme je l’ai fait) en cherchant sur Google « visionneuse de modèles 3D Discourse », j’ai maintenant créé un composant de thème qui prend en charge cela, donc aucun plugin n’est nécessaire. Vous pouvez trouver les détails du composant et les instructions sur la façon de l’utiliser dans la catégorie Composant de thème à Insérer Modèle 3D.

4 « J'aime »