fix:(game) Fixed constant refresh rate behavior
parent
a819fcae4c
commit
2753ec7127
|
@ -10,8 +10,8 @@ import { PlayerControllerAgain } from './PlayerControllerAgain'
|
||||||
export const Experience = () => {
|
export const Experience = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* <PlayerController /> */}
|
<PlayerController />
|
||||||
<PlayerControllerAgain />
|
{/* <PlayerControllerAgain /> */}
|
||||||
<Ground position={[0, 0, 0]} />
|
<Ground position={[0, 0, 0]} />
|
||||||
<Environment
|
<Environment
|
||||||
resolution={256}
|
resolution={256}
|
||||||
|
|
|
@ -37,12 +37,12 @@ export const PlayerController = () => {
|
||||||
const kart = useRef();
|
const kart = useRef();
|
||||||
const cam = useRef();
|
const cam = useRef();
|
||||||
const initialSpeed = 0;
|
const initialSpeed = 0;
|
||||||
const maxSpeed = 40;
|
const maxSpeed = 30;
|
||||||
const boostSpeed = 60;
|
const boostSpeed = 50;
|
||||||
const acceleration = 30;
|
const acceleration = 0.1;
|
||||||
const decceleration = 50;
|
const decceleration = 0.2;
|
||||||
const damping = -0.1;
|
const damping = -0.1;
|
||||||
const MaxSteeringSpeed = 1.1;
|
const MaxSteeringSpeed = 0.01;
|
||||||
const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0);
|
const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0);
|
||||||
const [currentSpeed, setCurrentSpeed] = useState(initialSpeed);
|
const [currentSpeed, setCurrentSpeed] = useState(initialSpeed);
|
||||||
const camMaxOffset = 1;
|
const camMaxOffset = 1;
|
||||||
|
@ -66,21 +66,16 @@ export const PlayerController = () => {
|
||||||
let targetZPosition = 8;
|
let targetZPosition = 8;
|
||||||
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
||||||
const engineSound = useRef();
|
const engineSound = useRef();
|
||||||
const cameraLerpFactor = 1;
|
|
||||||
const marioLerpFactor = 5;
|
|
||||||
|
|
||||||
const [scale, setScale] = useState(0);
|
const [scale, setScale] = useState(0);
|
||||||
let lastTime = performance.now();
|
|
||||||
|
|
||||||
useFrame(({ pointer, clock}) => {
|
useFrame(({ pointer, clock }, delta) => {
|
||||||
const time = clock.getElapsedTime();
|
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;
|
if (!body.current && !mario.current) return;
|
||||||
|
|
||||||
// HANDLING AND STEERING
|
// 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(
|
const forwardDirection = new THREE.Vector3(
|
||||||
-Math.sin(kartRotation),
|
-Math.sin(kartRotation),
|
||||||
0,
|
0,
|
||||||
|
@ -119,45 +114,45 @@ export const PlayerController = () => {
|
||||||
|
|
||||||
if (upPressed && currentSpeed < maxSpeed) {
|
if (upPressed && currentSpeed < maxSpeed) {
|
||||||
// Accelerate the kart within the maximum speed limit
|
// Accelerate the kart within the maximum speed limit
|
||||||
setCurrentSpeed(Math.min(currentSpeed + acceleration * deltaTime, maxSpeed));
|
setCurrentSpeed(Math.min(currentSpeed + acceleration * delta * 144, maxSpeed));
|
||||||
} else if (
|
} else if (
|
||||||
upPressed &&
|
upPressed &&
|
||||||
currentSpeed > maxSpeed &&
|
currentSpeed > maxSpeed &&
|
||||||
boostDuration.current > 0
|
boostDuration.current > 0
|
||||||
) {
|
) {
|
||||||
setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, maxSpeed));
|
setCurrentSpeed(Math.max(currentSpeed - decceleration * delta * 144, maxSpeed));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (upPressed) {
|
if (upPressed) {
|
||||||
if (currentSteeringSpeed < MaxSteeringSpeed) {
|
if (currentSteeringSpeed < MaxSteeringSpeed) {
|
||||||
setCurrentSteeringSpeed(
|
setCurrentSteeringSpeed(
|
||||||
Math.min(currentSteeringSpeed + 1 * deltaTime, MaxSteeringSpeed)
|
Math.min(currentSteeringSpeed + 0.0001 * delta * 144, MaxSteeringSpeed)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// REVERSING
|
// REVERSING
|
||||||
if (downPressed && currentSpeed < -maxSpeed) {
|
if (downPressed && currentSpeed < -maxSpeed) {
|
||||||
setCurrentSpeed(Math.max(currentSpeed - acceleration, -maxSpeed));
|
setCurrentSpeed(Math.max(currentSpeed - acceleration * delta * 144, -maxSpeed));
|
||||||
}
|
}
|
||||||
// DECELERATING
|
// DECELERATING
|
||||||
else if (!upPressed && !downPressed) {
|
else if (!upPressed && !downPressed) {
|
||||||
if (currentSteeringSpeed > 0) {
|
if (currentSteeringSpeed > 0) {
|
||||||
setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 1 * deltaTime, 0));
|
setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 0.00005 * delta * 144, 0));
|
||||||
} else if (currentSteeringSpeed < 0) {
|
} else if (currentSteeringSpeed < 0) {
|
||||||
setCurrentSteeringSpeed(Math.min(currentSteeringSpeed + 1 * deltaTime, 0));
|
setCurrentSteeringSpeed(Math.min(currentSteeringSpeed + 0.00005 * delta * 144, 0));
|
||||||
}
|
}
|
||||||
setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0));
|
setCurrentSpeed(Math.max(currentSpeed - decceleration * delta * 144, 0));
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(currentSteeringSpeed)
|
|
||||||
// Update the kart's rotation based on the steering angle
|
// Update the kart's rotation based on the steering angle
|
||||||
kart.current.rotation.y += steeringAngle * deltaTime;
|
kart.current.rotation.y += steeringAngle * delta * 144;
|
||||||
|
|
||||||
|
// Apply damping to simulate slowdown when no keys are pressed
|
||||||
body.current.applyImpulse(
|
body.current.applyImpulse(
|
||||||
{
|
{
|
||||||
x: -body.current.linvel().x,
|
x: -body.current.linvel().x * (1 - damping) * delta * 144,
|
||||||
y: 0,
|
y: 0,
|
||||||
z: -body.current.linvel().z,
|
z: -body.current.linvel().z * (1 - damping) * delta * 144,
|
||||||
},
|
},
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
@ -170,13 +165,13 @@ export const PlayerController = () => {
|
||||||
|
|
||||||
// JUMPING
|
// JUMPING
|
||||||
if (jumpPressed && isOnFloor.current && !jumpIsHeld.current) {
|
if (jumpPressed && isOnFloor.current && !jumpIsHeld.current) {
|
||||||
jumpForce.current += 10;
|
jumpForce.current += 10 ;
|
||||||
isOnFloor.current = false;
|
isOnFloor.current = false;
|
||||||
jumpIsHeld.current = true;
|
jumpIsHeld.current = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isOnFloor.current && jumpForce.current > 0) {
|
if (!isOnFloor.current && jumpForce.current > 0) {
|
||||||
jumpForce.current -= 1;
|
jumpForce.current -= 1 * delta * 144;
|
||||||
}
|
}
|
||||||
if (!jumpPressed) {
|
if (!jumpPressed) {
|
||||||
jumpIsHeld.current = false;
|
jumpIsHeld.current = false;
|
||||||
|
@ -189,7 +184,7 @@ export const PlayerController = () => {
|
||||||
if (
|
if (
|
||||||
jumpIsHeld.current &&
|
jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
currentSteeringSpeed > 0 &&
|
||||||
pointer.x < -0.24 &&
|
pointer.x < -0.1 &&
|
||||||
!driftRight.current
|
!driftRight.current
|
||||||
) {
|
) {
|
||||||
driftLeft.current = true;
|
driftLeft.current = true;
|
||||||
|
@ -197,7 +192,7 @@ export const PlayerController = () => {
|
||||||
if (
|
if (
|
||||||
jumpIsHeld.current &&
|
jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
currentSteeringSpeed > 0 &&
|
||||||
pointer.x > 0.24 &&
|
pointer.x > 0.1 &&
|
||||||
!driftLeft.current
|
!driftLeft.current
|
||||||
) {
|
) {
|
||||||
driftRight.current = true;
|
driftRight.current = true;
|
||||||
|
@ -207,7 +202,7 @@ export const PlayerController = () => {
|
||||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||||
mario.current.rotation.y,
|
mario.current.rotation.y,
|
||||||
0,
|
0,
|
||||||
0.0001
|
0.0001 * delta * 144
|
||||||
);
|
);
|
||||||
setTurboColor(0xffffff);
|
setTurboColor(0xffffff);
|
||||||
accumulatedDriftPower.current = 0;
|
accumulatedDriftPower.current = 0;
|
||||||
|
@ -218,29 +213,26 @@ export const PlayerController = () => {
|
||||||
driftForce.current = 0.4;
|
driftForce.current = 0.4;
|
||||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||||
mario.current.rotation.y,
|
mario.current.rotation.y,
|
||||||
steeringAngle * 0.5,
|
steeringAngle * 50 + 0.5,
|
||||||
marioLerpFactor * deltaTime
|
0.05 * delta * 144
|
||||||
);
|
);
|
||||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1);
|
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
|
||||||
}
|
}
|
||||||
if (driftRight.current) {
|
if (driftRight.current) {
|
||||||
driftDirection.current = -1;
|
driftDirection.current = -1;
|
||||||
driftForce.current = 0.4;
|
driftForce.current = 0.4;
|
||||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||||
mario.current.rotation.y,
|
mario.current.rotation.y,
|
||||||
-(-steeringAngle) * 0.5,
|
-(-steeringAngle * 50 + 0.5),
|
||||||
marioLerpFactor * deltaTime
|
0.05 * delta * 144
|
||||||
|
|
||||||
);
|
);
|
||||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1);
|
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144 ;
|
||||||
}
|
}
|
||||||
console.log(steeringAngle)
|
|
||||||
if (!driftLeft.current && !driftRight.current) {
|
if (!driftLeft.current && !driftRight.current) {
|
||||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||||
mario.current.rotation.y,
|
mario.current.rotation.y,
|
||||||
steeringAngle * 0.5,
|
steeringAngle * 30,
|
||||||
marioLerpFactor * deltaTime
|
0.05 * delta * 144
|
||||||
|
|
||||||
);
|
);
|
||||||
setScale(0);
|
setScale(0);
|
||||||
}
|
}
|
||||||
|
@ -258,7 +250,7 @@ export const PlayerController = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (driftLeft.current || driftRight.current) {
|
if (driftLeft.current || driftRight.current) {
|
||||||
const oscillation = Math.sin(time * 1000) * 0.1;
|
const oscillation = Math.sin(time * 1000) * 0.1 ;
|
||||||
|
|
||||||
const vibration = oscillation + 0.9;
|
const vibration = oscillation + 0.9;
|
||||||
|
|
||||||
|
@ -271,19 +263,15 @@ export const PlayerController = () => {
|
||||||
// RELEASING DRIFT
|
// RELEASING DRIFT
|
||||||
|
|
||||||
if (boostDuration.current > 1 && !jumpIsHeld.current) {
|
if (boostDuration.current > 1 && !jumpIsHeld.current) {
|
||||||
|
setCurrentSpeed(boostSpeed);
|
||||||
|
boostDuration.current -= 1 * delta * 144;
|
||||||
|
targetZPosition = 10;
|
||||||
setIsBoosting(true);
|
setIsBoosting(true);
|
||||||
|
} else if (boostDuration.current <= 1 ) {
|
||||||
} else if (boostDuration.current <= 1 && !jumpIsHeld.current) {
|
|
||||||
targetZPosition = 8;
|
targetZPosition = 8;
|
||||||
setIsBoosting(false);
|
setIsBoosting(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(isBoosting){
|
|
||||||
setCurrentSpeed(boostSpeed);
|
|
||||||
boostDuration.current -= Math.floor(deltaTime * 1000);
|
|
||||||
targetZPosition = 10;
|
|
||||||
setIsBoosting(true);
|
|
||||||
}
|
|
||||||
// CAMERA WORK
|
// CAMERA WORK
|
||||||
|
|
||||||
cam.current.updateMatrixWorld();
|
cam.current.updateMatrixWorld();
|
||||||
|
@ -291,30 +279,31 @@ export const PlayerController = () => {
|
||||||
cam.current.position.x = THREE.MathUtils.lerp(
|
cam.current.position.x = THREE.MathUtils.lerp(
|
||||||
cam.current.position.x,
|
cam.current.position.x,
|
||||||
targetXPosition,
|
targetXPosition,
|
||||||
cameraLerpFactor * deltaTime
|
0.01 * delta * 144
|
||||||
);
|
);
|
||||||
|
|
||||||
cam.current.position.z = THREE.MathUtils.lerp(
|
cam.current.position.z = THREE.MathUtils.lerp(
|
||||||
cam.current.position.z,
|
cam.current.position.z,
|
||||||
targetZPosition,
|
targetZPosition,
|
||||||
cameraLerpFactor * deltaTime
|
0.01 * delta * 144
|
||||||
);
|
);
|
||||||
|
|
||||||
body.current.applyImpulse(
|
body.current.applyImpulse(
|
||||||
{
|
{
|
||||||
x: forwardDirection.x * currentSpeed * 50 * deltaTime,
|
x: forwardDirection.x * currentSpeed * delta * 144,
|
||||||
y: 0 + jumpForce.current,
|
y: 0 + jumpForce.current * delta * 144,
|
||||||
z: forwardDirection.z * currentSpeed * 50 * deltaTime,
|
z: forwardDirection.z * currentSpeed * delta * 144,
|
||||||
},
|
},
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
// Update the kart's rotation based on the steering angle
|
// Update the kart's rotation based on the steering angle
|
||||||
setSteeringAngleWheels(steeringAngle * 0.1);
|
setSteeringAngleWheels(steeringAngle * 25);
|
||||||
|
|
||||||
// SOUND WORK
|
// SOUND WORK
|
||||||
|
|
||||||
|
|
||||||
|
console.log(body.current.translation())
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -392,7 +381,7 @@ export const PlayerController = () => {
|
||||||
<PerspectiveCamera
|
<PerspectiveCamera
|
||||||
makeDefault
|
makeDefault
|
||||||
position={[0, 2, 8]}
|
position={[0, 2, 8]}
|
||||||
fov={40}
|
fov={50}
|
||||||
ref={cam}
|
ref={cam}
|
||||||
/>
|
/>
|
||||||
{/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}
|
{/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}
|
||||||
|
@ -400,4 +389,4 @@ export const PlayerController = () => {
|
||||||
</group>
|
</group>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
|
@ -23,13 +23,13 @@ export const PointParticle = ({ position, png, turboColor }) => {
|
||||||
setOpacity(1);
|
setOpacity(1);
|
||||||
}, [turboColor]);
|
}, [turboColor]);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame((_, delta) => {
|
||||||
if (turboColor === 0xffffff) return;
|
if (turboColor === 0xffffff) return;
|
||||||
if (size < 3) {
|
if (size < 3) {
|
||||||
setSize((size) => size + 0.5);
|
setSize((size) => size + 0.5 * delta * 144);
|
||||||
} else if (opacity > 0) {
|
} else if (opacity > 0) {
|
||||||
setOpacity((opacity) => opacity - 0.05);
|
setOpacity((opacity) => opacity - 0.05 * delta * 144);
|
||||||
setSize((size) => size + 0.2);
|
setSize((size) => size + 0.2 * delta * 144);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue