3D-AFrame-VR

Running

App Files Files Community

awacke1 commited on 19 days ago

Commit

5f40a57

verified ·

1 Parent(s): 86942ee

Update app.py

Browse files

Files changed (1) hide show

app.py +36 -40

app.py CHANGED Viewed

@@ -17,39 +17,42 @@ def scan_assets():
         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',"
@@ -58,8 +61,7 @@ def main():
     else:
         ground_mat = "ground.setAttribute('material','color: #228B22');"
-    # --- The A-Frame HTML template ---
-    html_template = """
     <!DOCTYPE html>
     <html>
     <head>
@@ -92,16 +94,16 @@ def main():
           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++) {{
@@ -109,7 +111,7 @@ def main():
             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);
@@ -119,19 +121,21 @@ def main():
             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);
@@ -145,14 +149,6 @@ def main():
     </html>
     """
-    html = html_template.format(
-        assets_html=assets_html,
-        texture_list=texture_list,
-        model_list=model_list,
-        grid_size=grid_size,
-        ground_mat=ground_mat
-    )
     st.components.v1.html(html, height=600, scrolling=False)
 if __name__ == "__main__":

         if f.lower().endswith(img_exts)
         and any(tag in f.lower() for tag in ("bump", "normal"))
     ]
+    model_files = [
         f for f in files
         if f.lower().endswith((".glb", ".gltf", ".obj"))
     ]
+    return textures, bump_maps, model_files
 def main():
+    st.title("🔳 A-Frame Tilemap with Mixed 3D Models")
     grid_size = st.sidebar.slider("Grid Size", min_value=1, max_value=20, value=10)
+    textures, bump_maps, model_files = scan_assets()
+    if not textures or not model_files:
+        st.warning("⚠️ Add at least one texture **and** one `.glb`/`.obj` file to this folder.")
         return
+    # --- Build <a-assets> entries ---
     asset_tags = []
     for i, tex in enumerate(textures):
         asset_tags.append(f'<img id="tex{i}" src="{tex}">')
     if bump_maps:
         asset_tags.append(f'<img id="grassBump" src="{bump_maps[0]}">')
+    models_info = []
+    for i, fname in enumerate(model_files):
+        ext = os.path.splitext(fname)[1].lower()
+        # strip the dot for ID
+        asset_tags.append(f'<a-asset-item id="model{i}" src="{fname}"></a-asset-item>')
+        models_info.append({"id": f"#model{i}", "ext": ext})
     assets_html = "\n          ".join(asset_tags)
     texture_list = ", ".join(f'"#tex{i}"' for i in range(len(textures)))
+    # JS array of model objects
+    model_js_array = ", ".join(
+        f'{{id:"{m["id"]}", ext:"{m["ext"]}"}}' for m in models_info
+    )
+    # ground material JS
     if bump_maps:
         ground_mat = (
             "ground.setAttribute('material',"
     else:
         ground_mat = "ground.setAttribute('material','color: #228B22');"
+    html = f"""
     <!DOCTYPE html>
     <html>
     <head>
           position="0 {grid_size} {grid_size}">
         </a-entity>
+        <!-- Container for 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_js_array}];
         var grid     = {grid_size};
         for (var i = 0; i < grid; i++) {{
             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('position', x + ' 0 ' + z);
             tilemap.appendChild(tile);
+            // Random model
+            var m = models[Math.floor(Math.random() * models.length)];
+            var ent = document.createElement('a-entity');
+            if (m.ext === '.obj') {{
+              ent.setAttribute('obj-model', 'obj: ' + m.id);
+            }} else {{
+              ent.setAttribute('gltf-model', m.id);
+            }}
+            ent.setAttribute('scale', '0.5 0.5 0.5');
+            ent.setAttribute('position', x + ' 0.5 ' + z);
+            tilemap.appendChild(ent);
           }}
         }}
+        // Ground plane
         var ground = document.createElement('a-plane');
         ground.setAttribute('width', grid * 2);
         ground.setAttribute('height', grid * 2);
     </html>
     """
     st.components.v1.html(html, height=600, scrolling=False)
 if __name__ == "__main__":