diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..ece04c7 Binary files /dev/null and b/public/logo.png differ diff --git a/src/HUD.jsx b/src/HUD.jsx index 7db2828..19bae30 100644 --- a/src/HUD.jsx +++ b/src/HUD.jsx @@ -24,12 +24,23 @@ export const HUD = () => { }, []); return ( - steering wheel +
dadasd +
+ logo +
+
+ steering wheel +
+
); }; diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index 9b6a6c1..7e8628f 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -5,15 +5,19 @@ import { PlayerController } from './PlayerController' import { Track } from './models/Spafrancorchamps-REALISTIC' import { Paris } from './models/Tour_paris_promenade' import { EffectComposer, N8AO, Bloom, DepthOfField, TiltShift2, HueSaturation, SMAA, ChromaticAberration, Vignette } from '@react-three/postprocessing' +import { PlayerControllerAgain } from './PlayerControllerAgain' export const Experience = () => { return ( <> - + {/* */} + { {/* */} {/* */} - + {/* */} { /> {/* */} - + diff --git a/src/components/FlameParticle.jsx b/src/components/FlameParticle.jsx index 4f1f484..43dcdcb 100644 --- a/src/components/FlameParticle.jsx +++ b/src/components/FlameParticle.jsx @@ -25,18 +25,18 @@ export const FlameParticle = ({ position, png, turboColor, delay = 0 }) => { return geom; }, [position]); - useFrame(({clock}) => { + useFrame(({clock}, delta) => { if (!initialized) return; - pointsRef.current.position.y += 0.03; - pointsRef.current.position.z += 0.06; + pointsRef.current.position.y += 0.03 * delta * 144; + pointsRef.current.position.z += 0.06 * delta * 144; if(pointsRef.current.position.y > 0.4) { pointsRef.current.position.y = 0; pointsRef.current.position.z = 0; setOpacity(1); } if(opacity > 0) { - setOpacity((opacity) => opacity - 0.05); + setOpacity((opacity) => opacity - 0.05 * delta * 144); } }); diff --git a/src/components/Particles1.jsx b/src/components/Particles1.jsx index 6e8601a..3743470 100644 --- a/src/components/Particles1.jsx +++ b/src/components/Particles1.jsx @@ -10,23 +10,25 @@ export const Particles1 = ({ turboColor, scale, ...props }) => { z: Math.random() * 0.02, }); const gravity = -0.003; - - useFrame(() => { + + useFrame((state, delta) => { let position = ref.current.position; let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z); - - velocity.current.y += gravity; - - position.x += velocity.current.x; - position.y += velocity.current.y; - position.z += velocity.current.z; - + + // Adjust gravity and velocity based on delta + velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS + + // Scale velocity changes by delta + position.x += velocity.current.x * delta * 144; + position.y += velocity.current.y * delta * 144; + position.z += velocity.current.z * delta * 144; + if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) { const alignmentQuaternion = new THREE.Quaternion(); alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize()); ref.current.quaternion.slerp(alignmentQuaternion, 0.1); } - + if (position.y < 0.05) { position.set(-0.6, 0.05, 0.5); velocity.current = { @@ -35,9 +37,10 @@ export const Particles1 = ({ turboColor, scale, ...props }) => { z: Math.random() * 0.02, }; } - + ref.current.position.set(position.x, position.y, position.z); }); + return ( @@ -45,7 +48,7 @@ export const Particles1 = ({ turboColor, scale, ...props }) => { ); diff --git a/src/components/Particles2.jsx b/src/components/Particles2.jsx index f961cfa..6b8fea1 100644 --- a/src/components/Particles2.jsx +++ b/src/components/Particles2.jsx @@ -10,23 +10,25 @@ export const Particles2 = ({ turboColor, scale, ...props }) => { z: Math.random() * 0.02, }); const gravity = -0.003; - - useFrame(() => { + + useFrame((state, delta) => { let position = ref.current.position; let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z); - - velocity.current.y += gravity; - - position.x += velocity.current.x; - position.y += velocity.current.y; - position.z += velocity.current.z; - + + // Adjust gravity and velocity based on delta + velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS + + // Scale velocity changes by delta + position.x += velocity.current.x * delta * 144; + position.y += velocity.current.y * delta * 144; + position.z += velocity.current.z * delta * 144; + if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) { const alignmentQuaternion = new THREE.Quaternion(); alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize()); ref.current.quaternion.slerp(alignmentQuaternion, 0.1); } - + if (position.y < 0.05) { position.set(0.6, 0.05, 0.5); velocity.current = { @@ -35,9 +37,10 @@ export const Particles2 = ({ turboColor, scale, ...props }) => { z: Math.random() * 0.02, }; } - + ref.current.position.set(position.x, position.y, position.z); }); + return ( @@ -45,7 +48,7 @@ export const Particles2 = ({ turboColor, scale, ...props }) => { ); diff --git a/src/components/Particles3.jsx b/src/components/Particles3.jsx index 94dd839..75327f3 100644 --- a/src/components/Particles3.jsx +++ b/src/components/Particles3.jsx @@ -6,43 +6,41 @@ export const Particles3 = ({ turboColor, scale, ...props }) => { const ref = useRef(); const velocity = useRef({ x: -Math.random() * 0.05, - y: Math.random() * 0.1, + y: Math.random() * 0.05, z: Math.random() * 0.02, }); const gravity = -0.001; - - const frames = useRef(0); - useFrame(() => { + + useFrame((state, delta) => { let position = ref.current.position; let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z); - - velocity.current.y += gravity; - - position.x += velocity.current.x; - position.y += velocity.current.y; - position.z += velocity.current.z; - + + // Adjust gravity and velocity based on delta + velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS + + // Scale velocity changes by delta + position.x += velocity.current.x * delta * 144; + position.y += velocity.current.y * delta * 144; + position.z += velocity.current.z * delta * 144; + if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) { const alignmentQuaternion = new THREE.Quaternion(); alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize()); ref.current.quaternion.slerp(alignmentQuaternion, 0.1); } - - if (frames.current > Math.floor(Math.random() * (150 - 50)) + 50 ) { + + if (position.y < 0.05) { position.set(-0.6, 0.05, 0.5); velocity.current = { x: -Math.random() * 0.05, - y: Math.random() * 0.1, + y: Math.random() * 0.05, z: Math.random() * 0.02, }; - frames.current = 0; } - + ref.current.position.set(position.x, position.y, position.z); - - frames.current++; - console.log(frames.current) }); + return ( @@ -50,7 +48,7 @@ export const Particles3 = ({ turboColor, scale, ...props }) => { ); diff --git a/src/components/Particles4.jsx b/src/components/Particles4.jsx index 6d9a424..f488fc8 100644 --- a/src/components/Particles4.jsx +++ b/src/components/Particles4.jsx @@ -6,43 +6,41 @@ export const Particles4 = ({ turboColor, scale, ...props }) => { const ref = useRef(); const velocity = useRef({ x: Math.random() * 0.05, - y: Math.random() * 0.1, + y: Math.random() * 0.05, z: Math.random() * 0.02, }); const gravity = -0.001; - - const frames = useRef(0); - useFrame(() => { + + useFrame((state, delta) => { let position = ref.current.position; let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z); - - velocity.current.y += gravity; - - position.x += velocity.current.x; - position.y += velocity.current.y; - position.z += velocity.current.z; - + + // Adjust gravity and velocity based on delta + velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS + + // Scale velocity changes by delta + position.x += velocity.current.x * delta * 144; + position.y += velocity.current.y * delta * 144; + position.z += velocity.current.z * delta * 144; + if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) { const alignmentQuaternion = new THREE.Quaternion(); alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize()); ref.current.quaternion.slerp(alignmentQuaternion, 0.1); } - - if (frames.current > Math.floor(Math.random() * (150 - 100)) + 100 ) { + + if (position.y < 0.05) { position.set(0.6, 0.05, 0.5); velocity.current = { x: Math.random() * 0.05, - y: Math.random() * 0.1, + y: Math.random() * 0.05, z: Math.random() * 0.02, }; - frames.current = 0; } - + ref.current.position.set(position.x, position.y, position.z); - - frames.current++; - console.log(frames.current) }); + return ( @@ -50,7 +48,7 @@ export const Particles4 = ({ turboColor, scale, ...props }) => { ); diff --git a/src/components/PlayerController.jsx b/src/components/PlayerController.jsx index cb3b971..4eeea09 100644 --- a/src/components/PlayerController.jsx +++ b/src/components/PlayerController.jsx @@ -37,12 +37,12 @@ export const PlayerController = () => { const kart = useRef(); const cam = useRef(); const initialSpeed = 0; - const maxSpeed = 30; - const boostSpeed = 50; - const acceleration = 0.1; - const decceleration = 0.2; + const maxSpeed = 40; + const boostSpeed = 60; + const acceleration = 30; + const decceleration = 50; const damping = -0.1; - const MaxSteeringSpeed = 0.01; + const MaxSteeringSpeed = 1.1; const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0); const [currentSpeed, setCurrentSpeed] = useState(initialSpeed); const camMaxOffset = 1; @@ -66,16 +66,21 @@ export const PlayerController = () => { let targetZPosition = 8; const [steeringAngleWheels, setSteeringAngleWheels] = useState(0); const engineSound = useRef(); + const cameraLerpFactor = 1; + const marioLerpFactor = 5; const [scale, setScale] = useState(0); + let lastTime = performance.now(); - useFrame(({ pointer, clock }) => { + useFrame(({ pointer, clock}) => { const time = clock.getElapsedTime(); + const currentTime = performance.now(); + const deltaTime = (currentTime - lastTime) * 0.001; // Convert milliseconds to seconds + lastTime = currentTime; if (!body.current && !mario.current) return; // HANDLING AND STEERING - const kartRotation = - kart.current.rotation.y - driftDirection.current * driftForce.current; + const kartRotation = kart.current.rotation.y - driftDirection.current * driftForce.current; const forwardDirection = new THREE.Vector3( -Math.sin(kartRotation), 0, @@ -114,19 +119,19 @@ export const PlayerController = () => { if (upPressed && currentSpeed < maxSpeed) { // Accelerate the kart within the maximum speed limit - setCurrentSpeed(Math.min(currentSpeed + acceleration, maxSpeed)); + setCurrentSpeed(Math.min(currentSpeed + acceleration * deltaTime, maxSpeed)); } else if ( upPressed && currentSpeed > maxSpeed && boostDuration.current > 0 ) { - setCurrentSpeed(Math.max(currentSpeed - decceleration, maxSpeed)); + setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, maxSpeed)); } if (upPressed) { if (currentSteeringSpeed < MaxSteeringSpeed) { setCurrentSteeringSpeed( - Math.min(currentSteeringSpeed + 0.0001, MaxSteeringSpeed) + Math.min(currentSteeringSpeed + 1 * deltaTime, MaxSteeringSpeed) ); } } @@ -137,22 +142,22 @@ export const PlayerController = () => { // DECELERATING else if (!upPressed && !downPressed) { if (currentSteeringSpeed > 0) { - setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 0.00005, 0)); + setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 1 * deltaTime, 0)); } else if (currentSteeringSpeed < 0) { - setCurrentSteeringSpeed(Math.min(currentSteeringSpeed + 0.00005, 0)); + setCurrentSteeringSpeed(Math.min(currentSteeringSpeed + 1 * deltaTime, 0)); } - setCurrentSpeed(Math.max(currentSpeed - decceleration, 0)); + setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0)); } + console.log(currentSteeringSpeed) // Update the kart's rotation based on the steering angle - kart.current.rotation.y += steeringAngle; + kart.current.rotation.y += steeringAngle * deltaTime; - // Apply damping to simulate slowdown when no keys are pressed body.current.applyImpulse( { - x: -body.current.linvel().x * (1 - damping), + x: -body.current.linvel().x, y: 0, - z: -body.current.linvel().z * (1 - damping), + z: -body.current.linvel().z, }, true ); @@ -213,8 +218,8 @@ export const PlayerController = () => { driftForce.current = 0.4; mario.current.rotation.y = THREE.MathUtils.lerp( mario.current.rotation.y, - steeringAngle * 50 + 0.5, - 0.05 + steeringAngle * 0.5, + marioLerpFactor * deltaTime ); accumulatedDriftPower.current += 0.1 * (steeringAngle + 1); } @@ -223,16 +228,19 @@ export const PlayerController = () => { driftForce.current = 0.4; mario.current.rotation.y = THREE.MathUtils.lerp( mario.current.rotation.y, - -(-steeringAngle * 50 + 0.5), - 0.05 + -(-steeringAngle) * 0.5, + marioLerpFactor * deltaTime + ); - accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1); + accumulatedDriftPower.current += 0.1 * (steeringAngle + 1); } + console.log(steeringAngle) if (!driftLeft.current && !driftRight.current) { mario.current.rotation.y = THREE.MathUtils.lerp( mario.current.rotation.y, - steeringAngle * 30, - 0.05 + steeringAngle * 0.5, + marioLerpFactor * deltaTime + ); setScale(0); } @@ -263,15 +271,19 @@ export const PlayerController = () => { // RELEASING DRIFT if (boostDuration.current > 1 && !jumpIsHeld.current) { - setCurrentSpeed(boostSpeed); - boostDuration.current -= 1; - targetZPosition = 10; setIsBoosting(true); - } else if (boostDuration.current <= 1 ) { + + } else if (boostDuration.current <= 1 && !jumpIsHeld.current) { targetZPosition = 8; setIsBoosting(false); } + if(isBoosting){ + setCurrentSpeed(boostSpeed); + boostDuration.current -= Math.floor(deltaTime * 1000); + targetZPosition = 10; + setIsBoosting(true); + } // CAMERA WORK cam.current.updateMatrixWorld(); @@ -279,31 +291,30 @@ export const PlayerController = () => { cam.current.position.x = THREE.MathUtils.lerp( cam.current.position.x, targetXPosition, - 0.01 + cameraLerpFactor * deltaTime ); cam.current.position.z = THREE.MathUtils.lerp( cam.current.position.z, targetZPosition, - 0.01 + cameraLerpFactor * deltaTime ); body.current.applyImpulse( { - x: forwardDirection.x * currentSpeed, + x: forwardDirection.x * currentSpeed * 50 * deltaTime, y: 0 + jumpForce.current, - z: forwardDirection.z * currentSpeed, + z: forwardDirection.z * currentSpeed * 50 * deltaTime, }, true ); // Update the kart's rotation based on the steering angle - setSteeringAngleWheels(steeringAngle * 25); + setSteeringAngleWheels(steeringAngle * 0.1); // SOUND WORK - console.log(body.current.translation()) }); return ( @@ -381,7 +392,7 @@ export const PlayerController = () => { {/* */} diff --git a/src/components/PlayerControllerAgain.jsx b/src/components/PlayerControllerAgain.jsx new file mode 100644 index 0000000..db18206 --- /dev/null +++ b/src/components/PlayerControllerAgain.jsx @@ -0,0 +1,417 @@ +import { Controls } from "../App"; +import { BallCollider, RigidBody, useRapier } from "@react-three/rapier"; +import { + useKeyboardControls, + PerspectiveCamera, + ContactShadows, + Sphere, + OrbitControls, + Trail, + PositionalAudio, +} from "@react-three/drei"; +import { useFrame, useThree } from "@react-three/fiber"; +import { useRef, useState, useEffect, useCallback } from "react"; +import * as THREE from "three"; +import { Model } from "./models/Racing_kart"; +import { FrontRightWheel } from "./models/Front_Right_Wheel"; +import { FrontLeftWheel } from "./models/Front_Left_Wheel"; +import { RearWheels } from "./models/Rear_wheels"; +import gsap from "gsap"; +import { Mario } from "./models/Mario_kart"; +import { Particles1 } from "./Particles1"; +import { DriftParticlesLeft } from "./DriftParticlesLeft"; +import { DriftParticlesRight } from "./DriftParticlesRight"; +import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial"; +import { PointParticle } from "./PointParticle"; +import { FlameParticle } from "./FlameParticle"; +import { FlameParticles } from "./FlameParticles"; + +export const PlayerControllerAgain = () => { + const upPressed = useKeyboardControls((state) => state[Controls.up]); + const downPressed = useKeyboardControls((state) => state[Controls.down]); + const leftPressed = useKeyboardControls((state) => state[Controls.left]); + const rightPressed = useKeyboardControls((state) => state[Controls.right]); + const jumpPressed = useKeyboardControls((state) => state[Controls.jump]); + const [isOnGround, setIsOnGround] = useState(false); + const body = useRef(); + const kart = useRef(); + const cam = useRef(); + const initialSpeed = 0; + const maxSpeed = 45; + const boostSpeed = 70; + const acceleration = 30; + const decceleration = 50; + const damping = 90; + const MaxSteeringSpeed = 1.1; + const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0); + const [currentSpeed, setCurrentSpeed] = useState(initialSpeed); + const camMaxOffset = 1; + let steeringAngle = 0; + const isOnFloor = useRef(false); + const jumpForce = useRef(0); + const jumpIsHeld = useRef(false); + const driftDirection = useRef(0); + const driftLeft = useRef(false); + const driftRight = useRef(false); + const driftForce = useRef(0); + const mario = useRef(); + const accumulatedDriftPower = useRef(0); + const blueTurboThreshold = 10; + const orangeTurboThreshold = 30; + const purpleTurboThreshold = 60; + const [turboColor, setTurboColor] = useState(0xffffff); + const boostDuration = useRef(0); + const [isBoosting, setIsBoosting] = useState(false); + let targetXPosition = 0; + let targetZPosition = 8; + const [steeringAngleWheels, setSteeringAngleWheels] = useState(0); + const engineSound = useRef(); + const cameraLerpFactor = 2; + const marioLerpFactor = 5; + + const [scale, setScale] = useState(0); + let lastTime = performance.now(); + + useFrame(({ pointer, clock }) => { + const time = clock.getElapsedTime(); + const currentTime = performance.now(); + const deltaTime = (currentTime - lastTime) * 0.001; + lastTime = currentTime; + if (!body.current && !mario.current) return; + + // HANDLING AND STEERING + const kartRotation = + kart.current.rotation.y - driftDirection.current * driftForce.current; + const forwardDirection = new THREE.Vector3( + -Math.sin(kartRotation), + 0, + -Math.cos(kartRotation) + ); + body.current.applyImpulse( + { + x: forwardDirection.x * currentSpeed * 50 * deltaTime, + y: 0 + jumpForce.current, + z: forwardDirection.z * currentSpeed * 50 * deltaTime, + }, + true + ); + + // ACCELERATING + if (upPressed && currentSpeed < maxSpeed) { + + setCurrentSpeed( + Math.min(currentSpeed + acceleration * deltaTime, maxSpeed) + ); + } + if (!upPressed) { + if (currentSpeed > 0) { + setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0)); + } + if (currentSteeringSpeed > 0) { + setCurrentSteeringSpeed( + Math.max(currentSteeringSpeed - 1 * deltaTime, 0) + ); + } + } + + if (upPressed) { + if (currentSteeringSpeed < MaxSteeringSpeed) { + setCurrentSteeringSpeed( + Math.min(currentSteeringSpeed + 1 * deltaTime, MaxSteeringSpeed) + ); + } + } + if (leftPressed && currentSpeed > 0) { + steeringAngle = currentSteeringSpeed; + targetXPosition = -camMaxOffset; + } else if (rightPressed && currentSpeed > 0) { + steeringAngle = -currentSteeringSpeed; + targetXPosition = camMaxOffset; + } else { + steeringAngle = 0; + targetXPosition = 0; + 1; + } + + if (!driftLeft.current && !driftRight.current) { + steeringAngle = currentSteeringSpeed * -pointer.x; + targetXPosition = -camMaxOffset * -pointer.x; + } else if (driftLeft.current && !driftRight.current) { + steeringAngle = currentSteeringSpeed * -(pointer.x - 0.8); + targetXPosition = -camMaxOffset * -pointer.x; + } else if (driftRight.current && !driftLeft.current) { + steeringAngle = currentSteeringSpeed * -(pointer.x + 0.8); + targetXPosition = -camMaxOffset * -pointer.x; + } + kart.current.rotation.y += steeringAngle * deltaTime; + body.current.applyImpulse( + { + x: -body.current.linvel().x * damping * deltaTime, + y: 0, + z: -body.current.linvel().z * damping * deltaTime, + }, + true + ); + body.current.applyImpulse( + { + x: forwardDirection.x * currentSpeed * 50 * deltaTime, + y: 0 + jumpForce.current, + z: forwardDirection.z * currentSpeed * 50 * deltaTime, + }, + true + ); + + const bodyPosition = body.current.translation(); + kart.current.position.set( + bodyPosition.x, + bodyPosition.y - 0.5, + bodyPosition.z + ); + + // JUMPING + if (jumpPressed && isOnFloor.current && !jumpIsHeld.current) { + jumpForce.current += 7; + isOnFloor.current = false; + jumpIsHeld.current = true; + } + + if (!isOnFloor.current && jumpForce.current > 0) { + jumpForce.current -= 1; + } + if (!jumpPressed) { + jumpIsHeld.current = false; + driftDirection.current = 0; + driftForce.current = 0; + driftLeft.current = false; + driftRight.current = false; + } + + // DRIFTING + if ( + jumpIsHeld.current && + currentSteeringSpeed > 0 && + pointer.x < -0.1 && + !driftRight.current + ) { + driftLeft.current = true; + } + if ( + jumpIsHeld.current && + currentSteeringSpeed > 0 && + pointer.x > 0.1 && + !driftLeft.current + ) { + driftRight.current = true; + } + + if (driftLeft.current) { + driftDirection.current = 1; + driftForce.current = 0.15; + mario.current.rotation.y = THREE.MathUtils.lerp( + mario.current.rotation.y, + steeringAngle * 0.5, + marioLerpFactor * deltaTime + ); + accumulatedDriftPower.current += 10 * (steeringAngle + 1) * deltaTime; + } + if (driftRight.current) { + driftDirection.current = -1; + driftForce.current = 0.15; + mario.current.rotation.y = THREE.MathUtils.lerp( + mario.current.rotation.y, + -(-steeringAngle) * 0.5, + marioLerpFactor * deltaTime + ); + accumulatedDriftPower.current += 10 * (-steeringAngle + 1) * deltaTime; + } + + // console.log(steeringAngle) + if (!driftLeft.current && !driftRight.current) { + mario.current.rotation.y = THREE.MathUtils.lerp( + mario.current.rotation.y, + steeringAngle * 0.2, + marioLerpFactor * deltaTime + ); + setScale(0); + accumulatedDriftPower.current = 0; + setTurboColor(0xffffff); + + } + + + if (accumulatedDriftPower.current > blueTurboThreshold) { + setTurboColor(0x00ffff); + boostDuration.current = 50; + } + if (accumulatedDriftPower.current > orangeTurboThreshold) { + setTurboColor(0xffcf00); + boostDuration.current = 100; + } + if (accumulatedDriftPower.current > purpleTurboThreshold) { + setTurboColor(0xff00ff); + boostDuration.current = 250; + } + + if (driftLeft.current || driftRight.current) { + const oscillation = Math.sin(time * 1000) * 0.1; + + const vibration = oscillation + 0.9; + + if (turboColor === 0xffffff) { + setScale(vibration * 0.8); + } else { + setScale(vibration); + } + } + + // RELEASING DRIFT + if (isBoosting) { + setCurrentSpeed(boostSpeed); + boostDuration.current -= deltaTime * 200; + targetZPosition = 10; + + if (boostDuration.current <= 0) { + setIsBoosting(false); + targetZPosition = 8; + } + } else if (boostDuration.current > 0 && !jumpIsHeld.current) { + setIsBoosting(true); + } + + if (!isBoosting && currentSpeed === boostSpeed) { + setCurrentSpeed(maxSpeed); + } + + + if (!isBoosting) { + if (upPressed && currentSpeed < maxSpeed) { + setCurrentSpeed(Math.min(currentSpeed + acceleration * deltaTime, maxSpeed)); + } else if (!upPressed && currentSpeed > 0) { + setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0)); + } + } + + // Debug logging + // console.log(`Speed: ${currentSpeed}, Boosting: ${isBoosting}, Boost Duration: ${boostDuration.current}`); + + // CAMERA WORK + + cam.current.position.x = THREE.MathUtils.lerp( + cam.current.position.x, + targetXPosition, + cameraLerpFactor * deltaTime + ); + + cam.current.position.z = THREE.MathUtils.lerp( + cam.current.position.z, + targetZPosition, + cameraLerpFactor * deltaTime + ); + + cam.current.updateMatrixWorld(); + + setSteeringAngleWheels(steeringAngle * 0.1); + //misc / debug + + // SOUND WORK + }); + + return ( + + + { + isOnFloor.current = true; + }} + /> + onCollisionEnter= + {(event) => { + isOnFloor.current = false; + }} + + + + + + + + + + + + + + + + + {/* */} + + + + + + + + + + {/* */} + + {/* */} + + + ); +}; diff --git a/src/components/PointParticle.jsx b/src/components/PointParticle.jsx index 8ca87b0..46e7fc6 100644 --- a/src/components/PointParticle.jsx +++ b/src/components/PointParticle.jsx @@ -25,10 +25,11 @@ export const PointParticle = ({ position, png, turboColor }) => { useFrame(() => { if (turboColor === 0xffffff) return; - if (size < 5) { + if (size < 3) { setSize((size) => size + 0.5); } else if (opacity > 0) { setOpacity((opacity) => opacity - 0.05); + setSize((size) => size + 0.2); } }); diff --git a/src/index.css b/src/index.css index cb81801..57ceffb 100644 --- a/src/index.css +++ b/src/index.css @@ -6,20 +6,48 @@ * body { margin: 0; - cursor:none; + /* cursor:none; */ overflow-y: none; overflow-x: none; } - +/* body::-webkit-scrollbar { display: none; } -img { +.wheel{ position:absolute; -z-index: 100; top:0; -width: 200px; + opacity: 0.2; -} \ No newline at end of file +img{ + width: 200px; +} + + +} + + +.logo{ + position:absolute; +top:150px; +left:500px; + +opacity: 1; +img{ + width: 600px; + animation: bounce 0.4s infinite cubic-bezier(.71,1.94,.5,.61) + +} +} + + +@keyframes bounce { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } +} */ \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index e35d3a2..dc4b631 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -7,6 +7,6 @@ import { HUD } from './HUD' ReactDOM.createRoot(document.getElementById('root')).render( - + {/* */} , )