How to Embed 3D Model Viewer onto Site?

Custom code
1

Hi everyone! This is similar to that other post, but I’m trying to embed model viewer onto my website and I’m also not a developer and have little understanding of how this works.

I exported my 3d model from Illustrator as a GLTF and imported it onto ModelViewer and copied the code it gave me.

All my code right now is:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
<model-viewer src="Asset 1.gltf" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="poster.webp" shadow-intensity="0" environment-image="aircraft_workshop_01_1k.hdr" exposure="0.94" tone-mapping="neutral" camera-orbit="0.8286deg 87.01deg 0.6101m" field-of-view="30deg">
    <div class="progress-bar hide" slot="progress-bar">
        <div class="update-bar"></div>
    </div>
    <button slot="ar-button" id="ar-button">
        View in your space
    </button>
    <div id="ar-prompt">
        <img src="https://modelviewer.dev/shared-assets/icons/hand.png">
    </div>
</model-viewer>

And it shows a button with a hand. When I click the button, it does nothing.

Do I need to type other code than what model viewer gives me? I’ve pasted other example model viewer code to test if THOSE’LL work, but they just show nothing. Am I pasting the code in the wrong place?

I’m trying to get my model to be interactable like the logo on this site: https://barbaracadorna.com/about/

Any help would be appreciated, thank you!

2

hey.
implementing model-viewer isnt that easy. as you also have to deal with the automated scaling of RM… the model-viewer misinterprets the rendering and is shown pixelated. This can be adressed with again downscaling the 3d container, but is a bit tricky. I managed to do it as you can see here: portaldrink.com

For more simple 3d models I would use spline as its way more easy to implement.

But in your example the shots widget is used… which I would also advice you if you want to achieve the same… Just export your animated 3d model as png sequence and upload it to the shots widget.

1 Like
3

I want my 3d model to be on a transparent background like the logo on the site. I tried using Spline viewer but I don’t like that it adds a background to the model.

I don’t have any animations on my model, I just want it to be able to be rotated. I’ll try the shots widget and see what happens though.

4

Thank you for the suggestion! I was able to get what I wanted.

1 Like