Home > Net >  Why is model-viewer not working on safari?
Why is model-viewer not working on safari?

Time:03-29

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  style="margin-bottom: 60px; margin-top: 30px;">
  <div  align="center">
    <div >
        <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 >
      <p >
        text text
        text text
      </p>
      <p >
         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;
}

CodePudding user response:

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 result would be this:

src="3d_assets/place_holder.gltf"

(without the space)

  • Related