specify a URL to load scene from json file (v1)

3DStreet · Sep 15, 2023 · 10aa7bd · 10aa7bd
1 parent bf7b4b3
commit 10aa7bd
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 45 deletions.
diff --git a/src/index.js b/src/index.js
@@ -12,6 +12,70 @@ require('./components/create-from-json');
 require('./components/screentock.js');
 require('aframe-atlas-uvs-component');
 
+AFRAME.registerSystem('json-3dstreet', {
+  schema: {
+    jsonURL: { type: 'string' }
+  },
+  init: function() {},
+  loadFromURL: function (fileURL) {
+    // load JSON file from URL
+    console.log(fileURL)
+    const request = new XMLHttpRequest();
+    request.open('GET', fileURL, true);
+    request.onload = function () {
+      if (this.status >= 200 && this.status < 400) {
+        // Connection success
+        // remove 'set-loader-from-hash' component from json data
+        const jsonData = JSON.parse(this.response, (key, value) =>
+          key === 'set-loader-from-hash' ? undefined : value
+        );
+
+        console.log(
+          '[set-loader-from-hash]',
+          '200 response received and JSON parsed, now createElementsFromJSON'
+        );
+        createElementsFromJSON(jsonData);
+        let sceneId = getUUIDFromPath(fileURL);
+        if (sceneId) {
+          console.log('sceneId from fetchJSON from url hash loader', sceneId);
+          AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId);
+        }
+      } else if (this.status === 404) {
+        console.error(
+          '[set-loader-from-hash] Error trying to load scene: Resource not found.'
+        );
+        AFRAME.scenes[0].components['notify'].message(
+          'Error trying to load scene: Resource not found.',
+          'error'
+        );
+      }
+    };
+    request.onerror = function () {
+      // There was a connection error of some sort
+      console.error(
+        'Loading Error: There was a connection error during JSON loading'
+      );
+      AFRAME.scenes[0].components['notify'].message(
+        'Could not fetch scene.',
+        'error'
+      );
+    };
+    request.send();
+
+  },
+  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 jsonURL = this.data.jsonURL;
+
+    if (jsonURL) {
+      this.loadFromURL(jsonURL);
+    }
+  }
+});
+
 AFRAME.registerComponent('street', {
   schema: {
     JSON: { type: 'string' },

diff --git a/src/json-utils.js b/src/json-utils.js
@@ -437,59 +437,16 @@ AFRAME.registerComponent('set-loader-from-hash', {
         // try to load JSON file from remote resource
         console.log(
           '[set-loader-from-hash]',
-          'Load 3DStreet scene with fetchJSON from',
+          'Load 3DStreet scene from',
           streetURL
         );
-        this.fetchJSON(streetURL);
+        AFRAME.scenes[0].setAttribute('json-3dstreet', `jsonURL: ${streetURL}`);
       }
       // else {
       //   console.log('[set-loader-from-hash]','Using default URL', this.data.defaultURL)
       //   this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', this.data.defaultURL);
       // }
     }
-  },
-  fetchJSON: function (requestURL) {
-    const request = new XMLHttpRequest();
-    request.open('GET', requestURL, true);
-    request.onload = function () {
-      if (this.status >= 200 && this.status < 400) {
-        // Connection success
-        // remove 'set-loader-from-hash' component from json data
-        const jsonData = JSON.parse(this.response, (key, value) =>
-          key === 'set-loader-from-hash' ? undefined : value
-        );
-
-        console.log(
-          '[set-loader-from-hash]',
-          '200 response received and JSON parsed, now createElementsFromJSON'
-        );
-        createElementsFromJSON(jsonData);
-        let sceneId = getUUIDFromPath(requestURL);
-        if (sceneId) {
-          console.log('sceneId from fetchJSON from url hash loader', sceneId);
-          AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId);
-        }
-      } else if (this.status === 404) {
-        console.error(
-          '[set-loader-from-hash] Error trying to load scene: Resource not found.'
-        );
-        AFRAME.scenes[0].components['notify'].message(
-          'Error trying to load scene: Resource not found.',
-          'error'
-        );
-      }
-    };
-    request.onerror = function () {
-      // There was a connection error of some sort
-      console.error(
-        'Loading Error: There was a connection error during JSON loading'
-      );
-      AFRAME.scenes[0].components['notify'].message(
-        'Could not fetch scene.',
-        'error'
-      );
-    };
-    request.send();
   }
 });