Spaces:
Running
Running
| import streamlit as st | |
| import os, base64, shutil, random | |
| from pathlib import Path | |
| 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> | |
| let score = 0; | |
| AFRAME.registerComponent('draggable', { | |
| // ... (previous draggable component code) | |
| }); | |
| AFRAME.registerComponent('bouncing', { | |
| schema: { | |
| speed: {type: 'vec3', default: {x: 0.1, y: 0.1, z: 0.1}}, | |
| dist: {type: 'vec3', default: {x: 0.5, y: 0.5, z: 0.5}} | |
| }, | |
| init: function () { | |
| this.originalPos = this.el.getAttribute('position'); | |
| this.dir = {x: 1, y: 1, z: 1}; | |
| }, | |
| tick: function (time, timeDelta) { | |
| var currentPos = this.el.getAttribute('position'); | |
| var speed = this.data.speed; | |
| var dist = this.data.dist; | |
| ['x', 'y', 'z'].forEach(axis => { | |
| currentPos[axis] += speed[axis] * this.dir[axis] * (timeDelta / 1000); | |
| if (Math.abs(currentPos[axis] - this.originalPos[axis]) > dist[axis]) { | |
| this.dir[axis] *= -1; | |
| } | |
| }); | |
| this.el.setAttribute('position', currentPos); | |
| }, | |
| boost: function() { | |
| var speed = this.data.speed; | |
| ['x', 'y', 'z'].forEach(axis => { | |
| speed[axis] *= 1.5; | |
| }); | |
| this.data.speed = speed; | |
| this.dir = { | |
| x: Math.random() > 0.5 ? 1 : -1, | |
| y: Math.random() > 0.5 ? 1 : -1, | |
| z: Math.random() > 0.5 ? 1 : -1 | |
| }; | |
| } | |
| }); | |
| AFRAME.registerComponent('moving-light', { | |
| // ... (previous moving-light component code) | |
| }); | |
| function moveCamera(direction) { | |
| var camera = document.querySelector('[camera]'); | |
| var rig = document.querySelector('#rig'); | |
| var pos = rig.getAttribute('position'); | |
| var rot = rig.getAttribute('rotation'); | |
| var speed = 0.5; | |
| var rotationSpeed = 5; | |
| switch(direction) { | |
| case 'up': pos.y += speed; break; | |
| case 'down': pos.y -= speed; break; | |
| case 'forward': pos.z -= speed; break; | |
| case 'left': pos.x -= speed; break; | |
| case 'right': pos.x += speed; break; | |
| case 'rotateLeft': rot.y += rotationSpeed; break; | |
| case 'rotateRight': rot.y -= rotationSpeed; break; | |
| case 'reset': pos = {x: 0, y: 10, z: 0}; rot = {x: -90, y: 0, z: 0}; break; | |
| case 'ground': pos = {x: 0, y: 1.6, z: 0}; rot = {x: 0, y: 0, z: 0}; break; | |
| } | |
| rig.setAttribute('position', pos); | |
| rig.setAttribute('rotation', rot); | |
| } | |
| function fireRaycast() { | |
| var camera = document.querySelector('[camera]'); | |
| var direction = new THREE.Vector3(); | |
| camera.object3D.getWorldDirection(direction); | |
| var raycaster = new THREE.Raycaster(); | |
| raycaster.set(camera.object3D.position, direction); | |
| var intersects = raycaster.intersectObjects(document.querySelectorAll('.raycastable').map(el => el.object3D), true); | |
| if (intersects.length > 0) { | |
| var hitObject = intersects[0].object.el; | |
| if (hitObject.components.bouncing) { | |
| hitObject.components.bouncing.boost(); | |
| score += 10; | |
| document.getElementById('score').innerText = 'Score: ' + score; | |
| } | |
| } | |
| } | |
| document.addEventListener('keydown', function(event) { | |
| switch(event.key.toLowerCase()) { | |
| case 'w': moveCamera('up'); break; | |
| case 's': moveCamera('forward'); break; | |
| case 'x': moveCamera('down'); break; | |
| case 'q': moveCamera('rotateLeft'); break; | |
| case 'e': moveCamera('rotateRight'); break; | |
| case 'z': moveCamera('reset'); break; | |
| case 'c': moveCamera('ground'); break; | |
| case ' ': fireRaycast(); break; | |
| } | |
| }); | |
| </script> | |
| """ | |
| # ... (previous helper functions remain the same) | |
| def main(): | |
| st.set_page_config(layout="wide") | |
| with st.sidebar: | |
| st.markdown("### 🤖 3D AI Using Claude 3.5 Sonnet for AI Pair Programming") | |
| st.markdown("[Open 3D Animation Toolkit](https://huggingface.co/spaces/awacke1/3d_animation_toolkit)", unsafe_allow_html=True) | |
| st.markdown("### ⬆️ Upload") | |
| uploaded_files = st.file_uploader("Add files:", accept_multiple_files=True, key="file_uploader") | |
| st.markdown("### 🎮 Camera Controls") | |
| col1, col2, col3 = st.columns(3) | |
| with col1: | |
| st.button("⬅️", on_click=lambda: st.session_state.update({'camera_move': 'left'})) | |
| st.button("🔄↺", on_click=lambda: st.session_state.update({'camera_move': 'rotateLeft'})) | |
| st.button("🔝", on_click=lambda: st.session_state.update({'camera_move': 'reset'})) | |
| with col2: | |
| st.button("⬆️", on_click=lambda: st.session_state.update({'camera_move': 'up'})) | |
| st.button("👀", on_click=lambda: st.session_state.update({'camera_move': 'ground'})) | |
| st.button("🔫", on_click=lambda: st.session_state.update({'camera_move': 'fire'})) | |
| with col3: | |
| st.button("➡️", on_click=lambda: st.session_state.update({'camera_move': 'right'})) | |
| st.button("⬇️", on_click=lambda: st.session_state.update({'camera_move': 'down'})) | |
| st.button("⏩", on_click=lambda: st.session_state.update({'camera_move': 'forward'})) | |
| st.markdown("### 🗺️ Grid Size") | |
| grid_width = st.slider("Grid Width", 1, 8, 8) | |
| grid_height = st.slider("Grid Height", 1, 5, 5) | |
| st.markdown("### ℹ️ Instructions") | |
| st.write("- W: Camera up\n- S: Move forward\n- X: Camera down\n- Q/E: Rotate camera left/right\n- Z: Reset camera to top view\n- C: Move camera to ground level\n- Spacebar: Fire raycast\n- Click and drag to move objects\n- Mouse wheel to zoom\n- Right-click and drag to rotate view") | |
| st.markdown("### 📁 Directory") | |
| directory = st.text_input("Enter path:", ".", key="directory_input") | |
| # ... (rest of the main function remains mostly the same) | |
| aframe_scene = f""" | |
| <a-scene embedded style="height: 600px; width: 100%;"> | |
| <a-entity id="rig" position="0 {max(grid_width, grid_height)} 0" rotation="-90 0 0"> | |
| <a-camera fov="60" look-controls wasd-controls="enabled: false" cursor="rayOrigin: mouse" raycaster="objects: .raycastable"></a-camera> | |
| </a-entity> | |
| <a-sky color="#87CEEB"></a-sky> | |
| <a-entity moving-light="color: #FFD700; speed: 0.07 0.05 0.06; bounds: 4 3 4" position="2 2 -2"></a-entity> | |
| <a-entity moving-light="color: #FF6347; speed: 0.06 0.08 0.05; bounds: 4 3 4" position="-2 1 2"></a-entity> | |
| <a-entity moving-light="color: #00CED1; speed: 0.05 0.06 0.07; bounds: 4 3 4" position="0 3 0"></a-entity> | |
| <a-text id="score" value="Score: 0" position="-1.5 1 -2" scale="0.5 0.5 0.5" color="white"></a-text> | |
| """ | |
| assets, entities = generate_tilemap(files, directory, grid_width, grid_height, max_unique_models=5) | |
| aframe_scene += assets + entities + "</a-scene>" | |
| camera_move = st.session_state.get('camera_move', None) | |
| if camera_move: | |
| if camera_move == 'fire': | |
| aframe_scene += "<script>fireRaycast();</script>" | |
| else: | |
| aframe_scene += f"<script>moveCamera('{camera_move}');</script>" | |
| st.session_state.pop('camera_move') | |
| st.components.v1.html(load_aframe_and_extras() + aframe_scene, height=600) | |
| if __name__ == "__main__": | |
| main() |