CODEWITHSUNDEEP
htmlcssios3dmodel-viewer
ASCII404
ASCII404

Reputation: 23

Why is model-viewer not working on safari?

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;
}

Upvotes: 1

Views: 2239

Answers (2)

Abdulla Ababakre
Abdulla Ababakre

Reputation: 413

I found this is helpful

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

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

Upvotes: 0

BGP100
BGP100

Reputation: 71

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)

Upvotes: 2

Related Questions