Spaces:

ReikerXx
/

uex

Running

App Files Files Community

Reaperxxxx commited on Oct 14, 2025

Commit

5dad437

verified ·

1 Parent(s): e82e5a4

Update index.html

Browse files

Files changed (1) hide show

index.html +230 -89

index.html CHANGED Viewed

@@ -3,12 +3,13 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
-  <title>3D Map Viewer</title>
   <style>
     body {
       margin: 0;
       overflow: hidden;
       background: #000;
     }
     canvas {
       display: block;
@@ -28,10 +29,113 @@
       z-index: 100;
       font-size: 18px;
     }
   </style>
 </head>
 <body>
-  <div id="loading">Loading...</div>
   <script type="importmap">
     {
@@ -46,13 +150,17 @@
     import * as THREE from 'three';
     import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-    let scene, camera, renderer, modelLoaded = false;
-    let rotation = { x: 0, y: 0 };
-    let zoom = 5;
     function init() {
       scene = new THREE.Scene();
-      scene.background = new THREE.Color(0x111111);
       camera = new THREE.PerspectiveCamera(
         75,
@@ -60,121 +168,154 @@
         0.1,
         1000
       );
-      camera.position.z = zoom;
       renderer = new THREE.WebGLRenderer({ antialias: true });
       renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
       renderer.setSize(window.innerWidth, window.innerHeight);
       document.body.appendChild(renderer.domElement);
       // Lighting
-      scene.add(new THREE.AmbientLight(0xffffff, 1.2));
       const dirLight = new THREE.DirectionalLight(0xffffff, 1);
-      dirLight.position.set(10, 10, 10);
       scene.add(dirLight);
-      // Load map.glb
       const loader = new GLTFLoader();
       loader.load('./map.glb', (gltf) => {
-        const model = gltf.scene;
-        scene.add(model);
-        modelLoaded = true;
         document.getElementById('loading').style.display = 'none';
-        console.log('✅ Map loaded!');
       }, undefined, (error) => {
-        console.error('Error loading map:', error);
-        // Fallback: create test cube
-        const geometry = new THREE.BoxGeometry(2, 2, 2);
-        const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
-        const cube = new THREE.Mesh(geometry, material);
-        scene.add(cube);
-        modelLoaded = true;
-        document.getElementById('loading').textContent = 'Test Cube (map.glb not found)';
       });
-      // Mouse/touch controls
-      let isDragging = false;
-      let previousMousePosition = { x: 0, y: 0 };
-      renderer.domElement.addEventListener('mousedown', (e) => {
-        isDragging = true;
-        previousMousePosition = { x: e.clientX, y: e.clientY };
       });
-      renderer.domElement.addEventListener('mousemove', (e) => {
-        if (isDragging && modelLoaded) {
-          const deltaX = e.clientX - previousMousePosition.x;
-          const deltaY = e.clientY - previousMousePosition.y;
-          rotation.y += deltaX * 0.01;
-          rotation.x += deltaY * 0.01;
-          previousMousePosition = { x: e.clientX, y: e.clientY };
         }
       });
-      renderer.domElement.addEventListener('mouseup', () => {
-        isDragging = false;
       });
-      renderer.domElement.addEventListener('wheel', (e) => {
-        e.preventDefault();
-        zoom += e.deltaY * 0.01;
-        zoom = Math.max(1, Math.min(20, zoom));
       });
-      // Touch pinch to zoom
-      let lastDistance = 0;
-      renderer.domElement.addEventListener('touchmove', (e) => {
-        if (e.touches.length === 2) {
-          e.preventDefault();
-          const touch1 = e.touches[0];
-          const touch2 = e.touches[1];
-          const dx = touch1.clientX - touch2.clientX;
-          const dy = touch1.clientY - touch2.clientY;
-          const distance = Math.sqrt(dx * dx + dy * dy);
-          if (lastDistance > 0) {
-            const delta = distance - lastDistance;
-            zoom -= delta * 0.02;
-            zoom = Math.max(1, Math.min(20, zoom));
-          }
-          lastDistance = distance;
-        } else if (e.touches.length === 1) {
-          // Single finger drag
-          const touch = e.touches[0];
-          const deltaX = touch.clientX - previousMousePosition.x;
-          const deltaY = touch.clientY - previousMousePosition.y;
-          rotation.y += deltaX * 0.01;
-          rotation.x += deltaY * 0.01;
-          previousMousePosition = { x: touch.clientX, y: touch.clientY };
-        }
-      }, false);
-      renderer.domElement.addEventListener('touchend', () => {
-        lastDistance = 0;
       });
-      function animate() {
-        requestAnimationFrame(animate);
-        if (modelLoaded) {
-          camera.position.x = zoom * Math.sin(rotation.y);
-          camera.position.y = zoom * Math.sin(rotation.x);
-          camera.position.z = zoom * Math.cos(rotation.y);
-          camera.lookAt(0, 0, 0);
-        }
-        renderer.render(scene, camera);
-      }
-      animate();
-      window.addEventListener('resize', () => {
-        camera.aspect = window.innerWidth / window.innerHeight;
-        camera.updateProjectionMatrix();
-        renderer.setSize(window.innerWidth, window.innerHeight);
-      });
     }
     init();
   </script>
 </body>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+  <title>3D Garage Explorer</title>
   <style>
     body {
       margin: 0;
       overflow: hidden;
       background: #000;
+      font-family: Arial, sans-serif;
     }
     canvas {
       display: block;
       z-index: 100;
       font-size: 18px;
     }
+    #joystick {
+      position: fixed;
+      bottom: 30px;
+      left: 30px;
+      width: 120px;
+      height: 120px;
+      background: rgba(100, 100, 100, 0.3);
+      border: 2px solid #fff;
+      border-radius: 50%;
+      z-index: 50;
+    }
+    #joystickHandle {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 50%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      cursor: grab;
+    }
+    .button-group {
+      position: fixed;
+      right: 30px;
+      bottom: 30px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      z-index: 50;
+    }
+    .control-btn {
+      padding: 12px 20px;
+      background: rgba(0, 150, 255, 0.7);
+      border: 2px solid #0096ff;
+      color: white;
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 16px;
+      min-width: 80px;
+    }
+    .control-btn:active {
+      background: rgba(0, 150, 255, 1);
+    }
+    #coordinates {
+      position: fixed;
+      top: 20px;
+      left: 20px;
+      background: rgba(0, 0, 0, 0.8);
+      color: #0f0;
+      padding: 15px;
+      border-radius: 8px;
+      font-family: monospace;
+      font-size: 12px;
+      z-index: 50;
+      max-width: 300px;
+    }
+    .coord-input {
+      background: rgba(0, 50, 0, 0.8);
+      border: 1px solid #0f0;
+      color: #0f0;
+      padding: 8px;
+      border-radius: 4px;
+      font-family: monospace;
+      margin-top: 8px;
+      width: 100%;
+    }
+    .spawn-btn {
+      background: rgba(0, 150, 0, 0.7);
+      border: 1px solid #0f0;
+      color: #0f0;
+      padding: 8px;
+      border-radius: 4px;
+      margin-top: 8px;
+      cursor: pointer;
+    }
   </style>
 </head>
 <body>
