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)