Update app.py

app.py

@@ -7,6 +7,7 @@ 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://cdn.jsdelivr.net/npm/aframe-volumetric-fog@latest/dist/aframe-volumetric-fog.min.js"></script>
     <script>
     let score = 0;
     AFRAME.registerComponent('draggable', {
@@ -33,142 +34,43 @@ def load_aframe_and_extras():
       },
       dragMove: function (evt) {
         if (!this.isDragging) return;
-        var camera = this.camera;
-        var vector = new THREE.Vector3(evt.clientX / window.innerWidth * 2 - 1, -(evt.clientY / window.innerHeight) * 2 + 1, 0.5);
-        vector.unproject(camera);
-        var dir = vector.sub(camera.position).normalize();
-        var distance = -camera.position.y / dir.y;
-        var pos = camera.position.clone().add(dir.multiplyScalar(distance));
-        this.el.setAttribute('position', pos);
+        var camera = this.camera.getObject3D('camera');
+        var worldPos = new THREE.Vector3();
+        camera.getWorldPosition(worldPos);
+        var worldDir = new THREE.Vector3();
+        camera.getWorldDirection(worldDir);
+        var camX = worldPos.x;
+        var camY = worldPos.y;
+        var camZ = worldPos.z;
+        var dirX = worldDir.x;
+        var dirY = worldDir.y;
+        var dirZ = worldDir.z;
+        var t = -camY / dirY;
+        var moveX = camX + t * dirX;
+        var moveZ = camZ + t * dirZ;
+        this.el.setAttribute('position', moveX + " " + 0.0 + " " + moveZ);
       }
     });