+  <div id="loading">Loading Garage...</div>
+  <div id="joystick">
+    <div id="joystickHandle"></div>
+  </div>
+  <div class="button-group">
+    <button class="control-btn" id="upBtn">↑ Up</button>
+    <button class="control-btn" id="downBtn">↓ Down</button>
+  </div>
+  <div id="coordinates">
+    <div>Cube Position:</div>
+    <div>X: <span id="coordX">0.00</span></div>
+    <div>Y: <span id="coordY">0.00</span></div>
+    <div>Z: <span id="coordZ">0.00</span></div>
+    <input type="text" class="coord-input" id="spawnInput" placeholder="Paste spawn coord JSON">
+    <button class="spawn-btn" onclick="loadSpawn()">Set Spawn</button>
+  </div>
   <script type="importmap">
     {
     import * as THREE from 'three';
     import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+    let scene, camera, renderer, playerCube, garage;
+    let playerPos = { x: 0, y: 1, z: 0 };
+    let cameraDistance = 8;
+    let cameraHeight = 3;
+    let moveDirection = { x: 0, z: 0 };
+    let moveSpeed = 0.3;
     function init() {
       scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x1a1a2e);
+      scene.fog = new THREE.Fog(0x1a1a2e, 100, 300);
       camera = new THREE.PerspectiveCamera(
         75,
         0.1,
         1000
       );
       renderer = new THREE.WebGLRenderer({ antialias: true });
       renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
       renderer.setSize(window.innerWidth, window.innerHeight);
+      renderer.shadowMap.enabled = true;
       document.body.appendChild(renderer.domElement);
       // Lighting
+      scene.add(new THREE.AmbientLight(0xffffff, 0.6));
       const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+      dirLight.position.set(20, 20, 20);
+      dirLight.castShadow = true;
       scene.add(dirLight);
+      // Create player cube
+      const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
+      const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
+      playerCube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+      playerCube.position.set(playerPos.x, playerPos.y, playerPos.z);
+      playerCube.castShadow = true;
+      scene.add(playerCube);
+      // Load garage
       const loader = new GLTFLoader();
       loader.load('./map.glb', (gltf) => {
+        garage = gltf.scene;
+        scene.add(garage);
+        garage.traverse((child) => {
+          child.castShadow = true;
+          child.receiveShadow = true;
+        });
         document.getElementById('loading').style.display = 'none';
+        console.log('✅ Garage loaded!');
       }, undefined, (error) => {
+        console.error('Error loading garage:', error);
+        document.getElementById('loading').textContent = 'Error loading map.glb';
+      });
+      setupControls();
+      animate();
+      window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
       });
