Update app.py

app.py

@@ -71,8 +71,8 @@ def load_aframe_and_extras():
       var gw = 8, gh = 8;
       var center = {x: 0, y: 0, z: 0};
       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 lowHeight = 3; // y=3 for closer views
+      var quadrantOffset = Math.max(gw, gh) / 4; // 2 units to center on quadrants
       var pos, rot;
 
       rot = {x: -90, y: 0, z: 0}; // Always top-down view
@@ -82,28 +82,28 @@ def load_aframe_and_extras():
           pos = {x: center.x, y: height, z: center.z};
           break;
         case 'left':
-          pos = {x: -offset, y: lowHeight, z: center.z};
+          pos = {x: -quadrantOffset, y: lowHeight, z: center.z}; // Center on left side
           break;
         case 'right':
-          pos = {x: offset, y: lowHeight, z: center.z};
+          pos = {x: quadrantOffset, y: lowHeight, z: center.z}; // Center on right side
           break;
         case 'front':
-          pos = {x: center.x, y: lowHeight, z: -offset};
+          pos = {x: center.x, y: lowHeight, z: -quadrantOffset}; // Center on top side
           break;
         case 'back':
-          pos = {x: center.x, y: lowHeight, z: offset};
+          pos = {x: center.x, y: lowHeight, z: quadrantOffset}; // Center on bottom side
           break;
         case 'angle1':
-          pos = {x: -offset, y: lowHeight, z: -offset};
+          pos = {x: -quadrantOffset, y: lowHeight, z: -quadrantOffset}; // Top-left quadrant
           break;
         case 'angle2':
-          pos = {x: offset, y: lowHeight, z: -offset};
+          pos = {x: quadrantOffset, y: lowHeight, z: -quadrantOffset}; // Top-right quadrant
           break;
         case 'angle3':
-          pos = {x: -offset, y: lowHeight, z: offset};
+          pos = {x: -quadrantOffset, y: lowHeight, z: quadrantOffset}; // Bottom-left quadrant
           break;
         case 'angle4':
-          pos = {x: offset, y: lowHeight, z: offset};
+          pos = {x: quadrantOffset, y: lowHeight, z: quadrantOffset}; // Bottom-right quadrant
           break;
       }
       rig.setAttribute('position', pos);
@@ -117,13 +117,21 @@ def load_aframe_and_extras():
 
       switch(action) {
         case 'forward':
-          velocity.z = Math.max(velocity.z - accel, -maxSpeed);
+          var cam = document.querySelector('[camera]');
+          var dir = new THREE.Vector3();
+          cam.object3D.getWorldDirection(dir); // Raycast direction (downward for top-down view)
+          var pos = rig.getAttribute('position');
+          pos.x += dir.x * 0.1;
+          pos.y += dir.y * 0.1;
+          pos.z += dir.z * 0.1;
+          rig.setAttribute('position', pos);
           break;
         case 'backward':
           velocity.z = Math.min(velocity.z + accel, maxSpeed);
           break;
         case 'stop':
           velocity = {x: 0, y: 0, z: 0};
+          moveCamera('center');
           break;
         case 'rollCCW':
           rot.z += rSpeed;
@@ -131,10 +139,6 @@ def load_aframe_and_extras():
         case 'rollCW':
           rot.z -= rSpeed;
           break;
-        case 'reset':
-          moveCamera('center');
-          velocity = {x: 0, y: 0, z: 0};
-          return;
       }
       rig.setAttribute('rotation', rot);
     }
@@ -259,19 +263,19 @@ def main():
     st.set_page_config(layout="wide")
     with st.sidebar:
         st.markdown("### 🧭 Camera Views")
-        st.markdown("**Select View** 📷")
+        st.markdown("**Select Quadrant** 📷")
         cols = st.columns(3)
-        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[0].button("↖️ Top-Left", on_click=lambda: st.session_state.update({'camera_view': 'angle1'}))
+        cols[1].button("⬆️ Top", on_click=lambda: st.session_state.update({'camera_view': 'front'}))
+        cols[2].button("↗️ Top-Right", on_click=lambda: st.session_state.update({'camera_view': 'angle2'}))
         cols = st.columns(3)
-        cols[0].button("⬆️ Front", on_click=lambda: st.session_state.update({'camera_view': 'front'}))
-        cols[1].button("⬇️ Back", on_click=lambda: st.session_state.update({'camera_view': 'back'}))
-        cols[2].button("↖️ Angle 1", on_click=lambda: st.session_state.update({'camera_view': 'angle1'}))
+        cols[0].button("⬅️ Left", on_click=lambda: st.session_state.update({'camera_view': 'left'}))
+        cols[1].button("🔳 Center", on_click=lambda: st.session_state.update({'camera_view': 'center'}))
+        cols[2].button("➡️ Right", on_click=lambda: st.session_state.update({'camera_view': 'right'}))
         cols = st.columns(3)
-        cols[0].button("↗️ Angle 2", on_click=lambda: st.session_state.update({'camera_view': 'angle2'}))
-        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'}))
+        cols[0].button("↙️ Bottom-Left", on_click=lambda: st.session_state.update({'camera_view': 'angle3'}))
+        cols[1].button("⬇️ Bottom", on_click=lambda: st.session_state.update({'camera_view': 'back'}))
+        cols[2].button("↘️ Bottom-Right", on_click=lambda: st.session_state.update({'camera_view': 'angle4'}))
 
         st.markdown("### ➕ Add Media Files")
         ups = st.file_uploader("Add files (png, jpeg, obj, glb, mp4, etc.):", accept_multiple_files=True)