I made an application in which I'm displaying a 3d from a URL. I'm trying to access a 3D file using model-viewer and when I try to use AR it shows me this error:
Can't open url: intent://arvr.google.com/scene-viewer/1.0?mode=ar_preferred&disable_occlusion=true&file=https%3A%2F%2Fcdn-luma.com%2Fede55bce1c8f80f445e9ada9adc27ff4ec7b8c463f370c14c5e7ae9302a29d06%2FLord_Krishna_textured_mesh_glb.glb#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https%3A%2F%2Fluma-modal-viewer.netlify.app%2F%3Fmodel%3Dhttps%3A%2F%2Fcdn-luma.com%2Fede55bce1c8f80f445e9ada9adc27ff4ec7b8c463f370c14c5e7ae9302a29d06%2FLord_Krishna_textured_mesh_glb.glb%26metadata%3D%7B%2522title%2522%3A%2522Lord%2520Krishna%2522%2C%2522status%2522%3A%2522complete%2522%7D%23model-viewer-no-ar-fallback;end;
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@google/model-viewer@2/dist/model-viewer.js"></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@google/model-viewer@2/dist/webxr-polyfill.js"></script>
<title>3D MODEL</title>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@google/model-viewer@2/dist/model-viewer.js"></script>
<style>
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-direction: column;
}
.container > #model {
margin: 1rem;
border: 1px solid #ccc;
padding: 0.5rem;
min-height: 330px;
min-width: 330px;
border-radius: 0.5rem;
box-shadow: 0px 0px 20px 0px #000;
}
.model-info {
margin-top: 1rem;
text-align: center;
}
.model-info label {
all: unset;
width: 100%;
color: black;
opacity: 0.6;
}
.model-info p {
width: 100%;
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<model-viewer
id="model"
alt="3D MODEL"
src=""
ar
ar-button
ar-modes="webxr scene-viewer quick-look"
auto-rotate
shadow-intensity="1"
camera-controls
touch-action="pan-y">
<button
style="
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 45px;
padding: 15px 20px;
"
type="button"
slot="ar-button"
id="customARButton"
class="disabled-button"
disabled>
Start Experience
</button>
</model-viewer>
<div class="model-info">
<label for="title">Model Title</label>
<p id="title">Loading...</p>
<label for="description">Model Description</label>
<p id="description"></p>
</div>
</div>
<script>
const urlParams = new URLSearchParams(window.location.search);
const modelUrl = urlParams.get('model');
const metadataString = urlParams.get('metadata');
const modelViewer = document.querySelector('model-viewer');
const customARButton = document.getElementById('customARButton');
modelViewer.addEventListener('load', () => {
customARButton.removeAttribute('disabled');
customARButton.classList.remove('disabled-button');
if (customARButton.disabled) {
customARButton.style.backgroundColor = '#ccc';
} else {
customARButton.style.backgroundColor = '#007bff';
}
});
if (modelUrl) {
const filename = modelUrl.split('/').pop();
modelViewer.src = filename;
console.log('path' + filename);
}
if (metadataString) {
const metadata = JSON.parse(decodeURIComponent(metadataString));
const title = metadata.title || 'No Title';
const description = metadata.description || 'No Description';
const titleElement = document.getElementById('title');
titleElement.textContent = title;
const descriptionElement = document.getElementById('description');
descriptionElement.textContent = description;
}
</script>
</body>
</html>