Knowing parameters for iframe - Include GLB/gITF/DRACO/USDZ in website

Hi All,

I have grabbed some coding to load a gltf file using the model-viewer from google. Though, the problem is, how does one break this down to use within an iframe, or is this possible by just inserting the code within the page settings ?

Thanks.

Model Viewer
	model-viewer
		{
		width: 400px;
		height: 600px;
		margin: 0 auto;
		}

</style>
<model-viewer src="./CHAHIN_BOTTLE_OF_SODA.gltf" ios-src="./CHAHIN_BOTTLE_OF_SODA.gltf"></model-viewer>

Hello @rwebster,

I don’t know if I understand correctly your question, but for you to insert gtfl files in blocs, you can do it in this way:

Add a “CODE WIDGET” bric where you want to appear the gltf.

Then just add the following code:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule="" src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<model-viewer id="reveal" loading="eager" camera-controls auto-rotate poster="./img/helmet.png" src="./gld/DamagedHelmet.glb" alt="Nice Helmet"></model-viewer>
<style>
model-viewer{
  display: block;
  position: relative;
  contain: strict;
  width: 600px;
  height: 600px;
}
model-viewer#reveal {
    --poster-color: transparent;
  }
</style>

I made this example for you to see if is this what you need…
(you have two examples in the link)

Check instructions here or ask as we are here to help…

3 Likes

Hi @Pealco,

Many thanks for the help. Much appreciated… managed to get it working.

Thanks again for the huge help…

1 Like

Glad I could help you…