Update app.py

app.py

@@ -7,7 +7,6 @@ def load_aframe_and_extras():
     return """
     <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
     <script>
     let score = 0;
     let selectedEntity = null;
@@ -68,57 +67,50 @@ 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;
-      var distance = Math.max(gw, gh) * 2; // Further increased distance to ensure the entire tilemap is in view
-      var pos;
+      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 pos, rot;
 
       switch(view) {
         case 'top':
           pos = {x: center.x, y: height, z: center.z};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('rotation', {x: -90, y: 0, z: 0});
+          rot = {x: -90, y: 0, z: 0};
           break;
         case 'left':
           pos = {x: -distance, y: height, z: center.z};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('look-at', center);
+          rot = {x: 0, y: 90, z: 0}; // Face right (towards center), y-axis up
           break;
         case 'right':
           pos = {x: distance, y: height, z: center.z};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('look-at', center);
+          rot = {x: 0, y: -90, z: 0}; // Face left (towards center), y-axis up
           break;
         case 'front':
           pos = {x: center.x, y: height, z: -distance};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('look-at', center);
+          rot = {x: 0, y: 0, z: 0}; // Face forward (towards center), y-axis up
           break;
         case 'back':
           pos = {x: center.x, y: height, z: distance};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('look-at', center);
+          rot = {x: 0, y: 180, z: 0}; // Face backward (towards center), y-axis up
           break;
         case 'angle1':
           pos = {x: -distance, y: height, z: -distance};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('look-at', center);
+          rot = {x: 0, y: 45, z: 0}; // Face towards center from top-left corner
           break;
         case 'angle2':
           pos = {x: distance, y: height, z: -distance};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('look-at', center);
+          rot = {x: 0, y: -45, z: 0}; // Face towards center from top-right corner
           break;
         case 'angle3':
           pos = {x: -distance, y: height, z: distance};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('look-at', center);
+          rot = {x: 0, y: 135, z: 0}; // Face towards center from bottom-left corner
           break;
         case 'angle4':
           pos = {x: distance, y: height, z: distance};
-          rig.setAttribute('position', pos);
-          rig.setAttribute('look-at', center);
+          rot = {x: 0, y: -135, z: 0}; // Face towards center from bottom-right corner
           break;
       }
+      rig.setAttribute('position', pos);
+      rig.setAttribute('rotation', rot);
     }
 
     function flyCamera(action) {
@@ -246,13 +238,11 @@ def generate_tilemap(files, dirpath, gw=8, gh=8):
 
     entities = ""
     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):
@@ -261,7 +251,6 @@ def generate_tilemap(files, dirpath, gw=8, gh=8):
               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):