import React, { useRef, useEffect, useCallback, useState } from 'react'; import { useGLTF } from '@react-three/drei'; import { useFrame, useThree } from '@react-three/fiber'; import * as THREE from 'three'; // Goal detection event name const GOAL_SCORED_EVENT = 'goal-scored'; export const SoccerBall = () => { const ballRef = useRef(); const { scene } = useThree(); const [debugMode, setDebugMode] = useState(false); const debugMeshRef = useRef(); // Use refs for mutable physics state instead of state hooks to prevent re-renders const velocity = useRef(new THREE.Vector3(0, 0, 0)); const position = useRef(new THREE.Vector3(0, 40, -10)); const isResting = useRef(false); const lastUpdateTime = useRef(0); const playerImpulse = useRef(new THREE.Vector3()); const prevPlayerPosition = useRef(null); // Track goal status const isInGoal = useRef(false); const goalCooldown = useRef(0); // Respawn position and timer const respawnTimer = useRef(0); const isRespawning = useRef(false); const physicsParams = { gravity: 50, mass: 1.8, restitution: 0.85, airFriction: 0.995, groundFriction: 0.985, playerRadius: 6, ballRadius: 4.5, // Reduced from 9 to half the size debugColor: 0xffff00, // Color for ball debug visualization minimumVelocity: 0.2, groundY: 4.5, kickStrength: 35, playerImpactStrength: 1.8, velocityCap: 50, collisionCooldown: 0.45, collisionExtraHeight: 10, minSeparationVelocity: 12, separationBoost: 1.8, collisionDebounce: 0.15, // Field boundaries (adjust to match actual field size) fieldWidth: 160, fieldLength: 320, // Goal detection parameters goalWidth: 38, goalHeight: 30, goalDepth: 15, goalCooldownTime: 2, respawnDelay: 3, }; const lastCollisionTime = useRef(0); // Load the soccer ball model const { nodes, materials } = useGLTF("https://develop.play.rosebud.ai/assets/soccer_ball.glb?BhQL"); // Goal celebration effects const [goalEffect, setGoalEffect] = useState(null); const lastGoalPosition = useRef(new THREE.Vector3()); // Listen for debug mode toggle useEffect(() => { const handleKeyDown = (e) => { if (e.key === '`' || e.key === '~') { setDebugMode(prev => !prev); } }; window.addEventListener('keydown', handleKeyDown); return () => { window.removeEventListener('keydown', handleKeyDown); }; }, []); // Create or remove debug visualization when debug mode changes useEffect(() => { if (debugMode) { // Create debug sphere for ball collision const geometry = new THREE.SphereGeometry(physicsParams.ballRadius, 32, 16); const material = new THREE.MeshBasicMaterial({ color: physicsParams.debugColor, wireframe: true, transparent: true, opacity: 0.5 }); debugMeshRef.current = new THREE.Mesh(geometry, material); scene.add(debugMeshRef.current); } else if (debugMeshRef.current) { // Remove debug mesh when debug mode is off scene.remove(debugMeshRef.current); debugMeshRef.current = null; } return () => { if (debugMeshRef.current) { scene.remove(debugMeshRef.current); debugMeshRef.current = null; } }; }, [debugMode, scene, physicsParams.ballRadius, physicsParams.debugColor]); // Use effect to ensure the ball is visible and properly added to the scene useEffect(() => { if (materials.soccer_ball) { materials.soccer_ball.needsUpdate = true; materials.soccer_ball.side = THREE.DoubleSide; materials.soccer_ball.transparent = false; materials.soccer_ball.metalness = 0.2; materials.soccer_ball.roughness = 0.8; materials.soccer_ball.fog = false; materials.soccer_ball.emissive = new THREE.Color(0x000000); materials.soccer_ball.emissiveIntensity = 0; } // Create goal celebration effect system const createGoalEffect = () => { const particles = new THREE.Group(); const particleCount = 120; const particleGeometry = new THREE.SphereGeometry(0.5, 8, 8); // Create different particle colors for more exciting effect const particleColors = [ 0xffff00, // Yellow 0xff4500, // Orange-Red 0x00ff00, // Green 0x4169e1, // Royal Blue 0xff1493, // Deep Pink ]; for (let i = 0; i < particleCount; i++) { const colorIdx = Math.floor(Math.random() * particleColors.length); const particleMaterial = new THREE.MeshBasicMaterial({ color: particleColors[colorIdx], transparent: true, opacity: 0.8, }); const particle = new THREE.Mesh(particleGeometry, particleMaterial); // Set initial position to be at the center of the emission (will be positioned at goal later) particle.position.set(0, 0, 0); // Store velocity and life data in userData particle.userData = { velocity: new THREE.Vector3( (Math.random() - 0.5) * 50, Math.random() * 40 + 20, (Math.random() - 0.5) * 50 ), life: Math.random() * 2 + 1, // 1-3 seconds lifetime maxLife: Math.random() * 2 + 1, }; particles.add(particle); } return particles; }; // Create the goal effect but don't add it to the scene yet setGoalEffect(createGoalEffect()); // Listen for "player-shoot" events const handlePlayerShoot = (e) => { if (e.detail) { const { power, direction } = e.detail; // Calculate shooting force const shootForce = direction.clone().multiplyScalar(power * 2.5); // Add upward component based on power const liftFactor = Math.min(1.0, power / 80); // Max lift at 80% power shootForce.y += 45 * liftFactor; // Add random variation shootForce.x += (Math.random() - 0.5) * power * 0.2; shootForce.z += (Math.random() - 0.5) * power * 0.2; // For high-power shots, add spin effect if (power > 50) { const spinDirection = Math.random() > 0.5 ? 1 : -1; shootForce.x += spinDirection * power * 0.1; } console.log("Applying shoot force:", shootForce); applyForce(shootForce); // Add visual feedback - trail effect for high-powered shots if (power > 60 && ballRef.current) { // Trail effect removed } } }; window.addEventListener('player-shoot', handlePlayerShoot); return () => { window.removeEventListener('player-shoot', handlePlayerShoot); }; }, [nodes, materials]); // Apply force to the ball (for kicks or collisions) const applyForce = useCallback((force) => { velocity.current.add(force.divideScalar(physicsParams.mass)); // Cap velocity const speed = velocity.current.length(); if (speed > physicsParams.velocityCap) { velocity.current.multiplyScalar(physicsParams.velocityCap / speed); } isResting.current = false; }, [physicsParams.mass, physicsParams.velocityCap]); // Detect if the ball is in a goal const checkGoalScored = useCallback(() => { if (goalCooldown.current > 0 || isRespawning.current) return false; let goalScored = false; let scoringTeam = ''; scene.traverse((object) => { if (object.userData?.isGoalNet && ballRef.current) { const netBounds = new THREE.Box3().setFromObject(object); const ballBounds = new THREE.Sphere(position.current.clone(), physicsParams.ballRadius); if (netBounds.intersectsSphere(ballBounds)) { // top goal or bottom goal if (object.position.z > 0) { scoringTeam = 'bottom'; } else { scoringTeam = 'top'; } goalScored = true; } } }); // If a goal was scored if (goalScored && !isInGoal.current) { console.log("GOAL SCORED!", scoringTeam); console.log("Ball position:", position.current); isInGoal.current = true; goalCooldown.current = physicsParams.goalCooldownTime; // Store the goal position for effects lastGoalPosition.current.copy(position.current); // Dispatch goal event window.dispatchEvent(new CustomEvent(GOAL_SCORED_EVENT, { detail: { team: scoringTeam, position: position.current.clone() } })); // Start respawn timer but don't freeze the ball respawnTimer.current = physicsParams.respawnDelay; isRespawning.current = true; // Apply a small bounce to the ball but don't freeze it velocity.current.multiplyScalar(0.5); // Reduce current velocity velocity.current.y += 15; // Add upward bounce // Play effect if (goalEffect) { // Reset all particles to prepare for a new effect goalEffect.children.forEach((particle) => { if (particle.userData) { // Reset position to the goal location particle.position.set(0, 0, 0); // Generate new random velocities particle.userData.velocity = new THREE.Vector3( (Math.random() - 0.5) * 50, Math.random() * 40 + 20, (Math.random() - 0.5) * 50 ); // Reset life and visibility particle.userData.life = Math.random() * 2 + 1; particle.userData.maxLife = particle.userData.life; particle.scale.setScalar(Math.random() * 2 + 0.5); particle.material.opacity = 1; particle.visible = true; } }); // Position the effect at the goal location goalEffect.position.copy(lastGoalPosition.current); // Add to scene if not already added if (!goalEffect.parent) { scene.add(goalEffect); } } return true; } if (!goalScored) { isInGoal.current = false; } return false; }, [scene, physicsParams, isInGoal, goalCooldown, isRespawning, respawnTimer, goalEffect]); // Respawn the ball at center field const respawnBall = useCallback(() => { position.current.set(0, 30, 0); velocity.current.set( (Math.random() - 0.5) * 2, 10, (Math.random() - 0.5) * 2 ); isResting.current = false; isRespawning.current = false; if (ballRef.current) { ballRef.current.position.copy(position.current); } }, []); // Handle goal post and net collision with ball const handleGoalCollision = useCallback(() => { if (isResting.current) return; if (position.current.y > physicsParams.groundY + 50) return; scene.traverse((object) => { if ((object.userData?.isGoalPost || object.userData?.isGoalNet) && ballRef.current) { const objectPosition = object.position.clone(); const ballPosition = position.current.clone(); let collisionDetected = false; let collisionNormal = new THREE.Vector3(); let collisionPoint = new THREE.Vector3(); // Posts / Net collision checks if (object.userData?.isGoalPost) { if (object.geometry.type === 'CylinderGeometry') { // Possibly vertical/horizontal posts if (Math.abs(object.rotation.z) < 0.1) { // Vertical post const dx = ballPosition.x - objectPosition.x; const dz = ballPosition.z - objectPosition.z; const horizontalDistance = Math.sqrt(dx * dx + dz * dz); const halfHeight = object.geometry.parameters.height / 2; const ballY = ballPosition.y; const postBottomY = objectPosition.y - halfHeight; const postTopY = objectPosition.y + halfHeight; if ( horizontalDistance < physicsParams.ballRadius + object.geometry.parameters.radiusTop && ballY + physicsParams.ballRadius > postBottomY && ballY - physicsParams.ballRadius < postTopY ) { collisionNormal.set(dx, 0, dz).normalize(); collisionPoint.copy(objectPosition).add( collisionNormal.clone().multiplyScalar(object.geometry.parameters.radiusTop) ); collisionDetected = true; } } else if (Math.abs(object.rotation.z - Math.PI / 2) < 0.1) { // Crossbar or horizontal const bounds = new THREE.Box3().setFromObject(object); const ballBounds = new THREE.Sphere(ballPosition, physicsParams.ballRadius); if (bounds.intersectsSphere(ballBounds)) { const closestPoint = ballPosition.clone(); bounds.clampPoint(closestPoint, closestPoint); collisionNormal.copy(ballPosition).sub(closestPoint).normalize(); collisionPoint.copy(closestPoint); collisionDetected = true; } } } else if (object.geometry.type === 'BoxGeometry') { const bounds = new THREE.Box3().setFromObject(object); const ballBounds = new THREE.Sphere(ballPosition, physicsParams.ballRadius); if (bounds.intersectsSphere(ballBounds)) { const closestPoint = ballPosition.clone(); bounds.clampPoint(closestPoint, closestPoint); collisionNormal.copy(ballPosition).sub(closestPoint).normalize(); collisionPoint.copy(closestPoint); collisionDetected = true; } } } else { // For net colliders const bounds = new THREE.Box3().setFromObject(object); const ballBounds = new THREE.Sphere(ballPosition, physicsParams.ballRadius); if (bounds.intersectsSphere(ballBounds)) { const closestPoint = ballPosition.clone(); bounds.clampPoint(closestPoint, closestPoint); collisionNormal.copy(ballPosition).sub(closestPoint).normalize(); collisionPoint.copy(closestPoint); collisionDetected = true; } } // If collision detected, do bounce if (collisionDetected) { const penetrationDepth = physicsParams.ballRadius - collisionPoint.distanceTo(ballPosition); if (penetrationDepth > 0) { position.current.add( collisionNormal.clone().multiplyScalar(penetrationDepth * 1.01) ); const currentSpeed = velocity.current.length(); const dot = velocity.current.dot(collisionNormal); if (object.userData.isGoalPost) { // More bouncy for posts const restitution = physicsParams.restitution * 1.05; velocity.current.sub(collisionNormal.clone().multiplyScalar(2 * dot)); velocity.current.multiplyScalar(restitution); velocity.current.x += (Math.random() - 0.5) * currentSpeed * 0.1; velocity.current.z += (Math.random() - 0.5) * currentSpeed * 0.1; } else { // Less bouncy for nets const netRestitution = 0.35; velocity.current.sub(collisionNormal.clone().multiplyScalar(2 * dot)); velocity.current.multiplyScalar(netRestitution); velocity.current.multiplyScalar(0.8); } if (ballRef.current) { ballRef.current.position.copy(position.current); } } } } }); }, [scene, physicsParams, position, velocity]); // Handle player collision with ball (the dribbling logic) const handlePlayerCollision = useCallback(() => { const currentTime = performance.now(); if (currentTime - lastCollisionTime.current < physicsParams.collisionCooldown * 1000) { return; } const showCollisionDebug = false; scene.traverse((object) => { if (object.userData?.isPlayer && ballRef.current) { const playerPosition = object.position.clone(); const ballPosition = position.current.clone(); if (!prevPlayerPosition.current) { prevPlayerPosition.current = playerPosition.clone(); return; } const dx = ballPosition.x - playerPosition.x; const dz = ballPosition.z - playerPosition.z; const horizontalDistance = Math.sqrt(dx * dx + dz * dz); const ballBottomY = ballPosition.y - physicsParams.ballRadius; const ballTopY = ballPosition.y + physicsParams.ballRadius; const playerBottomY = playerPosition.y; const playerTopY = playerPosition.y + physicsParams.playerRadius * 2; // More precise height collision detection with smaller vertical buffer const verticalBuffer = 2.0; // Reduced from collisionExtraHeight * 0.5 const isPlayerAtBallHeight = playerBottomY <= ballTopY + verticalBuffer && playerTopY >= ballBottomY - verticalBuffer; const playerVelocity = new THREE.Vector3().subVectors( playerPosition, prevPlayerPosition.current ); const pushVector = new THREE.Vector3().subVectors( ballPosition, playerPosition ).normalize(); const playerSpeed = playerVelocity.length() * 100; // Make collision detection more precise by reducing the threshold const collisionThreshold = physicsParams.playerRadius + physicsParams.ballRadius * 0.5; // Only register collision when the player is genuinely touching the ball if (horizontalDistance < collisionThreshold && isPlayerAtBallHeight && playerSpeed > 0.1) { // Optional debug sphere to visualize collisions if (showCollisionDebug && !window._debugSphere) { const dbgGeo = new THREE.SphereGeometry(0.5, 16, 16); const dbgMat = new THREE.MeshBasicMaterial({ color: 0xff0000 }); window._debugSphere = new THREE.Mesh(dbgGeo, dbgMat); scene.add(window._debugSphere); } if (showCollisionDebug && window._debugSphere) { const collisionPoint = new THREE.Vector3( playerPosition.x + dx * 0.5, Math.max(playerPosition.y, ballPosition.y), playerPosition.z + dz * 0.5 ); window._debugSphere.position.copy(collisionPoint); window._debugSphere.visible = true; setTimeout(() => { if (window._debugSphere) window._debugSphere.visible = false; }, 100); } // Enhanced collision direction // Allow slightly more precise directional control const rawCollisionDirection = new THREE.Vector3(dx, 0, dz).normalize(); const playerFacingDirection = new THREE.Vector3( -Math.sin(object.rotation.y), 0, -Math.cos(object.rotation.y) ).normalize(); // Blend raw direction, push vector, and player facing direction const collisionDirection = new THREE.Vector3() .addVectors( rawCollisionDirection.clone().multiplyScalar(0.5), pushVector.clone().multiplyScalar(0.3) ) .add(playerFacingDirection.multiplyScalar(0.2)) .normalize(); // Impact force const impactDot = playerVelocity.clone().normalize().dot(collisionDirection); const impactFactor = Math.max(0.2, Math.abs(impactDot)); const dribbleStrength = 1.8; const directionFactor = Math.max(0.8, Math.abs(impactDot) * 1.8); const timeSinceLastCollision = (currentTime - lastCollisionTime.current) / 1000; const continuousDribbleMultiplier = timeSinceLastCollision < 1 ? Math.max(1.5, 2.5 - timeSinceLastCollision) : 1; const forceMagnitude = playerSpeed * impactFactor * dribbleStrength * directionFactor * continuousDribbleMultiplier; const forceVector = collisionDirection.clone().multiplyScalar(forceMagnitude); // Upward force const upwardFactor = Math.max(0.15, Math.abs(impactDot) * 0.4); forceVector.y += forceMagnitude * upwardFactor; // Forward force if the player is moving fast if (playerVelocity.length() > 1) { const playerDir = playerVelocity.clone().normalize(); forceVector.add(playerDir.multiplyScalar(forceMagnitude * 0.45)); } // Random sideways "jitter" for realism forceVector.x += (Math.random() - 0.5) * forceMagnitude * 0.25; forceVector.z += (Math.random() - 0.5) * forceMagnitude * 0.25; const currentMagnitude = forceVector.length(); const progressiveMinSeparation = physicsParams.minSeparationVelocity * (timeSinceLastCollision < 1 ? Math.max(1.2, 2.0 - timeSinceLastCollision) : 1); // Ensure a minimum separation velocity if (currentMagnitude < progressiveMinSeparation) { forceVector.normalize().multiplyScalar(progressiveMinSeparation); } // Apply extra boost if collisions happen in quick succession const dynamicSeparationBoost = physicsParams.separationBoost * (timeSinceLastCollision < 0.8 ? Math.max(1.0, 1.6 - timeSinceLastCollision) : 1.0); forceVector.multiplyScalar(dynamicSeparationBoost); // Add subtle visual feedback for collision // Removed ball flash effect // Charged dribble logic disabled // ===================================== // Apply the force applyForce(forceVector); // Dispatch sound event for kick/dribble window.dispatchEvent(new CustomEvent('ball-collision')); // Anti-stickiness logic const prevBallPlayerDistance = position.current.distanceTo(playerPosition); setTimeout(() => { if (ballRef.current && position.current.distanceTo(playerPosition) < prevBallPlayerDistance + 2) { const emergencySeparation = new THREE.Vector3() .subVectors(position.current, playerPosition) .normalize() .multiplyScalar(15); emergencySeparation.y += 5; applyForce(emergencySeparation); } }, 150); lastCollisionTime.current = currentTime; setTimeout(() => { if (lastCollisionTime.current === currentTime) { lastCollisionTime.current = currentTime - physicsParams.collisionCooldown * 900; } }, physicsParams.collisionDebounce * 1000); } prevPlayerPosition.current.copy(playerPosition); } }); }, [applyForce, scene, physicsParams, position]); // Apply field boundaries to the ball const applyBoundaries = useCallback(() => { if (isInGoal.current) return; const halfWidth = physicsParams.fieldWidth / 2; const halfLength = physicsParams.fieldLength / 2; const ballMargin = 8; const effectiveWidth = halfWidth - ballMargin; const effectiveLength = halfLength - ballMargin; if (position.current.x < -effectiveWidth) { position.current.x = -effectiveWidth; velocity.current.x = -velocity.current.x * physicsParams.restitution; velocity.current.y += Math.random() * 2; velocity.current.z += (Math.random() - 0.5) * 4; } else if (position.current.x > effectiveWidth) { position.current.x = effectiveWidth; velocity.current.x = -velocity.current.x * physicsParams.restitution; velocity.current.y += Math.random() * 2; velocity.current.z += (Math.random() - 0.5) * 4; } const goalWidthExtended = physicsParams.goalWidth / 2 + 2; const isInGoalArea = Math.abs(position.current.x) < goalWidthExtended && position.current.y < physicsParams.goalHeight * 1.2; if (!isInGoalArea) { if (position.current.z < -effectiveLength) { position.current.z = -effectiveLength; velocity.current.z = -velocity.current.z * physicsParams.restitution; velocity.current.y += Math.random() * 2; velocity.current.x += (Math.random() - 0.5) * 4; } else if (position.current.z > effectiveLength) { position.current.z = effectiveLength; velocity.current.z = -velocity.current.z * physicsParams.restitution; velocity.current.y += Math.random() * 2; velocity.current.x += (Math.random() - 0.5) * 4; } } // Safety check const maxOutOfBoundsDistance = Math.max(halfWidth, halfLength) * 2; if ( Math.abs(position.current.x) > maxOutOfBoundsDistance || Math.abs(position.current.z) > maxOutOfBoundsDistance || position.current.y > 200 ) { console.log("Ball out of bounds, resetting"); respawnBall(); } }, [isInGoal, physicsParams, position, velocity, respawnBall]); // Main physics loop useFrame((_, delta) => { if (!ballRef.current) return; const limitedDelta = Math.min(delta, 0.05); lastUpdateTime.current += limitedDelta; if (goalCooldown.current > 0) { goalCooldown.current = Math.max(0, goalCooldown.current - limitedDelta); } // Update respawn timer without freezing ball motion if (isRespawning.current) { respawnTimer.current -= limitedDelta; if (respawnTimer.current <= 0) { respawnBall(); } // Animate goal effect particles if we have them if (goalEffect && goalEffect.parent) { let allParticlesExpired = true; goalEffect.children.forEach((particle) => { if (particle.userData) { // Update position based on velocity particle.position.addScaledVector(particle.userData.velocity, limitedDelta); // Apply gravity particle.userData.velocity.y -= 30 * limitedDelta; // Update life particle.userData.life -= limitedDelta; const lifeRatio = particle.userData.life / particle.userData.maxLife; // Update scale and opacity based on life particle.scale.setScalar(lifeRatio * 2); particle.material.opacity = lifeRatio; particle.visible = particle.userData.life > 0; if (particle.userData.life > 0) { allParticlesExpired = false; } } }); // If all particles have expired, hide the effect until next goal if (allParticlesExpired) { scene.remove(goalEffect); } } // Don't return here - continue with physics to keep the ball moving } // Check goal const goalScored = checkGoalScored(); if (goalScored) return; // Collisions handlePlayerCollision(); handleGoalCollision(); // If nearly at rest if (isResting.current) { // Subtle random forces if (Math.random() < 0.002) { velocity.current.set( (Math.random() - 0.5) * 2, Math.random() * 2, (Math.random() - 0.5) * 2 ); isResting.current = false; } velocity.current.multiplyScalar(physicsParams.groundFriction); position.current.addScaledVector(velocity.current, limitedDelta); ballRef.current.position.copy(position.current); return; } // Gravity velocity.current.y -= physicsParams.gravity * limitedDelta; // Air friction velocity.current.multiplyScalar(physicsParams.airFriction); // Integrate position.current.addScaledVector(velocity.current, limitedDelta); // Boundaries applyBoundaries(); // Ground collision if (position.current.y < physicsParams.groundY) { position.current.y = physicsParams.groundY; if (velocity.current.y < -0.5) { const impactVelocity = Math.abs(velocity.current.y); const energyLoss = Math.min(0.5, impactVelocity * 0.01); const reboundFactor = Math.max( 0.3, physicsParams.restitution - energyLoss ); velocity.current.y = -velocity.current.y * reboundFactor; const bounceRandomness = Math.min(1.0, impactVelocity * 0.03); velocity.current.x += (Math.random() - 0.5) * bounceRandomness; velocity.current.z += (Math.random() - 0.5) * bounceRandomness; const currentHorizontalSpeed = new THREE.Vector2(velocity.current.x, velocity.current.z).length(); if (currentHorizontalSpeed > 1) { const spinFactor = Math.min(0.9, 0.4 + (currentHorizontalSpeed * 0.02)); velocity.current.x *= spinFactor; velocity.current.z *= spinFactor; } } else { velocity.current.y = 0; } velocity.current.x *= physicsParams.groundFriction; velocity.current.z *= physicsParams.groundFriction; } // If ball is nearly at rest const speed = velocity.current.length(); if ( speed < physicsParams.minimumVelocity * 0.8 && position.current.y <= physicsParams.groundY + 0.1 ) { isResting.current = true; velocity.current.multiplyScalar(0.8); } // Rolling/wobble effect if (speed > 0.01) { const horizontalVelocity = new THREE.Vector2(velocity.current.x, velocity.current.z); const horizontalSpeed = horizontalVelocity.length(); if (horizontalSpeed > 0.01) { const rotationAxis = new THREE.Vector3(-velocity.current.z, 0, velocity.current.x).normalize(); const ballCircumference = Math.PI * physicsParams.ballRadius * 2; const rotationAmount = (horizontalSpeed * limitedDelta) / ballCircumference * Math.PI * 2; const quaternion = new THREE.Quaternion().setFromAxisAngle(rotationAxis, rotationAmount); ballRef.current.quaternion.multiplyQuaternions(quaternion, ballRef.current.quaternion); } // Wobble if (position.current.y <= physicsParams.groundY + 0.3 && horizontalSpeed > 1) { const wobbleFrequency = 10 + horizontalSpeed * 0.5; const wobbleAmount = Math.min(0.08, horizontalSpeed * 0.003); ballRef.current.position.y = position.current.y + Math.sin(lastUpdateTime.current * wobbleFrequency) * wobbleAmount; if (horizontalSpeed > 5) { const perpX = -velocity.current.z / horizontalSpeed; const perpZ = velocity.current.x / horizontalSpeed; const sideWobbleAmount = Math.min(0.05, horizontalSpeed * 0.001); ballRef.current.position.x += perpX * Math.cos(lastUpdateTime.current * wobbleFrequency * 0.7) * sideWobbleAmount; ballRef.current.position.z += perpZ * Math.cos(lastUpdateTime.current * wobbleFrequency * 0.7) * sideWobbleAmount; } } else { ballRef.current.position.y = position.current.y; } } // Update ball position ballRef.current.position.x = position.current.x; ballRef.current.position.z = position.current.z; // Update debug mesh position if it exists if (debugMode && debugMeshRef.current) { debugMeshRef.current.position.copy(position.current); } }); return ( ); };