From 12e75c9143cb436b171f050fc50340f1ac7bd59d Mon Sep 17 00:00:00 2001
From: "Abandoned Muse aka Tanya V."
 <42974769+Hax0rgurl@users.noreply.github.com>
Date: Sat, 17 Aug 2024 23:10:23 -0400
Subject: [PATCH] Update SkyBoxViewerWebApp.html

---
 docs/SkyBoxViewerWebApp.html | 213 +++++++++++++++++------------------
 1 file changed, 105 insertions(+), 108 deletions(-)

diff --git a/docs/SkyBoxViewerWebApp.html b/docs/SkyBoxViewerWebApp.html
index e4f94f6..036124d 100644
--- a/docs/SkyBoxViewerWebApp.html
+++ b/docs/SkyBoxViewerWebApp.html
@@ -105,29 +105,26 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
         let camera, scene, renderer, mesh;
-        let zoomLevel = 1;
         let isAutoRotating = false;
         let autoRotateSpeed = 0.002;
         const defaultFOV = 75;
         let texture;
 
+        const sphereRadius = 500;
+        let isUserInteracting = false;
+        let onPointerDownMouseX = 0, onPointerDownMouseY = 0;
+        let lon = 0, onPointerDownLon = 0;
+        let lat = 0, onPointerDownLat = 0;
+        let phi = 0, theta = 0;
+
         function init() {
             scene = new THREE.Scene();
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera = new THREE.PerspectiveCamera(defaultFOV, window.innerWidth / window.innerHeight, 0.1, 1000);
             
-            renderer = new THREE.WebGLRenderer();
+            renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             document.getElementById('viewer').appendChild(renderer.domElement);
 
-            scene.background = new THREE.Color(0xf0f0f0);
-            camera.position.set(0, 0, 50);
-
-            // Add a placeholder cube
-            const geometry = new THREE.BoxGeometry();
-            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-            mesh = new THREE.Mesh(geometry, material);
-            scene.add(mesh);
-
             // Event listeners
             document.getElementById('zoom-in').addEventListener('click', zoomIn);
             document.getElementById('zoom-out').addEventListener('click', zoomOut);
@@ -150,6 +147,7 @@
             viewer.addEventListener('touchstart', onPointerDown);
             viewer.addEventListener('touchmove', onPointerMove);
             viewer.addEventListener('touchend', onPointerUp);
+            viewer.addEventListener('wheel', onMouseWheel);
 
             // Device orientation
             if (window.DeviceOrientationEvent) {
@@ -164,90 +162,18 @@
         function animate() {
             requestAnimationFrame(animate);
             if (isAutoRotating) {
-                camera.rotateY(autoRotateSpeed);
+                lon += autoRotateSpeed;
             }
+            updateCameraRotation();
             renderer.render(scene, camera);
         }
 
-        function zoomIn() {
-            zoomLevel *= 1.1;
-            camera.position.z = 50 / zoomLevel;
-        }
-
-        function zoomOut() {
-            zoomLevel /= 1.1;
-            camera.position.z = 50 / zoomLevel;
-        }
-
-        function recordDepthMap() {
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.accept = 'image/*';
-            input.onchange = e => {
-                const file = e.target.files[0];
-                const reader = new FileReader();
-                reader.onload = function(event) {
-                    const img = new Image();
-                    img.onload = function() {
-                        const depthMap = createDepthMap(img);
-                        createMeshFromDepthMap(depthMap, img.width, img.height);
-                    }
-                    img.src = event.target.result;
-                }
-                reader.readAsDataURL(file);
-            }
-            input.click();
-        }
-
-        function createDepthMap(img) {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            canvas.width = img.width;
-            canvas.height = img.height;
-            ctx.drawImage(img, 0, 0);
-            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-            const depthMap = new Float32Array(imageData.width * imageData.height);
-
-            for (let i = 0; i < imageData.data.length; i += 4) {
-                const brightness = (imageData.data[i] + imageData.data[i+1] + imageData.data[i+2]) / 3;
-                depthMap[i/4] = brightness / 255;
-            }
-
-            return depthMap;
-        }
-
-        function createMeshFromDepthMap(depthMap, width, height) {
-            const geometry = new THREE.PlaneGeometry(width / 50, height / 50, width - 1, height - 1);
-            const vertices = geometry.attributes.position.array;
-
-            for (let i = 0, j = 2; i < depthMap.length; i++, j += 3) {
-                vertices[j] = depthMap[i] * 2; // Exaggerate depth for visibility
-            }
-
-            geometry.computeVertexNormals();
-
-            const material = new THREE.MeshPhongMaterial({
-                color: 0xcccccc,
-                wireframe: false,
-                side: THREE.DoubleSide,
-            });
-
-            if (mesh) scene.remove(mesh);
-            mesh = new THREE.Mesh(geometry, material);
-            scene.add(mesh);
-
-            // Add lighting
-            const light = new THREE.DirectionalLight(0xffffff, 1);
-            light.position.set(0, 0, 1).normalize();
-            scene.add(light);
-        }
-
         function loadTexture(url) {
             new THREE.TextureLoader().load(url, (loadedTexture) => {
                 texture = loadedTexture;
                 texture.mapping = THREE.EquirectangularReflectionMapping;
 
-                const geometry = new THREE.SphereGeometry(100, 60, 40);
+                const geometry = new THREE.SphereGeometry(sphereRadius, 60, 40);
                 geometry.scale(-1, 1, 1);
                 
                 const material = new THREE.MeshBasicMaterial({map: texture});
@@ -275,22 +201,15 @@
         }
 
         function resetView() {
-            camera.position.set(0, 0, 0);
-            camera.rotation.set(0, 0, 0);
-            camera.fov = defaultFOV;
-            camera.updateProjectionMatrix();
+            lon = 0;
+            lat = 0;
+            updateCameraRotation();
         }
 
-        let isUserInteracting = false;
-        let onPointerDownMouseX = 0, onPointerDownMouseY = 0;
-        let lon = 0, onPointerDownLon = 0;
-        let lat = 0, onPointerDownLat = 0;
-        let phi = 0, theta = 0;
-
         function onPointerDown(event) {
             isUserInteracting = true;
-            const clientX = event.clientX || event.touches[0].clientX;
-            const clientY = event.clientY || event.touches[0].clientY;
+            const clientX = event.clientX || (event.touches && event.touches[0].clientX);
+            const clientY = event.clientY || (event.touches && event.touches[0].clientY);
             onPointerDownMouseX = clientX;
             onPointerDownMouseY = clientY;
             onPointerDownLon = lon;
@@ -299,11 +218,10 @@
 
         function onPointerMove(event) {
             if (isUserInteracting) {
-                const clientX = event.clientX || event.touches[0].clientX;
-                const clientY = event.clientY || event.touches[0].clientY;
+                const clientX = event.clientX || (event.touches && event.touches[0].clientX);
+                const clientY = event.clientY || (event.touches && event.touches[0].clientY);
                 lon = (onPointerDownMouseX - clientX) * 0.1 + onPointerDownLon;
                 lat = (clientY - onPointerDownMouseY) * 0.1 + onPointerDownLat;
-                updateCameraRotation();
             }
         }
 
@@ -311,16 +229,22 @@
             isUserInteracting = false;
         }
 
+        function onMouseWheel(event) {
+            const fov = camera.fov + event.deltaY * 0.05;
+            camera.fov = THREE.MathUtils.clamp(fov, 10, 75);
+            camera.updateProjectionMatrix();
+        }
+
         function updateCameraRotation() {
             lat = Math.max(-85, Math.min(85, lat));
             phi = THREE.MathUtils.degToRad(90 - lat);
             theta = THREE.MathUtils.degToRad(lon);
-            camera.target = new THREE.Vector3(
-                500 * Math.sin(phi) * Math.cos(theta),
-                500 * Math.cos(phi),
-                500 * Math.sin(phi) * Math.sin(theta)
-            );
-            camera.lookAt(camera.target);
+
+            camera.position.x = sphereRadius * Math.sin(phi) * Math.cos(theta);
+            camera.position.y = sphereRadius * Math.cos(phi);
+            camera.position.z = sphereRadius * Math.sin(phi) * Math.sin(theta);
+
+            camera.lookAt(scene.position);
         }
 
         function handleFileUpload(event) {
@@ -374,6 +298,79 @@
             }
         }
 
+        function zoomIn() {
+            camera.fov = Math.max(camera.fov - 5, 10);
+            camera.updateProjectionMatrix();
+        }
+
+        function zoomOut() {
+            camera.fov = Math.min(camera.fov + 5, 75);
+            camera.updateProjectionMatrix();
+        }
+
+        function recordDepthMap() {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'image/*';
+            input.onchange = e => {
+                const file = e.target.files[0];
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    const img = new Image();
+                    img.onload = function() {
+                        const depthMap = createDepthMap(img);
+                        createMeshFromDepthMap(depthMap, img.width, img.height);
+                    }
+                    img.src = event.target.result;
+                }
+                reader.readAsDataURL(file);
+            }
+            input.click();
+        }
+
+        function createDepthMap(img) {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const depthMap = new Float32Array(imageData.width * imageData.height);
+
+            for (let i = 0; i < imageData.data.length; i += 4) {
+                const brightness = (imageData.data[i] + imageData.data[i+1] + imageData.data[i+2]) / 3;
+                depthMap[i/4] = brightness / 255;
+            }
+
+            return depthMap;
+        }
+
+        function createMeshFromDepthMap(depthMap, width, height) {
+            const geometry = new THREE.PlaneGeometry(width / 50, height / 50, width - 1, height - 1);
+            const vertices = geometry.attributes.position.array;
+
+            for (let i = 0, j = 2; i < depthMap.length; i++, j += 3) {
+                vertices[j] = depthMap[i] * 2; // Exaggerate depth for visibility
+            }
+
+            geometry.computeVertexNormals();
+
+            const material = new THREE.MeshPhongMaterial({
+                color: 0xcccccc,
+                wireframe: false,
+                side: THREE.DoubleSide,
+            });
+
+            if (mesh) scene.remove(mesh);
+            mesh = new THREE.Mesh(geometry, material);
+            scene.add(mesh);
+
+            // Add lighting
+            const light = new THREE.DirectionalLight(0xffffff, 1);
+            light.position.set(0, 0, 1).normalize();
+            scene.add(light);
+        }
+
         init();
     </script>
 </body>