-
Notifications
You must be signed in to change notification settings - Fork 35
/
Copy pathindex.html
131 lines (111 loc) · 5.73 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
<!DOCTYPE html>
<html>
<head>
<!-- aframe -->
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@6024588c1060a23e42826953455c4537a35905eb/dist/aframe-master.min.js"></script>
<!-- 3dstreet -->
<script src="./dist/aframe-street-component.js"></script>
<!-- mapbox -->
<script src="./dist/aframe-mapbox-component.min.js"></script>
<!-- viewer controls - vr teleport -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-blink-controls.min.js"></script>
<!-- usersnap -->
<script>
window.onUsersnapLoad = function(api) {
api.init();
};
var script = document.createElement('script');
script.defer = 1;
script.src = 'https://widget.usersnap.com/global/load/07006ba2-73d0-4242-8e4b-47bdb559e20d?onload=onUsersnapLoad';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
<title>3DStreet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="ui_assets/favicon.ico">
<link rel="stylesheet" href="./dist/viewer-styles.css">
</head>
<body>
<img id="screenshot-img" src="ui_assets/3DStreet-Viewer-Start-Editor.svg" alt="Invisible Image" style="display:none;">
<!-- loading animation start -->
<div class="loader__wrapper">
<div class="loader">
<div class="road">Loading 3DStreet</div>
</div>
</div>
<!-- viewer ui start -->
<!-- <div class="viewer-header-wrapper m-4">
<button class="viewer-logo-start-editor-button" onclick="startEditor()">
<img class="viewer-logo-img" alt="3DStreet Viewer" src="ui_assets/3D-St-stacked-128.png">
</button>
</div> -->
<!-- maps copyright start -->
<div id="map-data-attribution" style="visibility: hidden;">
<div id="map-logo">Map Attribution:</div>
<span id="map-copyright"></span>
</div>
<!-- <div class="right-fixed">
<ul class="right-menu">
<li onclick="buttonScreenshotTock()"> <a class="camera" href="#"> <span> Capture image as PNG </span> <img
src="ui_assets/camera-icon.svg"> </a></li>
<li onclick="STREET.utils.inputStreetmix()"> <a class="load" href="#"> <span> Load Streetmix URL </span> <img
src="ui_assets/streetmix-logo.svg"> </a></li>
<li onclick="inputJSON()"> <a class="load" href="#"> <span> Load JSON String </span> <img src="assets/ui_assets/upload-icon.svg"> </a></li>
<li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input
type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span> Load JSON File </span>
<img src="ui_assets/upload-icon.svg"></label></a></li>
</ul>
</div> -->
<a-scene
renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16; logarithmicDepthBuffer: true;"
loading-screen="enabled: false" notify metadata
reflection device-orientation-permission-ui="enabled: false"
webxr="requiredFeatures:hit-test,local-floor;referenceSpaceType:local-floor;" xr-mode-ui="XRMode: ar">
<a-assets>
<!-- TODO: Add this to repo documentation -->
<!-- you can specify a custom asset path using below syntax -->
<!-- uncomment the line below to load assets from local github submodule -->
<!-- <street-assets url="./assets/"></street-assets> -->
<!-- you can specify a subset of categories of objects to load using below syntax -->
<!-- uncomment the line below to load all possible asset categories -->
<!-- <street-assets categories="sidewalk-props people people-rigged vehicles vehicles-rigged buildings intersection-props segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets> -->
<!-- a reduced set of assets for non-animated streetmix streets without intersections -->
<!-- <street-assets categories="loud-bicycle sidewalk-props people vehicles vehicles-rigged buildings segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets> -->
</a-assets>
<a-entity id="street-container" data-layer-name="User Layers" data-no-transform>
<a-entity id="default-street" street streetmix-loader set-loader-from-hash></a-entity>
</a-entity>
<a-entity id="reference-layers" data-layer-name="Geospatial Layers" data-no-transform></a-entity>
<a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;" data-no-transform></a-entity>
<a-entity id="cameraRig" class="ph-no-capture" data-layer-name="Viewer" data-no-transform
cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;"
movement-controls="camera: #camera; fly: true">
<a-entity id="camera" position="0 1.6 0" camera look-controls="reverseMouseDrag: true"></a-entity>
<a-entity id="leftHand" hand-controls="hand: left;"
blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right"
blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
<a-entity
id="screenshot"
data-layer-name="Focus animation"
data-no-pause=""
data-no-transform=""
focus-animation
screentock
visible="false"
></a-entity>
</a-entity>
</a-scene>
</body>
<script>
/* loading animation script */
document.addEventListener('DOMContentLoaded', function () {
const scene = document.querySelector('a-scene');
const splash = document.querySelector('.loader__wrapper');
scene.addEventListener('loaded', function (e) {
setTimeout(() => {
splash.style.display = 'none';
}, 1000);
});
});
</script>
</html>