1

I am trying to put some 3D Models on my website but it seems that it works only on Android and Windows so far, don't know why. I tried to use different formats for files but still nothing. Even if I go to the website where is the documentation, here, nothing shows up so I thought maybe safari doesn't support 3D Models anymore?

Here is a little piece of my code as I might have written something wrong.

<div class="container-fluid ml-auto mr-auto" style="margin-bottom: 60px; margin-top: 30px;">
  <div class="row" align="center">
    <div class="col">
        <model-viewer disable-zoom poster="3d_assets/untitled.png"src=" 3d_assets/place_holder.gltf" ios-src="3d_assets/place_holder.usdz" alt="A 3d thing" auto-rotate camera-controls></model-viewer>
    </div>
    <div class="col align-self-center">
      <p class="model-text">
        text text
        text text
      </p>
      <p class="model-sm-text">
         smaller
         smaller
      </p>
    </div>
  </div>

and the CSS:

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

.model-text{
    letter-spacing: 2px;
    font-size:30px;
    font-weight: 500;
}

.model-sm-text{
    font-size:20px;
    font-weight: 400;
}
ASCII404
  • 25
  • 6
  • Are there any errors in the developer console? Or is this iOS Safari? – tbjgolden Mar 28 '22 at 22:11
  • There are no errors in the developer console. The 3d model just doesn't appear on Safari on IOS. Even though the model is loaded, the browser won't display it. – ASCII404 Mar 29 '22 at 12:33

2 Answers2

2

in the src part you put this:

src=" 3d_assets/place_holder.gltf"

what happened is that you put a space before '3d' so that means the file will have a space in the beginning and will not be found.
so the correct code would be this:

src="3d_assets/place_holder.gltf"

(without the space)

BGP100
  • 61
  • 5
0

I found this is helpful

customElements.get("model-viewer").minimumRenderScale = 1;

You can learn more here https://github.com/google/model-viewer/issues/1521

Abdulla Ababakre
  • 327
  • 3
  • 4