Update app.py

app.py

@@ -10,6 +10,9 @@ def load_aframe_and_extras():
     <script>
     let score = 0;
     let selectedEntity = null;
+    let velocity = {x: 0, y: 0, z: 0};
+    let maxSpeed = 0.5;
+    let accel = 0.02;
 
     AFRAME.registerComponent('draggable', {
       init: function () {
@@ -67,46 +70,40 @@ def load_aframe_and_extras():
       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; // y=12, high enough to see models
-      var distance = Math.max(gw, gh) * 2; // x/z distance=16, far enough to fit the tilemap
+      var height = Math.max(gw, gh) * 1.5; // y=12 for center view
+      var lowHeight = height / 2; // y=6 for closer views
+      var offset = Math.max(gw, gh); // x/z offset=8 to position at the edge
       var pos, rot;
 
+      rot = {x: -90, y: 0, z: 0}; // Always top-down view
+
       switch(view) {
-        case 'top':
+        case 'center':
           pos = {x: center.x, y: height, z: center.z};
-          rot = {x: -90, y: 0, z: 0};
           break;
         case 'left':
-          pos = {x: -distance, y: height, z: center.z};
-          rot = {x: 0, y: 90, z: 0}; // Face right (towards center), y-axis up
+          pos = {x: -offset, y: lowHeight, z: center.z};
           break;
         case 'right':
-          pos = {x: distance, y: height, z: center.z};
-          rot = {x: 0, y: -90, z: 0}; // Face left (towards center), y-axis up
+          pos = {x: offset, y: lowHeight, z: center.z};
           break;
         case 'front':
-          pos = {x: center.x, y: height, z: -distance};
-          rot = {x: 0, y: 0, z: 0}; // Face forward (towards center), y-axis up
+          pos = {x: center.x, y: lowHeight, z: -offset};
           break;
         case 'back':
-          pos = {x: center.x, y: height, z: distance};
-          rot = {x: 0, y: 180, z: 0}; // Face backward (towards center), y-axis up
+          pos = {x: center.x, y: lowHeight, z: offset};
           break;
         case 'angle1':
-          pos = {x: -distance, y: height, z: -distance};
-          rot = {x: 0, y: 45, z: 0}; // Face towards center from top-left corner
+          pos = {x: -offset, y: lowHeight, z: -offset};
           break;
         case 'angle2':
-          pos = {x: distance, y: height, z: -distance};
-          rot = {x: 0, y: -45, z: 0}; // Face towards center from top-right corner
+          pos = {x: offset, y: lowHeight, z: -offset};
           break;
         case 'angle3':
-          pos = {x: -distance, y: height, z: distance};
-          rot = {x: 0, y: 135, z: 0}; // Face towards center from bottom-left corner
+          pos = {x: -offset, y: lowHeight, z: offset};
           break;
         case 'angle4':
-          pos = {x: distance, y: height, z: distance};
-          rot = {x: 0, y: -135, z: 0}; // Face towards center from bottom-right corner
+          pos = {x: offset, y: lowHeight, z: offset};
           break;
       }
       rig.setAttribute('position', pos);
@@ -115,45 +112,45 @@ def load_aframe_and_extras():
 
     function flyCamera(action) {
       var rig = document.querySelector('#rig');
-      var pos = rig.getAttribute('position');
       var rot = rig.getAttribute('rotation');
-      var speed = 0.1, rSpeed = 2;
+      var 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;
+          velocity.z = Math.max(velocity.z - accel, -maxSpeed);
           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;
+          velocity.z = Math.min(velocity.z + accel, maxSpeed);
           break;
-        case 'panLeft':
-          rot.y += rSpeed;
+        case 'stop':
+          velocity = {x: 0, y: 0, z: 0};
           break;
-        case 'panRight':
-          rot.y -= rSpeed;
+        case 'rollCCW':
+          rot.z += rSpeed;
           break;
-        case 'rotateLeft':
-          rot.y += rSpeed;
-          break;
-        case 'rotateRight':
-          rot.y -= rSpeed;
+        case 'rollCW':
+          rot.z -= rSpeed;
           break;
         case 'reset':
-          moveCamera('top');
+          moveCamera('center');
+          velocity = {x: 0, y: 0, z: 0};
           return;
       }
-      rig.setAttribute('position', pos);
       rig.setAttribute('rotation', rot);
     }
 
+    function updateCameraPosition() {
+      var rig = document.querySelector('#rig');
+      var pos = rig.getAttribute('position');
+      pos.x += velocity.x;
+      pos.y += velocity.y;
+      pos.z += velocity.z;
+      rig.setAttribute('position', pos);
+      requestAnimationFrame(updateCameraPosition);
+    }
+
+    requestAnimationFrame(updateCameraPosition);
+
     function fireRaycast() {
       var cam = document.querySelector('[camera]');
       var dir = new THREE.Vector3(); cam.object3D.getWorldDirection(dir);
@@ -173,7 +170,7 @@ def load_aframe_and_extras():
 
     document.addEventListener('keydown', e => {
       switch(e.key.toLowerCase()){
-        case '1': moveCamera('top');    break;
+        case '1': moveCamera('center'); break;
         case '2': moveCamera('left');   break;
         case '3': moveCamera('right');  break;
         case '4': moveCamera('front');  break;
@@ -184,11 +181,9 @@ def load_aframe_and_extras():
         case '9': moveCamera('angle4'); 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 's': flyCamera('stop');     break;
+        case 'q': flyCamera('rollCCW');  break;
+        case 'e': flyCamera('rollCW');   break;
         case ' ': fireRaycast();         break;
       }
     });
@@ -266,7 +261,7 @@ def main():
         st.markdown("### 🧭 Camera Views")
         st.markdown("**Select View** 📷")
         cols = st.columns(3)
-        cols[0].button("🔝 Top", on_click=lambda: st.session_state.update({'camera_view': 'top'}))
+        cols[0].button("🔳 Center", on_click=lambda: st.session_state.update({'camera_view': 'center'}))
         cols[1].button("⬅️ Left", on_click=lambda: st.session_state.update({'camera_view': 'left'}))
         cols[2].button("➡️ Right", on_click=lambda: st.session_state.update({'camera_view': 'right'}))
         cols = st.columns(3)
@@ -278,19 +273,6 @@ 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")
@@ -341,7 +323,7 @@ def main():
     assets, ents = generate_tilemap(files, directory, 8, 8)
     scene += assets + ents + "</a-scene>"
 
-    view_cmd = st.session_state.get('camera_view', 'top')
+    view_cmd = st.session_state.get('camera_view', 'center')
     if view_cmd:
       scene += f"<script>moveCamera('{view_cmd}');</script>"
       st.session_state.pop('camera_view', None)