How to insert model-viewer?

Support
1

Hi

We have a self hosted discourse for our startup. We are having to view and analyze 3d models as part of our workflow. Model-viewer gives a very simple 360 degree possibility of 3d models. It just takes a CSS, JS and few lines of html as below.

<!-- 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>

I can customize discourse to include js and css, but how could I use above html to embed? As I learn, the div is banned, and I could not find anything about how to use model-viewer html tag at all here.

After all this, my idea is to upload glb file to discourse in editor, use that link for src tag of model-viewer, to get it embedded as interactive 3d.

Kindly advice.

1 Like
2

At first glance, this reads like plugin territory, you may have to develop something custom for this.

1 Like
3

If anyone else comes across this topic (as I did) when googling for ‘Discourse 3D model viewer’ then I’ve now created a theme component which supports this, so no plugin necessary. You can find details of the component and instructions on how to use it in the Theme Component category at Insert Model 3D.

3 Likes