Update app.py

app.py

@@ -11,32 +11,35 @@ def load_aframe_and_extras():
     <script>
     AFRAME.registerComponent('draggable', {
       init: function () {
+        this.el.setAttribute('class', 'raycastable');
         this.el.setAttribute('cursor-listener', '');
-        this.dragHandler = e => this.dragMove(e);
+        this.dragHandler = this.dragMove.bind(this);
         this.el.sceneEl.addEventListener('mousemove', this.dragHandler);
-        this.el.setAttribute('event-set__mousedown', 'startDragging');
-        this.el.setAttribute('event-set__mouseup', 'stopDragging');
+        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);
       },
-      startDragging: function () {
+      onDragStart: function (evt) {
         this.isDragging = true;
+        this.el.emit('dragstart');
       },
-      stopDragging: function () {
+      onDragEnd: function (evt) {
         this.isDragging = false;
+        this.el.emit('dragend');
       },
       dragMove: function (evt) {
-        if (this.isDragging) {
-          var camera = this.el.sceneEl.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);
-        }
+        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);
       }
     });
     </script>
@@ -44,13 +47,13 @@ def load_aframe_and_extras():
 
 def create_aframe_entity(file_path, file_type, position):
     if file_type == 'obj':
-        return f'<a-entity position="{position}" obj-model="obj: #{Path(file_path).stem}" draggable></a-entity>'
+        return f'<a-entity position="{position}" obj-model="obj: #{Path(file_path).stem}" class="raycastable" draggable></a-entity>'
     elif file_type == 'glb':
-        return f'<a-entity position="{position}" gltf-model="#{Path(file_path).stem}" draggable></a-entity>'
+        return f'<a-entity position="{position}" gltf-model="#{Path(file_path).stem}" class="raycastable" draggable></a-entity>'
     elif file_type in ['webp', 'png']:
-        return f'<a-image position="{position}" src="#{Path(file_path).stem}" width="1" height="1" draggable></a-image>'
+        return f'<a-image position="{position}" src="#{Path(file_path).stem}" width="1" height="1" class="raycastable" draggable></a-image>'
     elif file_type == 'mp4':
-        return f'<a-video position="{position}" src="#{Path(file_path).stem}" width="1" height="1" draggable></a-video>'
+        return f'<a-video position="{position}" src="#{Path(file_path).stem}" width="1" height="1" class="raycastable" draggable></a-video>'
     return ''
 
 def encode_file(file_path):
@@ -83,7 +86,6 @@ def main():
 
     file_types = ['obj', 'glb', 'webp', 'png', 'mp4']
     
-    # Handle uploaded files
     if uploaded_files:
         for uploaded_file in uploaded_files:
             file_extension = Path(uploaded_file.name).suffix.lower()[1:]
@@ -98,7 +100,7 @@ def main():
 
     aframe_scene = """
     <a-scene embedded style="height: 600px; width: 100%;">
-      <a-entity camera="userHeight: 1.6" position="0 2 2" rotation="-45 0 0" cursor="rayOrigin: mouse"></a-entity>
+      <a-entity camera="userHeight: 1.6" position="0 2 2" rotation="-45 0 0" cursor="rayOrigin: mouse" raycaster="objects: .raycastable"></a-entity>
     """
 
     assets = "<a-assets>"