fixed mouse interaction and removed most debugging

app/src/event-manager.ts

@@ -22,25 +22,38 @@ export class EventManager {
   }
 
   setupEventListeners(): void {
-    // Mouse move event
+    // Get the canvas element to ensure we're listening on the right element
-    window.addEventListener('mousemove', (event) => {
+    const canvas = this.renderer.domElement
-      this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1
+
-      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
+    // Mouse move event - listen on both window and canvas for better coverage
+    const handleMouseMove = (event: MouseEvent) => {
+      // Calculate mouse position relative to the renderer's canvas
+      const rect = canvas.getBoundingClientRect()
+      this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
+      this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
 
       // Update raycaster
       this.raycaster.setFromCamera(this.mouse, this.camera)
       
-      // Calculate mouse position in world space
+      // Project mouse position to the Z=0 plane (where most objects are)
-      const distance = 10 // Distance from camera
+      const targetPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)
-      const direction = this.raycaster.ray.direction.clone()
+      const intersection = new THREE.Vector3()
-      direction.multiplyScalar(distance)
+      this.raycaster.ray.intersectPlane(targetPlane, intersection)
       
-      // Update the mouse world position by setting its components directly
+      if (intersection) {
-      this.mouseWorldPosition.copy(this.camera.position).add(direction)
+        this.mouseWorldPosition.copy(intersection)
-      
+      } else {
-      // Debug log to verify mouse interaction is working
+        // Fallback: use a fixed distance projection
-      console.log('Mouse world position:', this.mouseWorldPosition.x.toFixed(2), this.mouseWorldPosition.y.toFixed(2), this.mouseWorldPosition.z.toFixed(2))
+        const distance = Math.abs(this.camera.position.z)
-    })
+        const direction = this.raycaster.ray.direction.clone()
+        direction.multiplyScalar(distance)
+        this.mouseWorldPosition.copy(this.camera.position).add(direction)
+      }
+    }
+
+    // Listen on both window and canvas
+    window.addEventListener('mousemove', handleMouseMove)
+    canvas.addEventListener('mousemove', handleMouseMove)
 
     // Window resize event
     window.addEventListener('resize', () => {

app/src/main.ts

@@ -22,16 +22,12 @@ class AAFHomepage {
   private eventManager: EventManager
 
   constructor() {
-    console.log('AAFHomepage constructor started')
-    
     this.scene = new THREE.Scene()
     this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
     
     const canvas = document.getElementById('three-canvas') as HTMLCanvasElement
-    console.log('Canvas element:', canvas)
     
     if (!canvas) {
-      console.error('Canvas element not found!')
       throw new Error('Canvas element not found')
     }
     
@@ -61,8 +57,6 @@ class AAFHomepage {
   }
 
   private init(): void {
-    console.log('Init method started')
-    
     // Setup renderer
     this.renderer.setSize(window.innerWidth, window.innerHeight)
     this.renderer.setPixelRatio(window.devicePixelRatio)
@@ -71,36 +65,22 @@ class AAFHomepage {
     this.renderer.outputColorSpace = THREE.SRGBColorSpace
     this.renderer.toneMapping = THREE.ACESFilmicToneMapping
     this.renderer.toneMappingExposure = 1
-    
-    console.log('Renderer configured')
 
     // Setup camera (moved closer to the action)
     this.camera.position.set(0, 0, 6)
     this.camera.lookAt(this.attractionPoint)
-    
-    console.log('Camera positioned')
-
-    console.log('Physics world setup')
 
     // Setup lighting
     LightingManager.setupLighting(this.scene)
-    
-    console.log('Lighting setup complete')
 
     // Load and create objects from the main model
     this.loadAndCreateObjects()
-    
-    console.log('Model loading initiated')
 
     // Setup event listeners
     this.eventManager.setupEventListeners()
-    
-    console.log('Event listeners setup')
 
     // Start animation loop
     this.animate()
-    
-    console.log('Animation loop started')
   }
 
   private async loadAndCreateObjects(): Promise<void> {

app/src/model-loader.ts

@@ -241,18 +241,13 @@ export class ModelLoader {
     physicsObjects: PhysicsObject[]
   ): Promise<void> {
     try {
-      console.log('Loading main_model.glb...')
       const gltf = await this.loader.loadAsync('/models/main_model.glb')
-      console.log('Model loaded successfully:', gltf)
       
       // Extract and downsample the geometry for collision detection
       const originalGeometry = this.extractModelGeometry(gltf)
       if (originalGeometry) {
-        console.log('Extracted geometry with', originalGeometry.vertices.length / 3, 'vertices')
         this.modelGeometry = this.downsampleGeometry(originalGeometry, 0.3) // 30% of original detail
-        console.log('Downsampled to', this.modelGeometry.vertices.length / 3, 'vertices for collision')
       } else {
-        console.warn('Failed to extract geometry, will use simple collision shapes')
         this.modelGeometry = null
       }
       
@@ -308,7 +303,6 @@ export class ModelLoader {
         
         // Add collision event listener with rotational effects
         body.addEventListener('collide', (event: any) => {
-          console.log('Collision detected!')
           
           // Add some spin on collision for more dynamic movement
           const impactStrength = event.contact?.getImpactVelocityAlongNormal() || 1
@@ -342,6 +336,7 @@ export class ModelLoader {
       }
       
       console.log('Created', numInstances, 'instances of main_model with custom collision shapes')
+      console.log('Total physics objects:', physicsObjects.length)
       
     } catch (error) {
       console.error('Failed to load main_model.glb:', error)

app/src/physics.ts

@@ -79,8 +79,8 @@ export class PhysicsManager {
         repulsionForce.z * repulsionForce.z
       )
       
-      if (mouseDistance < 3 && mouseDistance > 0) {
+      if (mouseDistance < 5 && mouseDistance > 0) { // Increased from 3 to 5
-        const repulsionStrength = 5.0 / (mouseDistance * mouseDistance + 0.1)
+        const repulsionStrength = 15.0 / (mouseDistance * mouseDistance + 0.1) // Increased from 10.0 to 15.0
         repulsionForce.scale(repulsionStrength, repulsionForce)
         obj.body.force.set(
           obj.body.force.x + repulsionForce.x,
@@ -88,9 +88,6 @@ export class PhysicsManager {
           obj.body.force.z + repulsionForce.z
         )
         
-        // Debug log to verify mouse repulsion is working
-        console.log('Mouse repulsion applied, distance:', mouseDistance.toFixed(2), 'strength:', repulsionStrength.toFixed(2))
-        
         // Add rotational torque from mouse interaction
         const torque = new CANNON.Vec3(
           (Math.random() - 0.5) * repulsionStrength * 0.1,