Update app.py

app.py

@@ -1,129 +1,159 @@
 import streamlit as st
-import os, base64, shutil, random
-from pathlib import Path
+import os
+import random
 
 @st.cache_data
-def load_aframe_and_extras():
-    return """
-    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
-    <script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
-    <script>
-    let score = 0;
-    AFRAME.registerComponent('draggable', {
-      init: function () {
-        this.el.setAttribute('class', 'raycastable');
-        this.el.setAttribute('cursor-listener', '');
-        this.dragHandler = this.dragMove.bind(this);
-        this.el.sceneEl.addEventListener('mousemove', this.dragHandler);
-        this.el.addEventListener('mousedown', this.onDragStart.bind(this));
-        this.el.addEventListener('mouseup', this.onDragEnd.bind(this));
-        this.camera = document.querySelector('[camera]');
-      },
-      remove: function () {
-        this.el.removeAttribute('cursor-listener');
-        this.el.sceneEl.removeEventListener('mousemove', this.dragHandler);
-      },
-      onDragStart: function (evt) {
-        this.isDragging = true;
-        this.el.emit('dragstart');
-      },
-      onDragEnd: function (evt) {
-        this.isDragging = false;
-        this.el.emit('dragend');
-      },
-      dragMove: function (evt) {
-        if (!this.isDragging) return;
-        let mouseX = evt.clientX / window.innerWidth * 2 - 1;
-        let mouseY = -(evt.clientY / window.innerHeight * 2) + 1;
-        let position = new THREE.Vector3(mouseX, mouseY, -5);
-        position.unproject(this.camera.components.camera.camera);
-        let direction = position.sub(this.camera.object3D.position).normalize();
-        let distance = -this.camera.object3D.position.z / direction.z;
-        let newPosition = this.camera.object3D.position.clone().add(direction.multiplyScalar(distance));
-        this.el.setAttribute('position', {x: newPosition.x, y: newPosition.y, z: this.el.getAttribute('position').z});
-      }
-    });
-    AFRAME.registerComponent('cursor-listener', {
-      init: function () {
-        this.el.addEventListener('mouseenter', function (evt) {
-          this.setAttribute('material', {color: 'red'});
-        });
-        this.el.addEventListener('mouseleave', function (evt) {
-          this.setAttribute('material', {color: 'blue'});
-        });
-        this.el.addEventListener('click', function (evt) {
-          score++;
-          document.getElementById('score').setAttribute('value', 'Score: ' + score);
-        });
-      }
-    });
-    </script>
+def scan_assets():
+    """Finds all textures, bump maps, and 3D models in the current folder."""
+    img_exts = (".jpg", ".jpeg", ".png", ".gif")
+    files = [f for f in os.listdir() if os.path.isfile(f)]
+    textures = [
+        f for f in files
+        if f.lower().endswith(img_exts)
+        and not any(tag in f.lower() for tag in ("bump", "normal"))
+    ]
+    bump_maps = [
+        f for f in files
+        if f.lower().endswith(img_exts)
+        and any(tag in f.lower() for tag in ("bump", "normal"))
+    ]
+    models = [
+        f for f in files
+        if f.lower().endswith((".glb", ".gltf", ".obj"))
+    ]
+    return textures, bump_maps, models
+
+def main():
+    st.title("🔳 A-Frame Tilemap with Random Models")
+    grid_size = st.sidebar.slider("Grid Size", min_value=1, max_value=20, value=10)
+    textures, bump_maps, models = scan_assets()
+
+    if not textures or not models:
+        st.warning("⚠️ Please add at least one texture image and one .glb/.obj file to this folder.")
+        return
+
+    # --- Prepare <a-assets> tags ---
+    asset_tags = []
+    for i, tex in enumerate(textures):
+        asset_tags.append(f'<img id="tex{i}" src="{tex}">')
+    if bump_maps:
+        # just pick the first bump map
+        asset_tags.append(f'<img id="grassBump" src="{bump_maps[0]}">')
+    for i, mdl in enumerate(models):
+        asset_tags.append(f'<a-asset-item id="model{i}" src="{mdl}"></a-asset-item>')
+
+    assets_html = "\n          ".join(asset_tags)
+
+    # JavaScript arrays of IDs
+    texture_list = ", ".join(f'"#tex{i}"' for i in range(len(textures)))
+    model_list   = ", ".join(f'"model{i}"' for i in range(len(models)))
+    has_bump_js  = "true" if bump_maps else "false"
+
+    # Material setup for ground
+    if bump_maps:
+        ground_mat = (
+            "ground.setAttribute('material',"
+            "'color: #228B22; bumpMap: #grassBump; bumpScale: 0.2');"
+        )
+    else:
+        ground_mat = "ground.setAttribute('material','color: #228B22');"
+
+    # --- The A-Frame HTML template ---
+    html_template = """
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8">
+      <title>Tilemap Scene</title>
+      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://unpkg.com/[email protected]/dist/aframe-extras.loaders.min.js"></script>
+    </head>
+    <body>
+      <a-scene>
+        <a-assets>
+          {assets_html}
+        </a-assets>
+
+        <!-- Lighting -->
+        <a-entity light="type: ambient; color: #BBB"></a-entity>
+        <a-entity
+          light="type: directional; color: #FFF; intensity: 0.6"
+          position="1 1 0">
+        </a-entity>
+        <a-entity
+          light="type: point; intensity: 0.6"
+          position="0 5 0">
+        </a-entity>
+
+        <!-- Camera -->
+        <a-entity
+          camera
+          look-controls
+          position="0 {grid_size} {grid_size}">
+        </a-entity>
+
+        <!-- Container for dynamic tiles & models -->
+        <a-entity id="tilemap"></a-entity>
+      </a-scene>
+
+      <script>
+      document.addEventListener('DOMContentLoaded', function() {{
+        var scene   = document.querySelector('a-scene');
+        var tilemap = document.querySelector('#tilemap');
+        var textures = [{texture_list}];
+        var models   = [{model_list}];
+        var grid     = {grid_size};
+
+        for (var i = 0; i < grid; i++) {{
+          for (var j = 0; j < grid; j++) {{
+            var x = i - grid/2;
+            var z = j - grid/2;
+
+            // --- Base tile ---
+            var tile = document.createElement('a-box');
+            tile.setAttribute('width', 1);
+            tile.setAttribute('height', 0.1);
+            tile.setAttribute('depth', 1);
+            var tex = textures[Math.floor(Math.random() * textures.length)];
+            tile.setAttribute('material', 'src: ' + tex + '; repeat: 1 1');
+            tile.setAttribute('position', x + ' 0 ' + z);
+            tilemap.appendChild(tile);
+
+            // --- Random model ---
+            var mi = Math.floor(Math.random() * models.length);
+            var mid = models[mi];
+            var modelEl = document.createElement('a-entity');
+            // load both .glb/.gltf and .obj via gltf-model (requires extras loader)
+            modelEl.setAttribute('gltf-model', '#' + mid);
+            modelEl.setAttribute('scale', '0.5 0.5 0.5');
+            modelEl.setAttribute('position', x + ' 0.5 ' + z);
+            tilemap.appendChild(modelEl);
+          }}
+        }}
+
+        // --- Ground plane ---
+        var ground = document.createElement('a-plane');
+        ground.setAttribute('width', grid * 2);
+        ground.setAttribute('height', grid * 2);
+        ground.setAttribute('rotation', '-90 0 0');
+        {ground_mat}
+        ground.setAttribute('position', '0 -0.05 0');
+        scene.insertBefore(ground, scene.firstChild);
+      }});
+      </script>
+    </body>
+    </html>
     """
 
-def create_environment(scene):
-    sky = scene.entity(
-        geometry="primitive: sphere; radius: 5000",
-        material="color: #ADD8E6; shader: flat; side: back" # Light blue sky
-    )
-    ground = scene.entity(
-        geometry="primitive: plane; width: 100; height: 100",
-        material="color: #7CFC00; side: double", # Lawn green ground
-        rotation="-90 0 0"
+    html = html_template.format(
+        assets_html=assets_html,
+        texture_list=texture_list,
+        model_list=model_list,
+        grid_size=grid_size,
+        ground_mat=ground_mat
     )
-    return sky, ground
-
-def create_drag_target(scene, x, y, z, color='blue'):
-    target = scene.entity(
-        geometry=f"primitive: box; width: 1; height: 1; depth: 1",
-        material=f"color: {color}",
-        position=f"{x} {y} {z}",
-        draggable=""
-    )
-    return target
 
-def main():
-    st.title("Interactive A-Frame Scene")
-
-    html_string = f"""
-        <!DOCTYPE html>
-        <html>
-          <head>
-            <meta charset="utf-8">
-            <title>A-Frame Example</title>
-            {load_aframe_and_extras()}
-          </head>
-          <body>
-            <a-scene cursor="rayOrigin: mouse" raycaster="objects: .raycastable">
-              <a-camera position="0 1.6 0"></a-camera>
-              <a-entity id="environment"></a-entity>
-              <a-text id="score" value="Score: 0" position="-2 2 -3" color="black"></a-text>
-              <a-entity id="drag-targets"></a-entity>
-            </a-scene>
-          </body>
-        </html>
-        """
-
-    st.components.v1.html(html_string, height=600, scrolling=False)
-
-    with st.sidebar:
-        st.header("Scene Controls")
-        num_targets = st.slider("Number of Drag Targets", min_value=1, max_value=10, value=3)
-
-        scene = st.components.v1 # This won't work as expected for direct A-Frame manipulation
-
-        environment = scene.get("environment") # This also won't work
-
-        drag_targets = scene.get("drag-targets") # And this won't work
-
-        if environment is not None:
-            create_environment(environment) # This will likely cause errors
-
-        if drag_targets is not None:
-            for i in range(num_targets):
-                x = random.uniform(-5, 5)
-                y = 1
-                z = random.uniform(-5, -2)
-                create_drag_target(drag_targets, x, y, z) # Potential error here too
+    st.components.v1.html(html, height=600, scrolling=False)
 
 if __name__ == "__main__":
-    main()
+    main()