+    }
+    function setupControls() {
+      // Joystick
+      const joystick = document.getElementById('joystick');
+      const joystickHandle = document.getElementById('joystickHandle');
+      let isJoystickActive = false;
+      joystick.addEventListener('touchstart', (e) => {
+        isJoystickActive = true;
       });
+      joystick.addEventListener('touchmove', (e) => {
+        if (!isJoystickActive) return;
+        const touch = e.touches[0];
+        const rect = joystick.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const dx = touch.clientX - centerX;
+        const dy = touch.clientY - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const maxDistance = 50;
+        if (distance > 0) {
+          const angle = Math.atan2(dy, dx);
+          const limitedDistance = Math.min(distance, maxDistance);
+          joystickHandle.style.transform = `translate(calc(-50% + ${Math.cos(angle) * limitedDistance}px), calc(-50% + ${Math.sin(angle) * limitedDistance}px))`;
+          moveDirection.x = Math.cos(angle);
+          moveDirection.z = Math.sin(angle);
         }
       });
+      joystick.addEventListener('touchend', () => {
+        isJoystickActive = false;
+        joystickHandle.style.transform = 'translate(-50%, -50%)';
+        moveDirection.x = 0;
+        moveDirection.z = 0;
       });
+      // Up/Down buttons
+      document.getElementById('upBtn').addEventListener('touchstart', () => {
+        playerPos.y += 0.5;
       });
+      document.getElementById('downBtn').addEventListener('touchstart', () => {
+        playerPos.y = Math.max(0.5, playerPos.y - 0.5);
       });
+    }
+    function updateCoordinates() {
+      document.getElementById('coordX').textContent = playerPos.x.toFixed(2);
+      document.getElementById('coordY').textContent = playerPos.y.toFixed(2);
+      document.getElementById('coordZ').textContent = playerPos.z.toFixed(2);
+    }
+    function animate() {
+      requestAnimationFrame(animate);
+      // Update player position
+      playerPos.x += moveDirection.x * moveSpeed;
+      playerPos.z += moveDirection.z * moveSpeed;
+      playerCube.position.set(playerPos.x, playerPos.y, playerPos.z);
+      // Update camera (third person)
+      const cameraX = playerPos.x - moveDirection.x * cameraDistance;
+      const cameraZ = playerPos.z - moveDirection.z * cameraDistance;
+      camera.position.set(cameraX, playerPos.y + cameraHeight, cameraZ);
+      camera.lookAt(playerPos.x, playerPos.y + 0.5, playerPos.z);
+      updateCoordinates();
+      renderer.render(scene, camera);
     }
+    window.loadSpawn = function() {
+      try {
+        const input = document.getElementById('spawnInput').value;
+        const coords = JSON.parse(input);
+        playerPos.x = coords.x || 0;
+        playerPos.y = coords.y || 1;
+        playerPos.z = coords.z || 0;
+        alert('✅ Spawn point set!');
+      } catch (e) {
+        alert('❌ Invalid JSON format');
+      }
+    };
+    window.copySpawn = function() {
+      const spawnData = JSON.stringify(playerPos);
+      navigator.clipboard.writeText(spawnData);
+      alert('✅ Copied to clipboard: ' + spawnData);
+    };
+    // Add copy button functionality
+    const coordsDiv = document.getElementById('coordinates');
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'spawn-btn';
+    copyBtn.textContent = 'Copy Spawn';
+    copyBtn.onclick = window.copySpawn;
+    coordsDiv.appendChild(copyBtn);
     init();
   </script>
 </body>