GLB animation not loading, static GLB loads just fine. #4616
-
|
The two following codesnippets are identical but the path for the GLB.
The issue is that the first model doesn't load at all (an animation) and the second model loads just fine. Is there anything wrong with my code? Is there something wrong with the animation? Using SceneView the first animation loads just fine, on iOS using a GLTF2Kit it loads just fine, which gives me hope it's a configuration issue and not an issue with the GLB. <!DOCTYPE html>
<html>
<body>
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>
<script>
const onProgress = (event) => {
const progressBar = event.target.querySelector('.progress-bar');
const updatingBar = event.target.querySelector('.update-bar');
updatingBar.style.width = `${event.detail.totalProgress * 100}%`;
if (event.detail.totalProgress === 1) {
progressBar.classList.add('hide');
} else {
progressBar.classList.remove('hide');
if (event.detail.totalProgress === 0) {
event.target.querySelector('.center-pre-prompt').classList.add('hide');
}
}
};
document.querySelector('model-viewer').addEventListener('progress', onProgress);
</script>
<model-viewer
id="reveal"
loading="eager"
camera-controls="false"
src="https://github.com/JohanSkoett/glb_tests/raw/main/untitled2.glb"
alt="Bold [3D]"
ar-status="not-presenting"
autoplay="true"
autoplay ar ar-modes="webxr scene-viewer"
style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; display: block;background-color: #FAFAFA; --progress-bar-color: #FF7500;">
</model-viewer>
</body>
</html><!DOCTYPE html>
<html>
<body>
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>
<script>
const onProgress = (event) => {
const progressBar = event.target.querySelector('.progress-bar');
const updatingBar = event.target.querySelector('.update-bar');
updatingBar.style.width = `${event.detail.totalProgress * 100}%`;
if (event.detail.totalProgress === 1) {
progressBar.classList.add('hide');
} else {
progressBar.classList.remove('hide');
if (event.detail.totalProgress === 0) {
event.target.querySelector('.center-pre-prompt').classList.add('hide');
}
}
};
document.querySelector('model-viewer').addEventListener('progress', onProgress);
</script>
<model-viewer
id="reveal"
loading="eager"
camera-controls="false"
src="https://test-aorist-bucket.s3.amazonaws.com/models/artwork/187.1.glb"
alt="Bold [3D]"
ar-status="not-presenting"
autoplay="true"
autoplay ar ar-modes="webxr scene-viewer"
style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; display: block;background-color: #FAFAFA; --progress-bar-color: #FF7500;">
</model-viewer>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
Issue can be reproduced simply by creating HTML files with the code and opening them in Safari on Mac |
Beta Was this translation helpful? Give feedback.
-
|
So the animations don't work only on iOS devices? Because auto conversion brakes the animations, if you want them to be preserved and functional you will have to convert a .usdz version of the model for the iOS devices and put the path to it into ios-src="" in the modelviewer element. |
Beta Was this translation helpful? Give feedback.
-
|
It doesn't work on Android, it doesn't work in Safari. The problem is persistent across platforms. |
Beta Was this translation helpful? Give feedback.
-
|
Seems to be working fine in our editor (on both Safari and Chrome): If you're having trouble on mobile, you might consider optimizing your GLB. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much! Would appear that the lighting is so bright, it completely blended in with the white background. Thanks! |
Beta Was this translation helpful? Give feedback.
Seems to be working fine in our editor (on both Safari and Chrome):
If you're having trouble on mobile, you might consider optimizing your GLB.