forked from 3DStreet/3dstreet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (128 loc) · 8.13 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
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="./dist/aframe-street-component.js"></script>
<!-- user controls -->
<script src="https://raw.githack.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<script src="src/lib/aframe-orbit-controls.min.js"></script>
<!-- ocean, ground, sky -->
<script src="src/components/ocean-plane.js"></script>
<script src="src/lib/aframe-cubemap-component.js"></script>
<!-- 2d ui toolbar -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<!-- move a-frame performance `stats` below toolbar -->
<style>
.rs-base {
left: 20px;
top: 80px;
}
</style>
</head>
<body>
<!-- Original source https://www.codeply.com/go/sbfCXYgqoO -->
<nav class="navbar fixed-top navbar-expand navbar-dark bg-dark" >
<div class="d-flex flex-grow-1">
<a href="https://github.com/kfarr/3dstreet/" class="navbar-brand" title="View Github README">3DStreet Open Source Reference Application</a>
<form class="mr-2 my-auto w-100 d-inline-block order-1" onsubmit="location.href='#'+this.inputUrl.value; setTimeout(window.location.reload.bind(window.location));" >
<div class="input-group">
<!-- <input type="text" class="form-control border border-right-0" placeholder="Paste Streetmix URL" /> -->
<input id="inputUrl" value="" type="text" class="form-control d-none d-lg-block" onfocus="this.select();" title="Paste in Streetmix.net URL such as 'https://streetmix.net/kfarr/3'" />
<span class="input-group-append">
<button class="btn btn-outline-light border" type="submit" title="Clear Scene and Re-Render">
<i class="fa fa-sync"></i>
</button>
<!-- <button class="btn btn-outline-light border" type="button" onclick="window.open(document.getElementById('inputUrl').value, '_blank');" title="Edit Street in Streetmix2D">
<i class="fa fa-edit"></i>
</button> -->
<!-- <button class="btn btn-outline-light border" type="button" onclick="window.open(streetmixUserToAPI(document.getElementById('inputUrl').value), '_blank')" title="View Raw Streetmix JSON">
<i class="fa fa-code"></i>
</button> -->
<!-- <button class="btn btn-outline-light border" type="button" onclick="startAudio()" title="Play Audio">
<i id="audio-icon" class="fa fa-volume-mute" style="color: pink"></i>
</button> -->
</span>
</div>
</form>
</div>
</nav>
<a-scene renderer="colorManagement: true; highRefreshRate: true; foveationLevel: 3; physicallyCorrectLights: true; logarithmicDepthBuffer: false;" fogoff="type: linear; color: #D5C69B; far: 200" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/versioned/decoders/1.4.3/">
<a-assets>
<streetmix-assets url="./"></streetmix-assets>
<a-cubemap id="skycube">
<img src="assets/images/skybox/posx.jpg">
<img src="assets/images/skybox/negx.jpg">
<img src="assets/images/skybox/posy.jpg">
<img src="assets/images/skybox/negy.jpg">
<img src="assets/images/skybox/posz.jpg">
<img src="assets/images/skybox/negz.jpg">
</a-cubemap>
</a-assets>
<a-entity id="cameraRig">
<a-entity id="camera" camera="far: 1000" wasd-controls="enabled: false" orbit-controls="autoRotate: true;autoRotateSpeed:0.01;target: 0 0 0;initialPosition:0 4 15;minDistance:3;maxDistance:100;enableKeys:false"></a-entity>
<a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ccffcc" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ccffcc" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity>
</a-entity>
<!-- <a-entity class="playme" sound="src: #ambientmp3; positional: false; loop: true;"></a-entity> -->
<a-entity light="type: ambient; color: #FFF; intensity: 2"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.6" position="0.5 1 -1"></a-entity>
<a-ocean-plane height="100" width="100" position="0 -1 0" material="envMap: #skycube;"></a-ocean-plane>
<a-entity id="skybox" cubemap="folder: assets/images/skybox/"></a-entity>
<a-entity id="street-parent" street streetmix-loader set-loader-from-hash="defaultURL: https://streetmix.net/kfarr/3"></a-entity>
<!-- <a-entity mixin="dividers-flowers" ></a-entity> -->
<!-- Label text -->
<!-- <a-entity position="0 2 0" geometry="primitive: plane; width: 10; height: auto" material="src: #subtitle; alphaTest: 0.; transparent: true;"
text="color: yellow; align: left; value: San Francisco; width: 10; ">
<a-entity position="-5.1 0 0.001" geometry="primitive: plane; width: 0.1; height: 0.46" material="color: white;"></a-entity>
</a-entity>
<a-entity position="5 1 0" geometry="primitive: plane; width: 20; height: auto" material="src: #subtitle; alphaTest: 0.; transparent: true;"
text="color: yellow; align: left; value: Harrison Street; width: 20; ">
<a-entity position="-10.1 0 0.001" geometry="primitive: plane; width: 0.1; height: 0.92" material="color: white;"></a-entity>
</a-entity> -->
<!-- For debugging / validation: below are bounding boxes based on vehicle specs available online -->
<!-- <a-entity id="ford-crown-vic-bounding" geometry="depth: 5.3; height: 1.448; width: 1.99" position="0.92059 0.74 0"></a-entity>
<a-entity id="newflyer-XD40-bounding" geometry="depth: 12; height: 3.2; width: 2.59" position="-3.97 1.59 0"></a-entity>
<a-entity id="siemens-avenio-bounding" geometry="depth: 30; height: 3.4; width: 2.65" position="8.8 1.7 0"></a-entity> -->
</a-scene>
</body>
<script>
AFRAME.registerComponent('set-loader-from-hash', {
dependencies: ['streetmix-loader'],
schema: {
defaultURL: { type: 'string' }
},
init: function () {
// get hash from window
const streetURL = window.location.hash.substring(1);
if (streetURL !== undefined && streetURL.length > 0) {
console.log('[set-loader-from-hash]','Using URL from hash', streetURL)
this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', streetURL);
} else {
console.log('[set-loader-from-hash]','Using default URL', this.data.defaultURL)
this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', this.data.defaultURL);
}
}
});
window.onload = function () {
if (window.location.hash.substring(1).length === 0) window.location.hash = '#https://streetmix.net/kfarr/3';
document.querySelector('#inputUrl').value = window.location.hash.substring(1);
}
function startAudio() {
// set sounds enabled in global state
state.sounds.enabled = true;
// iterate through all entities with .playme class and start them playing
var entities = document.querySelectorAll('.playme'), i;
for (i = 0; i < entities.length; ++i) {
entities[i].components.sound.playSound();
}
// set 2D DOM toolbar volume icon to green to indicate state
document.getElementById("audio-icon").setAttribute("class","fa fa-volume-up");
document.getElementById("audio-icon").setAttribute("style","color: lightgreen");
}
document.querySelector('a-scene').addEventListener('enter-vr', function () {
// console.log("ENTERED VR");
// startAudio();
});
</script>
</html>