-
Notifications
You must be signed in to change notification settings - Fork 1
/
museumGallery.html
107 lines (76 loc) · 3.79 KB
/
museumGallery.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
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no user-scalable=no">
<!--favicon -->
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Coiny&display=swap" rel="stylesheet" />
<!-- Bootstrap 4 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<!-- Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="Styles/styles.css">
<link rel="stylesheet" type="text/css" href="Styles/normalize.css">
<link rel="stylesheet" type="text/css" href="Styles/clouds.css">
<title>Museum Gallery</title>
<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- THREE.js -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons": "https://unpkg.com/[email protected]/examples/jsm/controls/PointerLockControls"
}
}
</script>
</head>
<body>
<!-- Clouds for Background -->
<div class="container_clouds">
<div class="cloud"></div>
</div>
<!-- Menu attached to room -->
<div id="menu" class="d-flex container-fluid justify-content-center col-12 py-5">
<!-- Card for Room 1 -->
<div id="menu" class="card text-center text-primary bg-dark " style="width:350px">
<img class="card-img-top" style="height: 300px;" src="Images/assets/imagineamuseum.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Museum of Imagination Tour<br></h4>
<p class="card-text">Made with 💜 and THREE.js</p>
<p class="lead">Control Guide</p>
<p>W - Forward / S - Backward </p>
<p>A - Left / D - Right</p>
<p>Q - rotate Left / E - rotate Right</p>
<!-- -->
<div id="playButton" class=''>
<a id="play-button" href="index.html"
class="btn btn-block btn-link stretched-link text-light font-weight-bold btn-outline-primary rounded-circle ">Return
to Home Page </a>
</div>
</div>
</div>
<!-- Card for Room 2 -->
<div id="menu-div" class="audio_controls">
<button id="start_audio">Start Audio </button>
<button id="pause_audio">Pause Audio </button>
<button id="stop_audio">Stop Audio </button>
</div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/examples/jsm/controls/PointerLockControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script type="module" src="/1_museumGallery.js"></script>
</body>
</html>