-    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', {
+
+    AFRAME.registerComponent('undulating-rotation', {
       schema: {
-        color: {type: 'color', default: '#FFF'},
-        speed: {type: 'vec3', default: {x: 0.1, y: 0.1, z: 0.1}},
-        bounds: {type: 'vec3', default: {x: 5, y: 5, z: 5}}
+        speed: { type: 'number', default: 1 }, // Base rotation speed
+        amplitude: { type: 'number', default: 20 }, // Maximum rotation in degrees
+        frequency: { type: 'number', default: 0.5 } // Speed of undulation
       },
       init: function () {
-        this.dir = {x: 1, y: 1, z: 1};
-        this.light = document.createElement('a-light');
-        this.light.setAttribute('type', 'point');
-        this.light.setAttribute('color', this.data.color);
-        this.light.setAttribute('intensity', '0.75');
-        this.el.appendChild(this.light);
+        this.initialRotation = Math.random() * 360; // Random initial rotation
+        this.time = 0;
       },
-      tick: function (time, timeDelta) {
-        var currentPos = this.el.getAttribute('position');
-        var speed = this.data.speed;
-        var bounds = this.data.bounds;
-        ['x', 'y', 'z'].forEach(axis => {
-          currentPos[axis] += speed[axis] * this.dir[axis] * (timeDelta / 1000);
-          if (Math.abs(currentPos[axis]) > bounds[axis]) {
-            this.dir[axis] *= -1;
-          }
-        });
-        this.el.setAttribute('position', currentPos);
-      }
-    });
-    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').setAttribute('value', '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;
+      tick: function (time, deltaTime) {
+        this.time += deltaTime / 1000;
+        const rotationAmount = Math.sin(this.time * this.data.frequency) * this.data.amplitude;
+        this.el.setAttribute('rotation', { x: 0, y: this.initialRotation + rotationAmount, z: 0 });
       }
     });
     </script>
     """
 
-def create_aframe_entity(file_stem, file_type, position):
-    rotation = f"0 {random.uniform(0, 360)} 0"
-    bounce_speed = f"{random.uniform(0.05, 0.1)} {random.uniform(0.05, 0.1)} {random.uniform(0.05, 0.1)}"
-    bounce_dist = f"0.1 0.1 0.1"
-    if file_type == 'obj':
-        return f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" obj-model="obj: #{file_stem}" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-entity>'
-    elif file_type == 'glb':
-        return f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" gltf-model="#{file_stem}" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-entity>'
-    elif file_type in ['webp', 'png']:
-        return f'<a-image position="{position}" rotation="-90 0 0" src="#{file_stem}" width="0.5" height="0.5" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-image>'
-    elif file_type == 'mp4':
-        return f'<a-video position="{position}" rotation="-90 0 0" src="#{file_stem}" width="0.5" height="0.5" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-video>'
-    return ''
-
 @st.cache_data
 def encode_file(file_path):
     with open(file_path, "rb") as file:
@@ -181,8 +83,12 @@ def generate_tilemap(files, directory, grid_width, grid_height, max_unique_model
     tile_size = 1
     start_x = -(grid_width * tile_size) / 2
     start_z = -(grid_height * tile_size) / 2
-    unique_files = random.sample(files, min(len(files), max_unique_models))
+    available_models = [f for f in files if f.endswith(('.obj', '.glb'))]
+    available_images = [f for f in files if f.endswith(('.webp', '.png'))]
     encoded_files = {}
+
+    unique_files = random.sample(files, min(len(files), max_unique_models))
+
     for file in unique_files:
         file_path = os.path.join(directory, file)
         file_type = file.split('.')[-1]
@@ -190,19 +96,36 @@ def generate_tilemap(files, directory, grid_width, grid_height, max_unique_model
         encoded_files[file] = encoded_file
         if file_type in ['obj', 'glb']:
             assets += f'<a-asset-item id="{Path(file).stem}" src="data:application/octet-stream;base64,{encoded_file}"></a-asset-item>'
-        elif file_type in ['webp', 'png', 'mp4']:
-            mime_type = f"image/{file_type}" if file_type in ['webp', 'png'] else "video/mp4"
-            assets += f'<{file_type} id="{Path(file).stem}" src="data:{mime_type};base64,{encoded_file}"></{file_type}>'
+        elif file_type in ['webp', 'png']:
+            mime_type = f"image/{file_type}"
+            assets += f'<img id="{Path(file).stem}" src="data:{mime_type};base64,{encoded_file}" />'
+
+    assets += "</a-assets>"
+
     for i in range(grid_width):
         for j in range(grid_height):
             x = start_x + (i * tile_size)
             z = start_z + (j * tile_size)
             position = f"{x} 0 {z}"
-            if unique_files:
-                file = random.choice(unique_files)
-                file_type = file.split('.')[-1]
-                entities += create_aframe_entity(Path(file).stem, file_type, position)
-    assets += "</a-assets>"
+
+            chosen_file = random.choice(files)
+            file_type = chosen_file.split('.')[-1]
+            file_stem = Path(chosen_file).stem
+            rotation = f"0 {random.uniform(0, 360)} 0"
+            bounce_speed = f"{random.uniform(0.01, 0.03)} {random.uniform(0.01, 0.03)} {random.uniform(0.01, 0.03)}"
+            amplitude = random.uniform(5, 15)
+            frequency = random.uniform(0.1, 0.5)
+
+            if file_type == 'obj':
+                entities += f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" obj-model="obj: #{file_stem}" class="raycastable" draggable undulating-rotation="amplitude: {amplitude}; frequency: {frequency}"></a-entity>'
+            elif file_type == 'glb':
+                entities += f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" gltf-model="#{file_stem}" class="raycastable" draggable undulating-rotation="amplitude: {amplitude}; frequency: {frequency}"></a-entity>'
+            elif file_type in ['webp', 'png']:
+                if available_images:
+                    random_image = random.choice(available_images)
+                    image_stem = Path(random_image).stem
+                    entities += f'<a-plane position="{position}" rotation="-90 0 0" width="{tile_size}" height="{tile_size}" material="src: #{image_stem}" class="raycastable" draggable></a-plane>'
+
     return assets, entities
 
 def main():
@@ -212,32 +135,20 @@ def main():
         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)
+        grid_width = st.slider("Grid Width", 1, 10, 8)
+        grid_height = st.slider("Grid Height", 1, 10, 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.write("- Click and drag to move objects")
+        st.write("- Mouse wheel to zoom")
+        st.write("- Right-click and drag to rotate view")
         st.markdown("### 📁 Directory")
         directory = st.text_input("Enter path:", ".", key="directory_input")
-    
+
     if not os.path.isdir(directory):
         st.sidebar.error("Invalid directory path")
         return
-    file_types = ['obj', 'glb', 'webp', 'png', 'mp4']
+    file_types = ['obj', 'glb', 'webp', 'png']
     if uploaded_files:
         for uploaded_file in uploaded_files:
             file_extension = Path(uploaded_file.name).suffix.lower()[1:]
@@ -251,28 +162,19 @@ def main():
 
     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>
+        {load_aframe_and_extras()}
+        <a-entity id="rig" movement-controls="fly: true; speed: 0.3" position="0 1.6 0">
+            <a-camera id="camera" position="0 1.6 10"></a-camera>
+        </a-entity>
+        <a-entity light="type: ambient; color: #EEE"></a-entity>
+        <a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 1 1"></a-entity>
+        <a-sky color="#ECF0F1"></a-sky>
+        <a-entity id="tilemap">
+            {''.join(generate_tilemap(files, directory, grid_width, grid_height))}
+        </a-entity>
+    </a-scene>
     """
-
-    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)
+    st.components.v1.html(aframe_scene, height=600)
 
 if __name__ == "__main__":
     main()