From a04cbe048f9588033dc044edb62c42415141e788 Mon Sep 17 00:00:00 2001 From: Azeem Fidahusein Date: Mon, 28 Jul 2025 23:06:20 +0100 Subject: [PATCH] fixed mouse interaction and removed most debugging --- app/src/event-manager.ts | 41 ++++++++++++++++++++++++++-------------- app/src/main.ts | 20 -------------------- app/src/model-loader.ts | 7 +------ app/src/physics.ts | 7 ++----- 4 files changed, 30 insertions(+), 45 deletions(-) diff --git a/app/src/event-manager.ts b/app/src/event-manager.ts index 009182a..0d08870 100644 --- a/app/src/event-manager.ts +++ b/app/src/event-manager.ts @@ -22,25 +22,38 @@ export class EventManager { } setupEventListeners(): void { - // Mouse move event - window.addEventListener('mousemove', (event) => { - this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1 - this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1 + // Get the canvas element to ensure we're listening on the right element + const canvas = this.renderer.domElement + + // 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 - const distance = 10 // Distance from camera - const direction = this.raycaster.ray.direction.clone() - direction.multiplyScalar(distance) + // Project mouse position to the Z=0 plane (where most objects are) + const targetPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0) + const intersection = new THREE.Vector3() + this.raycaster.ray.intersectPlane(targetPlane, intersection) - // Update the mouse world position by setting its components directly - this.mouseWorldPosition.copy(this.camera.position).add(direction) - - // Debug log to verify mouse interaction is working - console.log('Mouse world position:', this.mouseWorldPosition.x.toFixed(2), this.mouseWorldPosition.y.toFixed(2), this.mouseWorldPosition.z.toFixed(2)) - }) + if (intersection) { + this.mouseWorldPosition.copy(intersection) + } else { + // Fallback: use a fixed distance projection + 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', () => { diff --git a/app/src/main.ts b/app/src/main.ts index 12483c9..482dd4c 100644 --- a/app/src/main.ts +++ b/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 { diff --git a/app/src/model-loader.ts b/app/src/model-loader.ts index 024e9db..18100ef 100644 --- a/app/src/model-loader.ts +++ b/app/src/model-loader.ts @@ -241,18 +241,13 @@ export class ModelLoader { physicsObjects: PhysicsObject[] ): Promise { 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) diff --git a/app/src/physics.ts b/app/src/physics.ts index 42967ca..c120f1a 100644 --- a/app/src/physics.ts +++ b/app/src/physics.ts @@ -79,8 +79,8 @@ export class PhysicsManager { repulsionForce.z * repulsionForce.z ) - if (mouseDistance < 3 && mouseDistance > 0) { - const repulsionStrength = 5.0 / (mouseDistance * mouseDistance + 0.1) + if (mouseDistance < 5 && mouseDistance > 0) { // Increased from 3 to 5 + 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,