-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (94 loc) · 3.25 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
96
97
98
99
100
101
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script
type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
></script>
</head>
<body>
<div>
<div class="container">
<table class="left-table">
<tr>
<td><button class="table-button" id="table-button1">Dog_Animation 1</button></td>
</tr>
<tr>
<td><button class="table-button" id="table-button2">Dog_Animation 2</button></td>
</tr>
<tr>
<td><button class="table-button" id="table-button3">Dog_Animation 3</button></td>
</tr>
</table>
<!-- <div class="center"> -->
<model-viewer
id="viewer"
src="https://puvanesh07.github.io/Interaktive_Files/Dog_AppScreen_Animation.glb"
ios-src="https://puvanesh07.github.io/Interaktive_Files/Collar_Animation.usdz"
alt="A 3D model"
preload
ar
ar-modes="quick-look scene-viewer webxr"
shadow-intensity="0.97"
exposure="2"
interaction-prompt="auto"
camera-controls
autoplay="true"
quick-look-browsers="safari chrome"
camera-orbit="0deg 75deg auto"
min-field-of-view="10deg"
max-field-of-view="100deg"
min-camera-orbit="auto 0deg 80%"
max-camera-orbit="auto 180deg 100%"
style="width: 100%; height: 400px; top: 0px"
>
</model-viewer>
<!-- </div> -->
<table class="right-table">
<tr>
<td><button class="table-button" id="table-button4">Dog_Animation 4</button></td>
</tr>
<tr>
<td><button class="table-button" id="table-button5">Button 5</button></td>
</tr>
<tr>
<td><button class="table-button" id="table-button6">Button 5</button></td>
</tr>
</table>
</div>
<button slot="ar-button" id="ar-button"> Activate AR</button>
</body>
<script>
function buttonClicked1() {
const modelViewer = document.querySelector("#viewer");
modelViewer.animationName = "DA_01";
}
function buttonClicked2() {
const modelViewer = document.querySelector("#viewer");
modelViewer.animationName = "DA_02";
}
function buttonClicked3() {
const modelViewer = document.querySelector("#viewer");
modelViewer.animationName = "DA_03";
}
function buttonClicked4() {
const modelViewer = document.querySelector("#viewer");
modelViewer.animationName = "DA_04";
}
window.onload = function () {
var btn1 = document.getElementById("table-button1");
btn1.addEventListener("click", buttonClicked1, true);
var btn2 = document.getElementById("table-button2");
btn2.addEventListener("click", buttonClicked2, true);
var btn3 = document.getElementById("table-button3");
btn3.addEventListener("click", buttonClicked3, true);
var btn4 = document.getElementById("table-button4");
btn4.addEventListener("click", buttonClicked4, true);
};
</script>
</html>