three v186

public/ar_download.js

 function downloadScene() {
-    const placedModels = getAllPlacedModels().map(model => {
-      const { lat, lng } = threeToLeaflet(model.position.x, model.position.z);
+  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,
@@ -8,10 +11,10 @@ function downloadScene() {
       scale: model.scale,
       lat: lat,
       lng: lng,
-      }
+    };
   });
 
-    console.log("Modelle: " + placedModels.length)
+  console.log("Modelle: " + placedModels.length);
   if (placedModels.length === 0) {
     showInfoDialog("Szene ist leer");
     return;
@@ -27,7 +30,7 @@ function downloadScene() {
     lat: geoLocation.latitude,
     lng: geoLocation.longitude,
     models: placedModels,
-    }
+  };
 
   const sceneData = JSON.stringify(data, null, 1);
   const blob = new Blob([sceneData], { type: "application/json" });
@@ -45,20 +48,20 @@ function downloadScene() {
 }
 
 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) {
+  fileInput.addEventListener("change", function (event) {
     const file = event.target.files[0];
-      const fileName = file ? file.name : "Keine Datei ausgewählt"
+    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) {
+    reader.onload = function (e) {
       try {
         const sceneData = JSON.parse(e.target.result);
         loadedData(sceneData, fileName);
@@ -71,3 +74,7 @@ function loadSceneFromFile(loadedData) {
   });
   fileInput.click();
 }
+
+/* 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>
 
 
   <!-- ============================================================