Update app.py

app.py

@@ -11,6 +11,7 @@ def load_aframe_and_extras():
     <script>
     let score = 0;
     let selectedEntity = null;
+
     AFRAME.registerComponent('draggable', {
       init: function () {
         this.el.addEventListener('mousedown', this.onMouseDown.bind(this));
@@ -59,15 +60,18 @@ def load_aframe_and_extras():
         }
       }
     });
+
     AFRAME.registerComponent('bouncing', {/* … */});
     AFRAME.registerComponent('moving-light', {/* … */});
+
     function moveCamera(view) {
       var rig = document.querySelector('#rig');
       var gw = 8, gh = 8;
       var center = {x: 0, y: 0, z: 0};
       var height = Math.max(gw, gh) * 1.5;
-      var distance = Math.max(gw, gh) * 1.5; // Increased distance to fit the entire tilemap
+      var distance = Math.max(gw, gh) * 2; // Further increased distance to ensure the entire tilemap is in view
       var pos;
+
       switch(view) {
         case 'top':
           pos = {x: center.x, y: height, z: center.z};
@@ -75,47 +79,89 @@ def load_aframe_and_extras():
           rig.setAttribute('rotation', {x: -90, y: 0, z: 0});
           break;
         case 'left':
-          pos = {x: -distance, y: height / 2, z: center.z};
+          pos = {x: -distance, y: height, z: center.z};
           rig.setAttribute('position', pos);
           rig.setAttribute('look-at', center);
           break;
         case 'right':
-          pos = {x: distance, y: height / 2, z: center.z};
+          pos = {x: distance, y: height, z: center.z};
           rig.setAttribute('position', pos);
           rig.setAttribute('look-at', center);
           break;
         case 'front':
-          pos = {x: center.x, y: height / 2, z: -distance};
+          pos = {x: center.x, y: height, z: -distance};
           rig.setAttribute('position', pos);
           rig.setAttribute('look-at', center);
           break;
         case 'back':
-          pos = {x: center.x, y: height / 2, z: distance};
+          pos = {x: center.x, y: height, z: distance};
           rig.setAttribute('position', pos);
           rig.setAttribute('look-at', center);
           break;
         case 'angle1':
-          pos = {x: -distance * 0.7, y: height, z: -distance * 0.7};
+          pos = {x: -distance, y: height, z: -distance};
           rig.setAttribute('position', pos);
           rig.setAttribute('look-at', center);
           break;
         case 'angle2':
-          pos = {x: distance * 0.7, y: height, z: -distance * 0.7};
+          pos = {x: distance, y: height, z: -distance};
           rig.setAttribute('position', pos);
           rig.setAttribute('look-at', center);
           break;
         case 'angle3':
-          pos = {x: -distance * 0.7, y: height, z: distance * 0.7};
+          pos = {x: -distance, y: height, z: distance};
           rig.setAttribute('position', pos);
           rig.setAttribute('look-at', center);
           break;
         case 'angle4':
-          pos = {x: distance * 0.7, y: height, z: distance * 0.7};
+          pos = {x: distance, y: height, z: distance};
           rig.setAttribute('position', pos);
           rig.setAttribute('look-at', center);
           break;
       }
     }
+
+    function flyCamera(action) {
+      var rig = document.querySelector('#rig');
+      var pos = rig.getAttribute('position');
+      var rot = rig.getAttribute('rotation');
+      var speed = 0.1, rSpeed = 2;
+
+      switch(action) {
+        case 'forward':
+          var dir = new THREE.Vector3(0, 0, -1);
+          dir.applyQuaternion(rig.object3D.quaternion);
+          pos.x += dir.x * speed;
+          pos.y += dir.y * speed;
+          pos.z += dir.z * speed;
+          break;
+        case 'backward':
+          var dir = new THREE.Vector3(0, 0, 1);
+          dir.applyQuaternion(rig.object3D.quaternion);
+          pos.x += dir.x * speed;
+          pos.y += dir.y * speed;
+          pos.z += dir.z * speed;
+          break;
+        case 'panLeft':
+          rot.y += rSpeed;
+          break;
+        case 'panRight':
+          rot.y -= rSpeed;
+          break;
+        case 'rotateLeft':
+          rot.y += rSpeed;
+          break;
+        case 'rotateRight':
+          rot.y -= rSpeed;
+          break;
+        case 'reset':
+          moveCamera('top');
+          return;
+      }
+      rig.setAttribute('position', pos);
+      rig.setAttribute('rotation', rot);
+    }
+
     function fireRaycast() {
       var cam = document.querySelector('[camera]');
       var dir = new THREE.Vector3(); cam.object3D.getWorldDirection(dir);
@@ -132,6 +178,7 @@ def load_aframe_and_extras():
         }
       }
     }
