-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (87 loc) · 3.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code AR Viewer</title>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
model-viewer {
width: 100%;
height: 500px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>QR Code AR Viewer</h1>
<div id="instruction">Click on the cube at the bottom right of the screen to download the model.</div>
<model-viewer id="ar-model-viewer"
src=""
ios-src=""
alt="A 3D model"
auto-rotate
camera-controls
ar
camera-orbit="45deg 55deg 2.5m"
exposure="1.5"
environment-image="neutral"
ar-modes="scene-viewer quick-look webxr"
scale="0.1 0.1 0.1"
on-error="handleModelError">
</model-viewer>
<script>
async function fetchModelsConfig() {
try {
const response = await fetch('models.json');
if (!response.ok) {
throw new Error('Failed to fetch models configuration');
}
return await response.json();
} catch (error) {
console.error('Error fetching models configuration:', error);
return null;
}
}
function handleModelError(event) {
console.error('Model Viewer Error:', event);
alert('There was an error loading the AR model. Please try again.');
}
async function setModelSource(modelId) {
try {
const models = await fetchModelsConfig();
if (!models) return;
const modelViewer = document.getElementById('ar-model-viewer');
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
const baseIOSUrl = 'https://github.com/JMB-Scripts/AR-Structural-Biology/raw/main/IOS/';
const baseAndroidUrl = 'https://github.com/JMB-Scripts/AR-Structural-Biology/raw/main/Android/';
if (!models[modelId]) {
console.error('Invalid model ID:', modelId);
return;
}
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
modelViewer.setAttribute('src', '');
modelViewer.setAttribute('ios-src', baseIOSUrl + models[modelId].ios);
} else {
modelViewer.setAttribute('src', baseAndroidUrl + models[modelId].android);
modelViewer.setAttribute('ios-src', '');
}
console.log('Model ID:', modelId);
console.log('User Agent:', userAgent);
console.log('Model URL:', modelViewer.getAttribute('src') || modelViewer.getAttribute('ios-src'));
} catch (error) {
console.error('Error setting model source:', error);
}
}
const urlParams = new URLSearchParams(window.location.search);
const modelId = urlParams.get('model');
setModelSource(modelId);
</script>
</body>
</html>