explore3d/index.html at main · ma4096/explore3d · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>3D Port for ISEM</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>

	<model-viewer src="" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="loading.webp" shadow-intensity="1">
		<button slot="ar-button" id="ar-button">Switch to AR (experimentell)</button>
	</model-viewer>

	<sidebar>
		<h2 id="path">ISEM</h2>
		<nav id="menu">
			<img class="clickable" src="./arrowBack.png" onclick="oneUp()">
		</nav>
	</sidebar>
	<div id="navButton" class="clickable" onclick="navOpenClose()">
		Close Menu
	</div>


	<div id="anoButton" class="clickable" onclick="anoOpenClose(); addAnimations();">
		Open Options
	</div>
	<div class="annotation-selector"><!-- Named annotations instead of animations to be compatible to-->
		<section class="animationsList options">
		</section>
		<section class="replayOptions options">
			<div id="playPauseButton" onclick="animationPlayPause(this)" style="display:inline; font-size: 1em">&#9208;</div>
			<label for="playbackRange">Scratching: </label><input type="range" min="0" max="99" value="0" id="playbackRange" oninput="jumpAnimation(this)">
			<p>
			<label for="playbackSpeed">Speed: </label>
			<select id="playbackSpeed" onchange="changeSpeed(this)">
				<option value="1" selected>100%</option>
				<option value="0.5">50%</option>
				<option value="0.25">25%</option>
				<option value="-0.25">-25%</option>
				<option value="-0.5">-50%</option>
				<option value="-1">-100%</option>
			</select>
			<input type="checkbox" id="showAnnotations" checked="checked" onclick="annotationsShowHide()"><label for="showAnnotations">Annotations</label>
			<input type="checkbox" id="darkmode" onclick="switchColorMode()" autocomplete="off"><label for="darkmode">Darkmode</label>
		</section>
	</div>
	<footer>
		<a href="./credits.html">Credits for example models</a>
	</footer>

	<script type="text/javascript" src="./scriptf.js"></script>
	<script type="text/javascript" src="./script.js"></script>
</body>
</html>