-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
86 lines (85 loc) · 4.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
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this file,
- You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VR Map</title>
<meta name="description" content="VR Map">
<link rel="stylesheet" href="vrmap.css">
<script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
<script src="https://unpkg.com/aframe-teleport-controls/dist/aframe-teleport-controls.min.js"></script>
<script src="https://unpkg.com/aframe-extras/dist/aframe-extras.controls.min.js"></script>
<script src="https://unpkg.com/aframe-extras/dist/aframe-extras.pathfinding.min.js"></script><!-- errors on controls if not present? -->
<script src="https://unpkg.com/osmtogeojson/osmtogeojson.js"></script>
<script src="map.js"></script>
<script src="position-limit.js"></script>
<script src="conversions.js"></script>
<script src="tiles.js"></script>
<script src="trees.js"></script>
<script src="buildings.js"></script>
</head>
<body>
<div id="introDialog">
<h1>VR Map - OpenStreetMap goes WebVR</h1>
<div id="generalinfo">
<p>This experimental app displays OpenStreetMap data (ground tiles, trees,
and buildings) in a web-based Virtual Reality environment.
</p>
<p>You can use mouse drags to pan around and the W/A/S/D keys to fly
through the scene, or switch to VR mode and use the trigger on your
controller to teleport around (or the trackpad to fly).
</p>
<p>One of the limitations is that currently only a small area gets loaded
and no additional scenery will get added when moving around.
</p>
</div>
<div id="locationSettings">
<select id="locationPresets"></select><br>
<input type="number" class="coords" id="locLatitude" placeholder="latitude" step="0.00001" min="-90" max="90"> /
<input type="number" class="coords" id="locLongitude" placeholder="longitude" step="0.00001" min="-180" max="180"><br>
<button id="locationLoadButton">Load location</button>
</div>
<div id="legalinfo">
<p>The source code can be found as
<a href="https://github.com/KaiRo-at/vrmap">KaiRo-at/vrmap at GitHub</a>.
</p>
<p>Map data and imagery of ground tiles ©
<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>
contributors, under <a href="http://www.openstreetmap.org/copyright"
target="_blank">ODbL/CC-BY-SA</a> licenses.
</p>
</div>
<p class="dialogButtonLine">
<button id="introDialogCloseButton">Start</button>
</p>
</div>
<a-scene background="color: #CFEBFD">
<a-entity id="ground" geometry="primitive: box; width: 2000; height: 0.01; depth: 2000;" position="0 -0.01 0" material="transparent: true; opacity: 0.01;"></a-entity>
<a-entity id="map">
<a-entity id="tiles">
</a-entity>
<a-entity id="items">
</a-entity>
</a-entity>
<a-entity id="cameraRig" position="0 0 0" movement-controls="speed: 1; fly: true; camera: #head;" position-limit="ymin: 0; ymax: 100;">
<!-- camera -->
<a-entity id="head" camera="active: true" look-controls position="0 1.6 0"><a-entity cursor="rayOrigin: mouse;" raycaster="far: 2; objects: .clickable;"></a-entity></a-entity>
<!-- hand controls -->
<a-mixin id="teleport"
teleport-controls="cameraRig: #cameraRig; button: trigger; teleportOrigin: #head; collisionEntities: #ground; curveShootingSpeed: 25; curveNumberPoints: 100;"
></a-mixin>
<a-mixin id="handcursor" cursor="downEvents: triggerdown; upEvents: triggerup;" raycaster="far: 2; showLine: true; objects: .clickable;"></a-mixin>
<a-entity id="left-hand" mixin="teleport"
oculus-touch-controls="hand: left;" vive-controls="hand: left;" windows-motion-controls="hand: left;"
daydream-controls="hand: left;" gearvr-controls="hand: left;"></a-entity>
<a-entity id="right-hand" mixin="teleport"
oculus-touch-controls="hand: right;" vive-controls="hand: right;" windows-motion-controls="hand: right;"
daydream-controls="hand: right;" gearvr-controls="hand: right;"></a-entity>
<!-- menu -->
<a-plane id="menu" color="#404040" position="0 2 -1" visible="false"></a-entity>
</a-entity>
</a-scene>
</body>
</html>