+
     document.addEventListener('keydown', e => {
       switch(e.key.toLowerCase()){
         case '1': moveCamera('top');    break;
@@ -143,7 +190,14 @@ def load_aframe_and_extras():
         case '7': moveCamera('angle2'); break;
         case '8': moveCamera('angle3'); break;
         case '9': moveCamera('angle4'); break;
-        case ' ': fireRaycast();        break;
+        case 'w': flyCamera('forward');  break;
+        case 'x': flyCamera('backward'); break;
+        case 'a': flyCamera('panLeft');  break;
+        case 'd': flyCamera('panRight'); break;
+        case 'q': flyCamera('rotateLeft'); break;
+        case 'e': flyCamera('rotateRight'); break;
+        case 's': flyCamera('reset');    break;
+        case ' ': fireRaycast();         break;
       }
     });
     </script>
@@ -191,22 +245,30 @@ def generate_tilemap(files, dirpath, gw=8, gh=8):
     assets += "</a-assets>"
 
     entities = ""
-    sx=-gw/2; sz=-gh/2
+    if vids:
+        # Use the first video as a large ground plane
+        v = vids[0]; s = Path(v).stem
+        entities += (f'<a-video src="#{s}" width="{gw}" height="{gh}" '
+                     f'rotation="-90 0 0" position="0 0.05 0" '
+                     'loop autoplay></a-video>')
+    else:
+        # Generate individual tiles if no video
+        sx = -gw/2; sz = -gh/2
+        for i in range(gw):
+          for j in range(gh):
+            x,y,z = sx+i,0,sz+j
+            if imgs:
+              img = random.choice(imgs); s = Path(img).stem
+              entities += (f'<a-plane src="#{s}" width="1" height="1" '
+                           f'rotation="-90 0 0" position="{x} 0 {z}"></a-plane>')
+    # Always generate models
+    sx = -gw/2; sz = -gh/2
     for i in range(gw):
       for j in range(gh):
         x,y,z = sx+i,0,sz+j
-        if imgs:
-          img=random.choice(imgs); s=Path(img).stem
-          entities += (f'<a-plane src="#{s}" width="1" height="1" '
-                       f'rotation="-90 0 0" position="{x} 0 {z}"></a-plane>')
         if models:
-          m=random.choice(models); ext=m.split('.')[-1]; s=Path(m).stem
-          entities += create_aframe_entity(s,ext,f"{x} 0 {z}")
-        if vids:
-          v=random.choice(vids); s=Path(v).stem
-          entities += (f'<a-video src="#{s}" width="1" height="1" '
-                       f'rotation="-90 0 0" position="{x} 0.1 {z}" '
-                       'class="raycastable" draggable></a-video>')
+          m = random.choice(models); ext = m.split('.')[-1]; s = Path(m).stem
+          entities += create_aframe_entity(s, ext, f"{x} 0 {z}")
     return assets, entities
 
 def main():
@@ -227,6 +289,19 @@ def main():
         cols[1].button("↙️ Angle 3", on_click=lambda: st.session_state.update({'camera_view': 'angle3'}))
         cols[2].button("↘️ Angle 4", on_click=lambda: st.session_state.update({'camera_view': 'angle4'}))
 
+        st.markdown("### ✈️ Flight Controls")
+        st.markdown("**Fly Camera** 🎮")
+        cols = st.columns(3)
+        cols[0].button("Q Rotate Left", on_click=lambda: st.session_state.update({'fly_action': 'rotateLeft'}))
+        cols[1].button("W Forward", on_click=lambda: st.session_state.update({'fly_action': 'forward'}))
+        cols[2].button("E Rotate Right", on_click=lambda: st.session_state.update({'fly_action': 'rotateRight'}))
+        cols = st.columns(3)
+        cols[0].button("A Pan Left", on_click=lambda: st.session_state.update({'fly_action': 'panLeft'}))
+        cols[1].button("S Reset", on_click=lambda: st.session_state.update({'fly_action': 'reset'}))
+        cols[2].button("D Pan Right", on_click=lambda: st.session_state.update({'fly_action': 'panRight'}))
+        cols = st.columns(1)
+        cols[0].button("X Backward", on_click=lambda: st.session_state.update({'fly_action': 'backward'}))
+
         st.markdown("### ➕ Add Media Files")
         ups = st.file_uploader("Add files (png, jpeg, obj, glb, mp4, etc.):", accept_multiple_files=True)
         st.markdown("### 📋 Uploaded Model Files")
@@ -277,11 +352,16 @@ def main():
     assets, ents = generate_tilemap(files, directory, 8, 8)
     scene += assets + ents + "</a-scene>"
 
-    cmd = st.session_state.get('camera_view', 'top')
-    if cmd:
-      scene += f"<script>moveCamera('{cmd}');</script>"
+    view_cmd = st.session_state.get('camera_view', 'top')
+    if view_cmd:
+      scene += f"<script>moveCamera('{view_cmd}');</script>"
       st.session_state.pop('camera_view', None)
 
+    fly_cmd = st.session_state.get('fly_action')
+    if fly_cmd:
+      scene += f"<script>flyCamera('{fly_cmd}');</script>"
+      st.session_state.pop('fly_action', None)
+
     loader = '<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-extras.loaders.min.js"></script>'
 
     st.components.v1.html(