This repository has been archived by the owner on Jun 10, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into issue#111
- Loading branch information
Showing
11 changed files
with
539 additions
and
90 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
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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
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,242 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <!-- aframe --> | ||
| <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> | ||
|
|
||
| <!-- 3dstreet --> | ||
| <script src="https://github.3dstreet.org/dist/aframe-street-component.js"></script> | ||
|
|
||
| <!-- user controls - vr teleport --> | ||
| <script src="https://raw.githack.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script> | ||
|
|
||
| <!-- user controls - cursor teleport --> | ||
| <script src="./dist/aframe-cursor-teleport-component.min.js"></script> | ||
|
|
||
| <!-- gltf-animation --> | ||
| <script src="//cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js"></script> | ||
|
|
||
| <!-- mapbox --> | ||
| <script src="https://unpkg.com/aframe-mapbox-component/dist/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: ./dist/3dstreet-editor.js" | ||
| timed-inspector="2" | ||
| > | ||
| <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: false;" | ||
| ></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: false;" | ||
| ></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="layers-2d" data-layer-name="2D Street Layers" data-layer-show-children> | ||
| <a-entity | ||
| data-layer-name="Mapbox Satellite Streets" | ||
| geometry="primitive: plane; width: 512; height: 512;" | ||
| material="color: #ffffff; shader: flat; side: both; transparent: true;" | ||
| mapbox="center: -122.417490, 37.765190; zoom: 18; | ||
| accessToken: pk.eyJ1IjoibWF0dHJlIiwiYSI6IjRpa3ItcWcifQ.s0AGgKi0ai23K5OJvkEFnA; | ||
| style: mapbox://styles/mapbox/satellite-streets-v11; | ||
| pxToWorldRatio: 4;" | ||
| position="-7 -1 -2" | ||
| rotation="-90 -4.25 0" | ||
| ></a-entity> | ||
| </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> |
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
Oops, something went wrong.