Merge main into sweep/use-aframe-anisotropy

README.md

@@ -158,7 +158,7 @@ The 3DStreet codebase is offered under the GNU Affero General Public License v3,
 
 Assets such as 3D models, textures, and audio are offered under the [Creative Commons By Attribution Non-Commercial License](https://creativecommons.org/licenses/by-nc/4.0/), unless a more specific license is specified for each asset in the documentation on this page.
 
-Contact [[email protected]](mailto:[email protected]) for commercial licensing.
+Contact [[email protected]](mailto:[email protected]) for commercial licensing.
 
 ### Developer Docs
 See [this link for more information](src/README.md) about the custom components developed and modified for the project.
@@ -184,4 +184,7 @@ See [this link for more information](src/README.md) about the custom components
 * Tram pass https://www.soundsnap.com/tram_pass_by_fast_wav
 * Historic streetcar pass https://www.soundsnap.com/streetcar_passing_by_smoothly
 
+### Skybox credits
+* Most skybox images (c) Polyhaven CC0 license polyhaven.com [individual credits](https://github.com/3DStreet/3dstreet/issues/360#issue-1910580549)
+
 <img src="https://raw.githubusercontent.com/kfarr/3dstreet/master/ui_assets/streetmix3d-banner.jpg" />

index.html

@@ -16,6 +16,27 @@
     <!-- ocean -->
     <script src="./src/components/ocean-plane.js"></script>
 
+    <!-- vr teleport controls -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-blink-controls.min.js"></script>
+
+    <script>
+      // this makes the same camera rig setup work in VR and desktop modes
+      // this could be a new component, such as "swap desktop and vr controls" and put in init section
+      window.addEventListener("DOMContentLoaded", function() {
+        const sceneEl = document.querySelector("a-scene");
+        sceneEl.addEventListener("enter-vr", function() {
+          document.querySelector('#cameraRig').removeAttribute('look-controls')
+          document.querySelector('#cameraRig').removeAttribute('wasd-controls')
+          document.querySelector('#cameraRig').removeAttribute('cursor-teleport')
+          document.querySelector('#cameraRig').setAttribute('position', '0 0 0')
+        });
+        sceneEl.addEventListener("exit-vr", function() {
+          document.querySelector('#cameraRig').setAttribute('cursor-teleport', "cameraRig: #cameraRig; cameraHead: #camera;")
+          document.querySelector('#cameraRig').setAttribute('look-controls', "reverseMouseDrag: true;")
+          document.querySelector('#cameraRig').setAttribute('wasd-controls', "enabled: true")
+        });
+      })
+    </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">
@@ -36,17 +57,19 @@
         <li onclick="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>
-        <li> <a id="custom-enter-vr-button" class="vr" href="#"> <span class="vr">Enter VR mode</span> <img src="ui_assets/vr-icon.svg"> </a></li>
+        <li> <a id="custom-enter-vr-button" class="vr" href="#"> <span class="vr">Enter VR mode</span> <img src="ui_assets/vr.svg"> </a></li>
+        <li> <a id="custom-enter-ar-button" class="ar" href="#"> <span class="ar">Enter AR mode</span> <img src="ui_assets/ar.svg"> </a></li>
       </ul>
     </div>
 
     <a-scene
-      vr-mode-ui="enterVRButton: #custom-enter-vr-button;"
+      vr-mode-ui="enterVRButton: #custom-enter-vr-button; enterARButton: #custom-enter-ar-button;"
       vr-mode-ui-if-headset
       renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16"
       inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
       notify
       metadata
+      scene-title
       >
       <a-assets>
         <!-- uncomment the line below to load assets from local github submodule -->
@@ -59,8 +82,8 @@
 
       <a-entity id="cameraRig" position="0 10 30" data-layer-name="Viewer" cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true" wasd-controls="enabled: true">
         <a-entity id="camera" camera="far: 1000" position="0 1.6 0" ></a-entity>
-        <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffccff"></a-entity>
-        <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffccff"></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" class="no-pause" screentock visible="false"></a-entity>
       </a-entity>
 

src/index.js

@@ -89,7 +89,10 @@ AFRAME.registerComponent('streetmix-loader', {
         console.log('streetmixName', streetmixName);
         el.setAttribute('streetmix-loader', 'name', streetmixName);
 
-        const currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
+        let currentSceneTitle;
+        if (AFRAME.scenes[0] && AFRAME.scenes[0].getAttribute('metadata')) {
+            currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
+        }
         if (!currentSceneTitle) { // only set title from streetmix if none exists
           AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', streetmixName);
           console.log('therefore setting metadata sceneTitle as streetmixName', streetmixName);

src/json-utils.js

@@ -410,7 +410,51 @@ AFRAME.registerComponent('metadata', {
     sceneTitle: { default: '' },
     sceneId: { default: '' }
   },
-  init: function () {}
+  init: function () { },
+  update: function (oldData) {
+    const sceneTitle = this.data.sceneTitle;
+    if (sceneTitle !== oldData.sceneTitle) {
+      this.el.emit('newTitle', {sceneTitle: sceneTitle});
+    }  
+  }
+});
+
+AFRAME.registerComponent('scene-title', {
+  schema: {
+    titleText: { default: '' }
+  },
+  init: function () {
+    this.titleElement = undefined;
+    this.el.addEventListener('newTitle', (evt) => {
+      this.el.setAttribute('scene-title', 'titleText', evt.detail.sceneTitle);
+    });
+  },
+  createTitleElement: function (titleText) {
+    const titleDiv = this.titleElement = document.createElement('div');
+    const newContent = document.createTextNode(titleText);
+    titleDiv.setAttribute('id', 'sceneTitle');
+    titleDiv.appendChild(newContent);
+    document.body.append(titleDiv);
+  },
+  updateTitleText: function (titleText) {
+    this.titleElement.textContent = titleText;
+  },
+  update: function (oldData) {
+    // If `oldData` is empty, then this means we're in the initialization process.
+    // No need to update.
+    if (Object.keys(oldData).length === 0) { return; }
+
+    const titleText = this.data.titleText;
+    const titleElement = this.titleElement;
+
+    if (titleText !== oldData.titleText) {
+      if (!titleElement) {
+        this.createTitleElement(titleText);
+      } else {
+        this.updateTitleText(titleText);
+      }
+    }   
+  }
 });
 
 AFRAME.registerComponent('set-loader-from-hash', {

src/viewer-styles.css

@@ -71,7 +71,7 @@ body {
 .right-fixed {
 	position: fixed;
 	right: 0;
-	margin-top: 40vh;
+	margin-top: 22.5vh;
 	z-index: 1;
 }
 
@@ -137,3 +137,22 @@ body {
 	background: #6100FF;
 	z-index: 9999;
 }
+
+/********* scene title css *********/
+
+#sceneTitle {
+	position: fixed;
+	color: white;
+	font-size: 20px;
+	font-family: Lato;
+	font-weight: 400;
+	word-wrap: break-word;
+	bottom: 43px;
+	pointer-events: none;
+    z-index: 2;
+    width: 100%;
+    text-align: center;
+    height: 26px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}