Hi everyone,
I have been trying to embed modelviewer in my website for a while now. I’m not a developer and have very minimum understanding of how this stuff works, but after countless of hours I have managed to upload my model to Amazon S3 and got it to work. My code works when I try it out in Glitch, but somehow it doesn’t do anything when I try to implement it on my own website. Does readymag not support 3d models or something? What am I missing? I am using the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title><model-viewer> example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-styles.css">
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>
</head>
<body>
<div id="card">
<!-- All you need to put beautiful, interactive 3D content on your site: -->
<model-viewer src="https://michelledl.s3.eu-north-1.amazonaws.com/michelle.glb"
ios-src="https://michelledl.s3.eu-north-1.amazonaws.com/michelle.glb"
alt="A 3D model of an astronaut"
shadow-intensity="1"
tone-mapping="commerce"
camera-controls
auto-rotate ar>
</model-viewer>
</div>
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js">
</script>
</body>
</html>
modelviewer is working with rm…
have you tried to upload your .glb to the model-viewer editor? Is it working? If yes, you could export it from there again and implement it on the rm-webpage. As I have played around with it, it only worked if I use this exported .glb file.
Another thing: does the dev-tools console give you any errors?
Hi! I did what you said an downloaded the glb again via the model-viewer editor and it works in the editable page now. However I have run into a new issue now. my dev tools console is giving me these errors:
do you know how to fix this?
hey…
in the preview I get the same errors, but published it works…
as you have changed the links form the code in your first post I cannot check yours though.
Hi! sorry for the later reply. I wanted to work on it again today, but for some reason the model has disappeared completely again. (even though I didn’t change anything since my last update). These are the current errors im getting:
and this is my current code (Which is working when I try it out in glitch):
<!DOCTYPE html>
<html lang="en">
<head>
<title><model-viewer> example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-styles.css">
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>
</head>
<body>
<div id="card">
<!-- All you need to put beautiful, interactive 3D content on your site: -->
<style>
model-viewer {
width: 600px;
height: 400px;
}
</style>
<model-viewer src="https://michelledl.s3.eu-north-1.amazonaws.com/michelle3.glb"
ios-src="https://michelledl.s3.eu-north-1.amazonaws.com/michelle3.glb"
environment-image="https://michelledl.s3.eu-north-1.amazonaws.com/aircraft_workshop_01_1k.hdr"
shadow-intensity="1"
tone-mapping="commerce"
camera-controls
auto-rotate ar>
</model-viewer>
</div>
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js">
</script>
</body>
</html>
hey… its not working in preview, but in the published version.
But what you are also facing is a pixelated 3d model. This is because RM is scaling the whole pagediv up, depending on the browser size. This is means that it is kind of “zoomed in” and the model-viewer script doesn´t recognize this “zoom” and does not adapt its dimension/solution.
But there is a hacky solution to this.
Inside the customcodewidget paste this:
you may have to play around with height/width to fit it to your design.
And be aware, this is a kind of quick hacky solution.
<style>
model-viewer {
width: 100%;
height: 100%;
}
.ff {
transform: translate(-17%, -40%) scale(0.4);
width: 165% !important;
height: 486% !important;
}
</style>
<model-viewer src="https://michelledl.s3.eu-north-1.amazonaws.com/michelle3.glb"
class="model3d"
ios-src="https://michelledl.s3.eu-north-1.amazonaws.com/michelle3.glb"
environment-image="https://michelledl.s3.eu-north-1.amazonaws.com/aircraft_workshop_01_1k.hdr"
shadow-intensity="1"
tone-mapping="commerce"
camera-controls
auto-rotate ar>
</model-viewer>
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js">
</script>
<script>
setTimeout(function() {
if(!navigator.userAgent.indexOf("Firefox") != -1 ){
$(".model3d").css({"zoom":"0.2"});
}
if(navigator.userAgent.indexOf("Firefox") != -1 ){
$(".model3d").addClass("ff");
}
}, 1000);
</script>
