three v186

public/ar_download.js

 function downloadScene() {
-    const placedModels = getAllPlacedModels().map(model => {
-      const { lat, lng } = threeToLeaflet(model.position.x, model.position.z);
-      return {
-        name: model.modelConfig.name,
-        position: model.position,
-        rotation: model.rotation,
-        scale: model.scale,
-        lat: lat,
-        lng: lng,
-      }
-    });
+  const placedModels = window.getAllPlacedModels().map((model) => {
+    const { lat, lng } = window.threeToLeaflet(
+      model.position.x,
+      model.position.z,
+    );
+    return {
+      name: model.modelConfig.name,
+      position: model.position,
+      rotation: model.rotation,
+      scale: model.scale,
+      lat: lat,
+      lng: lng,
+    };
+  });
 
-    console.log("Modelle: " + placedModels.length)
-    if (placedModels.length === 0) {
-      showInfoDialog("Szene ist leer");
-      return;
-    }
+  console.log("Modelle: " + placedModels.length);
+  if (placedModels.length === 0) {
+    showInfoDialog("Szene ist leer");
+    return;
+  }
 
-    if (!geoLocation) {
-      console.log("Standort nicht geladen");
-      showInfoDialog("Ihr Standort wurde noch nicht geladen");
-      return;
-    }
+  if (!geoLocation) {
+    console.log("Standort nicht geladen");
+    showInfoDialog("Ihr Standort wurde noch nicht geladen");
+    return;
+  }
 
-    const data = {
-      lat: geoLocation.latitude,
-      lng: geoLocation.longitude,
-      models: placedModels,
-    }
+  const data = {
+    lat: geoLocation.latitude,
+    lng: geoLocation.longitude,
+    models: placedModels,
+  };
+
+  const sceneData = JSON.stringify(data, null, 1);
+  const blob = new Blob([sceneData], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "scene.json";
+  a.style.display = "none";
 
-    const sceneData = JSON.stringify(data, null, 1);
-    const blob = new Blob([sceneData], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "scene.json";
-    a.style.display = "none";
-  
-    document.body.appendChild(a);
-    a.click();
-  
-    URL.revokeObjectURL(url);
-    document.body.removeChild(a);
+  document.body.appendChild(a);
+  a.click();
+
+  URL.revokeObjectURL(url);
+  document.body.removeChild(a);
 }
 
 function loadSceneFromFile(loadedData) {
-  const fileInput = document.createElement('input');
-  fileInput.type = 'file';
-  fileInput.accept = 'application/json';
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.accept = "application/json";
 
-  fileInput.addEventListener('change', function(event) {
-      const file = event.target.files[0];
-      const fileName = file ? file.name : "Keine Datei ausgewählt"
-      if (!file) {
-          console.log("Keine Datei ausgewählt");
-          return;
-      }
+  fileInput.addEventListener("change", function (event) {
+    const file = event.target.files[0];
+    const fileName = file ? file.name : "Keine Datei ausgewählt";
+    if (!file) {
+      console.log("Keine Datei ausgewählt");
+      return;
+    }
 
-      const reader = new FileReader();
-      reader.onload = function(e) {
-          try {
-              const sceneData = JSON.parse(e.target.result);
-              loadedData(sceneData, fileName);
-          } catch (error) {
-              console.error("Fehler beim Verarbeiten der Datei:", error);
-          }
-      };
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      try {
+        const sceneData = JSON.parse(e.target.result);
+        loadedData(sceneData, fileName);
+      } catch (error) {
+        console.error("Fehler beim Verarbeiten der Datei:", error);
+      }
+    };
 
-      reader.readAsText(file);
+    reader.readAsText(file);
   });
   fileInput.click();
-}
\ No newline at end of file
+}
+
+/* Expose functions used by the existing HTML and ar_start.js. */
+window.downloadScene = downloadScene;
+window.loadSceneFromFile = loadSceneFromFile;

public/ar_overviewmap.js

+import * as THREE from "three";
+
 let init = false;
 let mymap;
 let userIcon;
@@ -98,7 +100,7 @@ function init_map() {
     // Add currently placed models to map
     // ========================================================
 
-    const models = getAllPlacedModels();
+    const models = window.getAllPlacedModels();
 
     models.forEach((model) => {
       const { lat, lng } = threeToLeaflet(model.position.x, model.position.z);
@@ -210,7 +212,12 @@ function updateMap() {
   }
 
   // PERFORMANCE: Reuse the same Vector3 object.
-  camera.getWorldPosition(cameraPosition);
+  const activeCamera =
+    typeof window.getXRRenderCamera === "function"
+      ? window.getXRRenderCamera()
+      : camera;
+
+  activeCamera.getWorldPosition(cameraPosition);
 
   // PERFORMANCE: Do not update Leaflet if the user
   // has not moved.
@@ -323,3 +330,9 @@ function roundTo(n, digits) {
 
   return parseFloat(n);
 }
+
+/* Expose map functions needed by the other application modules. */
+window.init_map = init_map;
+window.centerOnPlan = centerOnPlan;
+window.threeToLeaflet = threeToLeaflet;
+window.leafletToThree = leafletToThree;

public/ar_start.js

@@ -79,7 +79,6 @@ function showStartScreen() {
 
   startScreen.appendChild(hftLogo);
 
-
   /* ==========================================================
      TITLE
      ========================================================== */
@@ -190,7 +189,7 @@ function showStartScreen() {
     predefinedButton2 = null;
 
     // Start AR
-    activateXR(sceneData);
+    window.activateXR(sceneData);
   };
 
   /* ==========================================================
@@ -198,7 +197,7 @@ function showStartScreen() {
      ========================================================== */
 
   loadButton.onclick = () => {
-    loadSceneFromFile((data, fileName) => {
+    window.loadSceneFromFile((data, fileName) => {
       if (data && fileName) {
         sceneData = data;
         sceneFileName = fileName;

public/index.html

@@ -9,8 +9,15 @@
 
   <link rel="stylesheet" href="style.css">
 
-  <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
-  <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
+  <!-- Three.js (modern ES module setup) -->
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://unpkg.com/three@0.186.0/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@0.186.0/examples/jsm/"
+    }
+  }
+  </script>
 </head>
 
 <body>
@@ -29,6 +36,7 @@
        STANDARDMENÜ
        ============================================================ -->
 
+
   <div id="menu-bar">
 
     <div
@@ -299,7 +307,7 @@
        ============================================================ -->
 
   <div id="app-version">
-    v0.1.3
+    v0.1.186
   </div>
 
 
@@ -307,21 +315,22 @@
        JAVASCRIPT
        ============================================================ -->
 
-  <script src="ar_start.js"></script>
-
-  <script src="ar_main.js"></script>
-
+  <!-- Debug console loads first so it can capture module errors/logs -->
   <script src="ar_debug_console.js"></script>
 
+  <!-- Application modules -->
+  <script type="module" src="ar_main.js"></script>
+  <script type="module" src="ar_overviewmap.js"></script>
+  <script type="module" src="ar_download.js"></script>
+  <script type="module" src="ar_start.js"></script>
+
   <link
     rel="stylesheet"
     href="https://unpkg.com/leaflet/dist/leaflet.css" />
 
   <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
 
-  <script src="ar_overviewmap.js"></script>
 
-  <script src="ar_download.js"></script>
 
 
   <!-- ============================================================