-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge main into sweep/use-aframe-anisotropy
- Loading branch information
Showing
3 changed files
with
262 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,227 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <!-- aframe --> | ||
| <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script> | ||
|
|
||
| <!-- 3dstreet --> | ||
| <script src="https://github.3dstreet.org/dist/aframe-street-component.js"></script> | ||
|
|
||
| <!-- user controls - vr teleport --> | ||
|
|
||
| <!-- mapbox --> | ||
| <script src="https://github.3dstreet.org/src/lib/aframe-mapbox-component.min.js"></script> | ||
|
|
||
| <!-- save / load --> | ||
| <script src="https://github.3dstreet.org/src/json-utils.js"></script> | ||
|
|
||
| <!-- ocean --> | ||
| <script src="https://github.3dstreet.org/src/components/ocean-plane.js"></script> | ||
|
|
||
| <title>3DStreet</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="icon" type="image/x-icon" href="assets/ui_assets/favicon.ico"> | ||
| <link rel="stylesheet" href="//github.3dstreet.org/src/viewer-styles.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- viewer ui start --> | ||
| <div class="viewer-header-wrapper"> | ||
| <button class="viewer-logo-start-editor-button" onclick="startEditor()"> | ||
| <img class="viewer-logo-img" alt="3DStreet Viewer" src="./assets/3DStreet-Viewer-Start-Editor.svg"> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="right-fixed"> | ||
| <ul class="right-menu"> | ||
| <li onclick="screenshot()"> <a class="camera" href="#"> <span> Capture image as PNG </span> <img src="//github.3dstreet.org/ui_assets/camera-icon.svg"> </a></li> | ||
| <li onclick="inputStreetmix()"> <a class="load" href="#"> <span> Load Streetmix URL </span> <img src="//github.3dstreet.org/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="//github.3dstreet.org/ui_assets/upload-icon.svg"></label></a></li> | ||
| <li> <a id="custom-enter-vr-button" class="vr" href="#"> <span class="vr">Enter VR mode</span> <img src="//github.3dstreet.org/ui_assets/vr-icon.svg"> </a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <a-scene | ||
| vr-mode-ui="enterVRButton: #custom-enter-vr-button;" | ||
| vr-mode-ui-if-headset | ||
| renderer="colorManagement: true; physicallyCorrectLights: true;" | ||
| gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/versioned/decoders/1.4.3/" | ||
| inspector="url: //3dstreet.app/dist/3dstreet-editor.js" | ||
| timed-inspector="2" | ||
| notify | ||
| > | ||
| <a-assets> | ||
| <!-- you can specify a custom asset path using below syntax --> | ||
| <!-- <streetmix-assets url="./assets/"></streetmix-assets> --> | ||
| </a-assets> | ||
|
|
||
| <a-entity id="cameraRig" data-layer-name="Viewer" cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true" wasd-controls="enabled: true"> | ||
| <a-entity id="camera" camera="near: 1; far: 1000" position="0 1.6 0"></a-entity> | ||
| <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffccff" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity> | ||
| <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffccff" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity> | ||
| </a-entity> | ||
|
|
||
| <a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity> | ||
|
|
||
| <a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children> | ||
| <a-entity | ||
| data-layer-name="16th Street West of SVN" | ||
| position="-96.980 0 -4.17918" | ||
| rotation="0 90 0" | ||
| id="east_street" | ||
| street="length: 150" | ||
| streetmix-loader="streetmixStreetURL: https://streetmix.net/kfarr/82/16th-st-harrison-st-sf-ca; showBuildings: true;" | ||
| ></a-entity> | ||
| <a-entity | ||
| data-layer-name="16th Street East of SVN" | ||
| position="78.165 0 -4.17918" | ||
| rotation="0 90 0" | ||
| id="west_street" | ||
| street="length: 150" | ||
| streetmix-loader="streetmixStreetURL: https://streetmix.net/kfarr/82/16th-st-harrison-st-sf-ca; showBuildings: true;" | ||
| ></a-entity> | ||
|
|
||
| <a-entity data-layer-name="16th & Harrison St Intersection" id="intersection" position="-9.917 0 -4.057"> | ||
| <a-entity | ||
| intersection="dimensions: 27.5 24.384;northeastcurb: 4.572 4.572;southwestcurb: 4.572 4.572;southeastcurb: 4.572 4.572;northwestcurb: 4.572 4.572;trafficsignal: 1 1 1 1;crosswalk: 1 1 1 1" | ||
| ></a-entity> | ||
| </a-entity> | ||
|
|
||
| <a-entity | ||
| data-layer-name="SVN North of 16th St" | ||
| position="-9.23383 0 -31.340" | ||
| rotation="0 0 0" | ||
| id="south_street" | ||
| street="length: 30" | ||
| streetmix-loader="streetmixStreetURL: https://streetmix.net/scott/31/south-van-ness-idea-short-term; showBuildings: false;" | ||
| ></a-entity> | ||
|
|
||
| <a-entity | ||
| data-layer-name="SVN South of 16th St" | ||
| position="-9.23383 0 23.009" | ||
| rotation="0 180 0" | ||
| id="north_street" | ||
| street="length: 30" | ||
| streetmix-loader="streetmixStreetURL: https://streetmix.net/scott/31/south-van-ness-idea-short-term; showBuildings: false;" | ||
| ></a-entity> | ||
|
|
||
| </a-entity> | ||
|
|
||
| <a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children> | ||
|
|
||
|
|
||
| </a-entity> | ||
| </a-scene> | ||
| </body> | ||
| <script> | ||
| // only show VR button if headset connected | ||
| AFRAME.registerComponent('vr-mode-ui-if-headset', { | ||
| dependencies: ['vr-mode-ui'], | ||
| init: function () { | ||
| if (!AFRAME.utils.device.checkHeadsetConnected()) { | ||
| this.el.setAttribute('vr-mode-ui', 'enabled', false); | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| 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); | ||
| // } | ||
| } | ||
| }); | ||
|
|
||
| function screenshot() { | ||
| AFRAME.scenes[0].setAttribute('screenshot','width',AFRAME.scenes[0].canvas.width) | ||
| AFRAME.scenes[0].setAttribute('screenshot','height',AFRAME.scenes[0].canvas.height) | ||
| document.querySelector('a-scene').components.screenshot.capture('perspective'); | ||
| } | ||
|
|
||
| function startEditor() { | ||
| var sceneEl = document.querySelector('a-scene'); | ||
| sceneEl.components.inspector.openInspector(); | ||
| document.querySelector('.viewer-header-wrapper').style.display = 'none'; | ||
| } | ||
|
|
||
| AFRAME.registerComponent('timed-inspector', { | ||
| init: function() { | ||
| setTimeout( function () { | ||
| window.postMessage('INJECT_AFRAME_INSPECTOR') | ||
| }, this.data * 1000) | ||
| } | ||
| }); | ||
|
|
||
| function inputStreetmix() { | ||
| streetmixURL = prompt("Please enter a Streetmix URL", "https://streetmix.net/kfarr/3/example-street"); | ||
| setTimeout(function() { window.location.hash = streetmixURL; }); | ||
| streetContainerEl = document.getElementById('street-container'); | ||
| while (streetContainerEl.firstChild) { | ||
| streetContainerEl.removeChild(streetContainerEl.lastChild); | ||
| } | ||
| streetContainerEl.innerHTML = '<a-entity street streetmix-loader="streetmixStreetURL: '+streetmixURL+'""></a-entity>'; | ||
| } | ||
|
|
||
| // JSON loading starts here | ||
| function getValidJSON(stringJSON) { | ||
| // Preserve newlines, etc. - use valid JSON | ||
| // Remove non-printable and other non-valid JSON characters | ||
| return stringJSON.replace(/\'/g, "") | ||
| .replace(/\n/g, "") | ||
| .replace(/[\u0000-\u0019]+/g,""); | ||
| } | ||
|
|
||
| function createElementsFromJSON(streetJSONString) { | ||
| const validJSONString = getValidJSON(streetJSONString); | ||
| streetContainerEl = document.getElementById('street-container'); | ||
| while (streetContainerEl.firstChild) { | ||
| streetContainerEl.removeChild(streetContainerEl.lastChild); | ||
| } | ||
| var streetObject = JSON.parse(validJSONString); | ||
| createEntities(streetObject.data, streetContainerEl); | ||
| } | ||
|
|
||
| function inputJSON() { | ||
| const stringJSON = prompt("Please paste 3DStreet JSON string"); | ||
| if (stringJSON) { | ||
| createElementsFromJSON(stringJSON); | ||
| } | ||
| } | ||
|
|
||
| function fileJSON() { | ||
| let reader=new FileReader(); | ||
| reader.onload=function(){ | ||
| createElementsFromJSON(reader.result); | ||
| } | ||
| reader.readAsText(this.files[0]); | ||
| } | ||
|
|
||
| document.getElementById('inputfile') | ||
| .addEventListener('change', fileJSON); | ||
| </script> | ||
| <!-- <script src="./dist/3dstreet-editor.js"></script> --> | ||
|
|
||
| <!-- Google Analytics - Global site tag (gtag.js) --> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-T65XPDLZ3F"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag(){dataLayer.push(arguments);} | ||
| gtag('js', new Date()); | ||
|
|
||
| gtag('config', 'G-T65XPDLZ3F'); | ||
|
|
||
| gtag('event', 'ga_init'); | ||
| </script> | ||
| </html> |
Oops, something went wrong.