-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (127 loc) · 9.08 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/styles.css">
<title>Arnaud Zimmern VR Portfolio</title>
<link rel="icon type="image/x-icon" href="IMAGES/favicon.ico">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">Arnaud Zimmern<button
class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"><span
class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto float-right">
<li class="nav-item active"><a class="nav-link" href="PAGES/initiatives_page.html">higher-ed vr</a>
</li>
<li class="nav-item"><a class="nav-link" href="PAGES/xr_ethics_page.html">xr ethics</a></li>
<li class="nav-item"><a class="nav-link"
href="https://www.dropbox.com/s/frfuy2xcp540wvf/Zimmern_xrResume_2023.pdf?dl=0">résumé</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- MODEL VIEWER -->
<main role="main">
<div id="container" style="display: block;">
<div id="aside" style="padding-top:5%">
<!-- This inserts the 3D object inside the aside container
For more on model viewer, see https://modelviewer.dev/editor/ -->
<model-viewer id="goldendome" loading="eager" shadow-intensity="1" height="device-height" width="device-width" src="THREED/ADMIN_BLDG/admin_bldg_scene.gltf" alt="Notre Dame Golden Dome Admin Building model - designed by Adam Heet"
auto-rotate camera-controls ar ios-src="THREED/ADMIN_BLDG/admin_bldg_scene.gltf" alt="The Golden Dome - model by Adam Heet" >
<!-- HOTSPOT -->
<button class="hotspot" slot="hotspot-hand" data-position="1 0.93 0.1" data-normal="-0.73 0.05 0.69">
<div class="annotation">The Golden Dome - model by Adam Heet</div>
</button>
<!-- METALLNESS CONTROLS -->
<div class="controls" style="float:right;">
<div>
<p>metalness: <span id="metalness-value"></span></p>
<input id="metalness" type="range" min="0" max="1" step="0.01" value="0">
</div>
<div>
<p>roughness: <span id="roughness-value"></span></p>
<input id="roughness" type="range" min="0" max="1" step="0.01" value="1">
</div>
</div>
</model-viewer>
<script>
const modelViewerParameters = document.querySelector("model-viewer#goldendome");
modelViewerParameters.addEventListener("load", (ev) => {
let material = modelViewerParameters.model.materials[0];
let metalnessDisplay = document.querySelector("#metalness-value");
let roughnessDisplay = document.querySelector("#roughness-value");
metalnessDisplay.textContent = material.pbrMetallicRoughness.metallicFactor;
roughnessDisplay.textContent = material.pbrMetallicRoughness.roughnessFactor;
// Defaults to gold
material.pbrMetallicRoughness.setBaseColorFactor([0.7294, 0.5333, 0.0392]);
document.querySelector('#metalness').addEventListener('input', (event) => {
material.pbrMetallicRoughness.setMetallicFactor(event.target.value);
metalnessDisplay.textContent = event.target.value;
});
document.querySelector('#roughness').addEventListener('input', (event) => {
material.pbrMetallicRoughness.setRoughnessFactor(event.target.value);
roughnessDisplay.textContent = event.target.value;
});
});
</script>
</div>
<div>
<p style="justify-content: center; padding: 5%; margin-left: 10%; margin-right:10%">
English professor + VR developer
</p>
</div>
<hr/>
</div>
<div>
<h6 class="featurette" style=" margin-left: 2%"><a href="PAGES/anatomical_theater.html" style="text-decoration: none;">Reconstructing il Teatro Anatomico di Padova <br/><span class="text-muted" style="font-size: smaller;">Unity, Oculus Quest, Adobe Mixamo</span></a></h6>
<h6 class="featurette" style=" margin-left: 2%"><a href="PAGES/killing_romeo.html" style="text-decoration: none;">Killing Romeo: Gaming Medical Ethics <span class="text-muted" style="font-size: smaller;"><br/>Unity, Oculus Quest 2, Handtracking</span></a></h6>
<h6 class="featurette" style=" margin-left: 2%"><a href="PAGES/aframe_page.html" style="text-decoration: none;">Immersive First Folio<span class="text-muted" style="font-size: smaller;""><br/>IIIF, WebVR, LeapMotion</span></a></h6>
<h6 class="featurette" style=" margin-left: 2%"><a href="PAGES/xr_iTREDS.html" style="text-decoration: none;">Collaboration and Social Ethics in the Metaverse <span class="text-muted" style="font-size: smaller;"><br/>VR Teaching, Ethnographic Research, Undergraduate Mentorship</span></a></h6>
<h6 class="featurette" style=" margin-left: 2%"><a href="PAGES/votredame.html" style="text-decoration: none;">Votre Dame, Notre Game - Father Sorin's Adventures<span class="text-muted" style="font-size: smaller;"><br/>Unity 2D, Piskel, SQLite</span></a></h6>
</div>
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<!-- FEATURETTE 2: Killing Romeo -->
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h1>FAQs</h1>
<h2 class="featurette-heading" style="font-size: 200%;"">How long have I been learning VR? <span class="text-muted" style="font-size: smaller;"> 2 years.</span></h2>
<br/>
<h2 class="featurette-heading" style="font-size: 200%;"">What's my background? <span class="text-muted" style="font-size: smaller;"> I have a PhD in English, a BA in Math.</span></h2>
<br/>
<h2 class="featurette-heading" style="font-size: 200%;"">How do I say my name? <span class="text-muted" style="font-size: smaller;"> Like a pirate, saying "no."</span></h2>
<br/>
<h2 class="featurette-heading" style="font-size: 200%;"">Will VR really be good for education? <span class="text-muted" style="font-size: smaller;">It won't just depend on how we use it, but on how we build it. My advice is get involved.</span></h2>
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
</div>
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>Design by Arnaud Zimmern, PhD | University of Notre Dame</p>
<p>Made with Bootstrapr.io and A-Frame | hosted on GitHub Pages</p>
</footer>
</main>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="JS/main.js"></script>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</body>
</html>