fix:(game) Fixed constant refresh rate behavior
parent
7daaf262aa
commit
f5ebee224c
Binary file not shown.
After Width: | Height: | Size: 127 KiB |
13
src/HUD.jsx
13
src/HUD.jsx
|
@ -24,12 +24,23 @@ export const HUD = () => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className="overlay"> dadasd
|
||||||
|
<div className="logo">
|
||||||
|
<img src="./logo.png" alt="logo" />
|
||||||
|
</div>
|
||||||
|
<div className="wheel">
|
||||||
<img
|
<img
|
||||||
ref={wheel}
|
ref={wheel}
|
||||||
src="./steering_wheel.png"
|
src="./steering_wheel.png"
|
||||||
alt="steering wheel"
|
alt="steering wheel"
|
||||||
className="steering-wheel"
|
className="steering-wheel"
|
||||||
style={{ position: 'absolute', pointerEvents: 'none', transformOrigin: 'center' }}
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
pointerEvents: "none",
|
||||||
|
transformOrigin: "center",
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,15 +5,19 @@ import { PlayerController } from './PlayerController'
|
||||||
import { Track } from './models/Spafrancorchamps-REALISTIC'
|
import { Track } from './models/Spafrancorchamps-REALISTIC'
|
||||||
import { Paris } from './models/Tour_paris_promenade'
|
import { Paris } from './models/Tour_paris_promenade'
|
||||||
import { EffectComposer, N8AO, Bloom, DepthOfField, TiltShift2, HueSaturation, SMAA, ChromaticAberration, Vignette } from '@react-three/postprocessing'
|
import { EffectComposer, N8AO, Bloom, DepthOfField, TiltShift2, HueSaturation, SMAA, ChromaticAberration, Vignette } from '@react-three/postprocessing'
|
||||||
|
import { PlayerControllerAgain } from './PlayerControllerAgain'
|
||||||
|
|
||||||
export const Experience = () => {
|
export const Experience = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PlayerController />
|
{/* <PlayerController /> */}
|
||||||
|
<PlayerControllerAgain />
|
||||||
<Ground position={[0, 0, 0]} />
|
<Ground position={[0, 0, 0]} />
|
||||||
<Environment
|
<Environment
|
||||||
resolution={256}
|
resolution={256}
|
||||||
preset='lobby'
|
preset='lobby'
|
||||||
|
background
|
||||||
|
ground
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<directionalLight
|
<directionalLight
|
||||||
|
@ -30,7 +34,7 @@ export const Experience = () => {
|
||||||
|
|
||||||
{/* <ambientLight intensity={0.2} /> */}
|
{/* <ambientLight intensity={0.2} /> */}
|
||||||
{/* <spotLight position={[10, 20, 10]} angle={0.12} penumbra={1} intensity={1} castShadow shadow-mapSize={1024} /> */}
|
{/* <spotLight position={[10, 20, 10]} angle={0.12} penumbra={1} intensity={1} castShadow shadow-mapSize={1024} /> */}
|
||||||
<Paris position={[0, 0, 0]} />
|
{/* <Paris position={[0, 0, 0]} /> */}
|
||||||
<EffectComposer
|
<EffectComposer
|
||||||
multisampling={0}
|
multisampling={0}
|
||||||
disableNormalPass
|
disableNormalPass
|
||||||
|
@ -48,12 +52,12 @@ export const Experience = () => {
|
||||||
/>
|
/>
|
||||||
{/* <DepthOfField
|
{/* <DepthOfField
|
||||||
target={[0, 0, 12]}
|
target={[0, 0, 12]}
|
||||||
focalLength={10}
|
focalLength={15}
|
||||||
bokehScale={20}
|
bokehScale={60}
|
||||||
resolutionScale={1}
|
resolutionScale={1}
|
||||||
/> */}
|
/> */}
|
||||||
<TiltShift2/>
|
<TiltShift2/>
|
||||||
<ChromaticAberration offset={[0.001, 0.001]} />
|
<ChromaticAberration offset={[0.0006, 0.0006]} />
|
||||||
<HueSaturation saturation={0.1} />
|
<HueSaturation saturation={0.1} />
|
||||||
<Vignette eskil={false} offset={0.1} darkness={0.4} />
|
<Vignette eskil={false} offset={0.1} darkness={0.4} />
|
||||||
</EffectComposer>
|
</EffectComposer>
|
||||||
|
|
|
@ -25,18 +25,18 @@ export const FlameParticle = ({ position, png, turboColor, delay = 0 }) => {
|
||||||
return geom;
|
return geom;
|
||||||
}, [position]);
|
}, [position]);
|
||||||
|
|
||||||
useFrame(({clock}) => {
|
useFrame(({clock}, delta) => {
|
||||||
if (!initialized) return;
|
if (!initialized) return;
|
||||||
|
|
||||||
pointsRef.current.position.y += 0.03;
|
pointsRef.current.position.y += 0.03 * delta * 144;
|
||||||
pointsRef.current.position.z += 0.06;
|
pointsRef.current.position.z += 0.06 * delta * 144;
|
||||||
if(pointsRef.current.position.y > 0.4) {
|
if(pointsRef.current.position.y > 0.4) {
|
||||||
pointsRef.current.position.y = 0;
|
pointsRef.current.position.y = 0;
|
||||||
pointsRef.current.position.z = 0;
|
pointsRef.current.position.z = 0;
|
||||||
setOpacity(1);
|
setOpacity(1);
|
||||||
}
|
}
|
||||||
if(opacity > 0) {
|
if(opacity > 0) {
|
||||||
setOpacity((opacity) => opacity - 0.05);
|
setOpacity((opacity) => opacity - 0.05 * delta * 144);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -11,15 +11,17 @@ export const Particles1 = ({ turboColor, scale, ...props }) => {
|
||||||
});
|
});
|
||||||
const gravity = -0.003;
|
const gravity = -0.003;
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame((state, delta) => {
|
||||||
let position = ref.current.position;
|
let position = ref.current.position;
|
||||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||||
|
|
||||||
velocity.current.y += gravity;
|
// Adjust gravity and velocity based on delta
|
||||||
|
velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
|
||||||
|
|
||||||
position.x += velocity.current.x;
|
// Scale velocity changes by delta
|
||||||
position.y += velocity.current.y;
|
position.x += velocity.current.x * delta * 144;
|
||||||
position.z += velocity.current.z;
|
position.y += velocity.current.y * delta * 144;
|
||||||
|
position.z += velocity.current.z * delta * 144;
|
||||||
|
|
||||||
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
||||||
const alignmentQuaternion = new THREE.Quaternion();
|
const alignmentQuaternion = new THREE.Quaternion();
|
||||||
|
@ -39,13 +41,14 @@ export const Particles1 = ({ turboColor, scale, ...props }) => {
|
||||||
ref.current.position.set(position.x, position.y, position.z);
|
ref.current.position.set(position.x, position.y, position.z);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
|
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
|
||||||
<sphereGeometry args={[0.01, 16, 16]} />
|
<sphereGeometry args={[0.01, 16, 16]} />
|
||||||
<meshStandardMaterial
|
<meshStandardMaterial
|
||||||
emissive={turboColor}
|
emissive={turboColor}
|
||||||
toneMapped={false}
|
toneMapped={false}
|
||||||
emissiveIntensity={10}
|
emissiveIntensity={5}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
|
|
|
@ -11,15 +11,17 @@ export const Particles2 = ({ turboColor, scale, ...props }) => {
|
||||||
});
|
});
|
||||||
const gravity = -0.003;
|
const gravity = -0.003;
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame((state, delta) => {
|
||||||
let position = ref.current.position;
|
let position = ref.current.position;
|
||||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||||
|
|
||||||
velocity.current.y += gravity;
|
// Adjust gravity and velocity based on delta
|
||||||
|
velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
|
||||||
|
|
||||||
position.x += velocity.current.x;
|
// Scale velocity changes by delta
|
||||||
position.y += velocity.current.y;
|
position.x += velocity.current.x * delta * 144;
|
||||||
position.z += velocity.current.z;
|
position.y += velocity.current.y * delta * 144;
|
||||||
|
position.z += velocity.current.z * delta * 144;
|
||||||
|
|
||||||
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
||||||
const alignmentQuaternion = new THREE.Quaternion();
|
const alignmentQuaternion = new THREE.Quaternion();
|
||||||
|
@ -39,13 +41,14 @@ export const Particles2 = ({ turboColor, scale, ...props }) => {
|
||||||
ref.current.position.set(position.x, position.y, position.z);
|
ref.current.position.set(position.x, position.y, position.z);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
|
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
|
||||||
<sphereGeometry args={[0.01, 16, 16]} />
|
<sphereGeometry args={[0.01, 16, 16]} />
|
||||||
<meshStandardMaterial
|
<meshStandardMaterial
|
||||||
emissive={turboColor}
|
emissive={turboColor}
|
||||||
toneMapped={false}
|
toneMapped={false}
|
||||||
emissiveIntensity={10}
|
emissiveIntensity={5}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
|
|
|
@ -6,21 +6,22 @@ export const Particles3 = ({ turboColor, scale, ...props }) => {
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
const velocity = useRef({
|
const velocity = useRef({
|
||||||
x: -Math.random() * 0.05,
|
x: -Math.random() * 0.05,
|
||||||
y: Math.random() * 0.1,
|
y: Math.random() * 0.05,
|
||||||
z: Math.random() * 0.02,
|
z: Math.random() * 0.02,
|
||||||
});
|
});
|
||||||
const gravity = -0.001;
|
const gravity = -0.001;
|
||||||
|
|
||||||
const frames = useRef(0);
|
useFrame((state, delta) => {
|
||||||
useFrame(() => {
|
|
||||||
let position = ref.current.position;
|
let position = ref.current.position;
|
||||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||||
|
|
||||||
velocity.current.y += gravity;
|
// Adjust gravity and velocity based on delta
|
||||||
|
velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
|
||||||
|
|
||||||
position.x += velocity.current.x;
|
// Scale velocity changes by delta
|
||||||
position.y += velocity.current.y;
|
position.x += velocity.current.x * delta * 144;
|
||||||
position.z += velocity.current.z;
|
position.y += velocity.current.y * delta * 144;
|
||||||
|
position.z += velocity.current.z * delta * 144;
|
||||||
|
|
||||||
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
||||||
const alignmentQuaternion = new THREE.Quaternion();
|
const alignmentQuaternion = new THREE.Quaternion();
|
||||||
|
@ -28,29 +29,26 @@ export const Particles3 = ({ turboColor, scale, ...props }) => {
|
||||||
ref.current.quaternion.slerp(alignmentQuaternion, 0.1);
|
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);
|
position.set(-0.6, 0.05, 0.5);
|
||||||
velocity.current = {
|
velocity.current = {
|
||||||
x: -Math.random() * 0.05,
|
x: -Math.random() * 0.05,
|
||||||
y: Math.random() * 0.1,
|
y: Math.random() * 0.05,
|
||||||
z: Math.random() * 0.02,
|
z: Math.random() * 0.02,
|
||||||
};
|
};
|
||||||
frames.current = 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ref.current.position.set(position.x, position.y, position.z);
|
ref.current.position.set(position.x, position.y, position.z);
|
||||||
|
|
||||||
frames.current++;
|
|
||||||
console.log(frames.current)
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 20, scale]}>
|
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 20, scale]}>
|
||||||
<sphereGeometry args={[0.01, 16, 16]} />
|
<sphereGeometry args={[0.01, 16, 16]} />
|
||||||
<meshStandardMaterial
|
<meshStandardMaterial
|
||||||
emissive={turboColor}
|
emissive={turboColor}
|
||||||
toneMapped={false}
|
toneMapped={false}
|
||||||
emissiveIntensity={10}
|
emissiveIntensity={5}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
|
|
|
@ -6,21 +6,22 @@ export const Particles4 = ({ turboColor, scale, ...props }) => {
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
const velocity = useRef({
|
const velocity = useRef({
|
||||||
x: Math.random() * 0.05,
|
x: Math.random() * 0.05,
|
||||||
y: Math.random() * 0.1,
|
y: Math.random() * 0.05,
|
||||||
z: Math.random() * 0.02,
|
z: Math.random() * 0.02,
|
||||||
});
|
});
|
||||||
const gravity = -0.001;
|
const gravity = -0.001;
|
||||||
|
|
||||||
const frames = useRef(0);
|
useFrame((state, delta) => {
|
||||||
useFrame(() => {
|
|
||||||
let position = ref.current.position;
|
let position = ref.current.position;
|
||||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||||
|
|
||||||
velocity.current.y += gravity;
|
// Adjust gravity and velocity based on delta
|
||||||
|
velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
|
||||||
|
|
||||||
position.x += velocity.current.x;
|
// Scale velocity changes by delta
|
||||||
position.y += velocity.current.y;
|
position.x += velocity.current.x * delta * 144;
|
||||||
position.z += velocity.current.z;
|
position.y += velocity.current.y * delta * 144;
|
||||||
|
position.z += velocity.current.z * delta * 144;
|
||||||
|
|
||||||
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
||||||
const alignmentQuaternion = new THREE.Quaternion();
|
const alignmentQuaternion = new THREE.Quaternion();
|
||||||
|
@ -28,29 +29,26 @@ export const Particles4 = ({ turboColor, scale, ...props }) => {
|
||||||
ref.current.quaternion.slerp(alignmentQuaternion, 0.1);
|
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);
|
position.set(0.6, 0.05, 0.5);
|
||||||
velocity.current = {
|
velocity.current = {
|
||||||
x: Math.random() * 0.05,
|
x: Math.random() * 0.05,
|
||||||
y: Math.random() * 0.1,
|
y: Math.random() * 0.05,
|
||||||
z: Math.random() * 0.02,
|
z: Math.random() * 0.02,
|
||||||
};
|
};
|
||||||
frames.current = 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ref.current.position.set(position.x, position.y, position.z);
|
ref.current.position.set(position.x, position.y, position.z);
|
||||||
|
|
||||||
frames.current++;
|
|
||||||
console.log(frames.current)
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 20, scale]}>
|
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 20, scale]}>
|
||||||
<sphereGeometry args={[0.01, 16, 16]} />
|
<sphereGeometry args={[0.01, 16, 16]} />
|
||||||
<meshStandardMaterial
|
<meshStandardMaterial
|
||||||
emissive={turboColor}
|
emissive={turboColor}
|
||||||
toneMapped={false}
|
toneMapped={false}
|
||||||
emissiveIntensity={10}
|
emissiveIntensity={5}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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 = 30;
|
const maxSpeed = 40;
|
||||||
const boostSpeed = 50;
|
const boostSpeed = 60;
|
||||||
const acceleration = 0.1;
|
const acceleration = 30;
|
||||||
const decceleration = 0.2;
|
const decceleration = 50;
|
||||||
const damping = -0.1;
|
const damping = -0.1;
|
||||||
const MaxSteeringSpeed = 0.01;
|
const MaxSteeringSpeed = 1.1;
|
||||||
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,16 +66,21 @@ 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}) => {
|
||||||
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 =
|
const kartRotation = kart.current.rotation.y - driftDirection.current * driftForce.current;
|
||||||
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,
|
||||||
|
@ -114,19 +119,19 @@ 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, maxSpeed));
|
setCurrentSpeed(Math.min(currentSpeed + acceleration * deltaTime, maxSpeed));
|
||||||
} else if (
|
} else if (
|
||||||
upPressed &&
|
upPressed &&
|
||||||
currentSpeed > maxSpeed &&
|
currentSpeed > maxSpeed &&
|
||||||
boostDuration.current > 0
|
boostDuration.current > 0
|
||||||
) {
|
) {
|
||||||
setCurrentSpeed(Math.max(currentSpeed - decceleration, maxSpeed));
|
setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, maxSpeed));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (upPressed) {
|
if (upPressed) {
|
||||||
if (currentSteeringSpeed < MaxSteeringSpeed) {
|
if (currentSteeringSpeed < MaxSteeringSpeed) {
|
||||||
setCurrentSteeringSpeed(
|
setCurrentSteeringSpeed(
|
||||||
Math.min(currentSteeringSpeed + 0.0001, MaxSteeringSpeed)
|
Math.min(currentSteeringSpeed + 1 * deltaTime, MaxSteeringSpeed)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -137,22 +142,22 @@ export const PlayerController = () => {
|
||||||
// DECELERATING
|
// DECELERATING
|
||||||
else if (!upPressed && !downPressed) {
|
else if (!upPressed && !downPressed) {
|
||||||
if (currentSteeringSpeed > 0) {
|
if (currentSteeringSpeed > 0) {
|
||||||
setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 0.00005, 0));
|
setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 1 * deltaTime, 0));
|
||||||
} else if (currentSteeringSpeed < 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
|
// 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(
|
body.current.applyImpulse(
|
||||||
{
|
{
|
||||||
x: -body.current.linvel().x * (1 - damping),
|
x: -body.current.linvel().x,
|
||||||
y: 0,
|
y: 0,
|
||||||
z: -body.current.linvel().z * (1 - damping),
|
z: -body.current.linvel().z,
|
||||||
},
|
},
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
@ -213,8 +218,8 @@ 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 * 50 + 0.5,
|
steeringAngle * 0.5,
|
||||||
0.05
|
marioLerpFactor * deltaTime
|
||||||
);
|
);
|
||||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1);
|
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1);
|
||||||
}
|
}
|
||||||
|
@ -223,16 +228,19 @@ 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 * 50 + 0.5),
|
-(-steeringAngle) * 0.5,
|
||||||
0.05
|
marioLerpFactor * deltaTime
|
||||||
|
|
||||||
);
|
);
|
||||||
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1);
|
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1);
|
||||||
}
|
}
|
||||||
|
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 * 30,
|
steeringAngle * 0.5,
|
||||||
0.05
|
marioLerpFactor * deltaTime
|
||||||
|
|
||||||
);
|
);
|
||||||
setScale(0);
|
setScale(0);
|
||||||
}
|
}
|
||||||
|
@ -263,15 +271,19 @@ export const PlayerController = () => {
|
||||||
// RELEASING DRIFT
|
// RELEASING DRIFT
|
||||||
|
|
||||||
if (boostDuration.current > 1 && !jumpIsHeld.current) {
|
if (boostDuration.current > 1 && !jumpIsHeld.current) {
|
||||||
setCurrentSpeed(boostSpeed);
|
|
||||||
boostDuration.current -= 1;
|
|
||||||
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();
|
||||||
|
@ -279,31 +291,30 @@ 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,
|
||||||
0.01
|
cameraLerpFactor * deltaTime
|
||||||
);
|
);
|
||||||
|
|
||||||
cam.current.position.z = THREE.MathUtils.lerp(
|
cam.current.position.z = THREE.MathUtils.lerp(
|
||||||
cam.current.position.z,
|
cam.current.position.z,
|
||||||
targetZPosition,
|
targetZPosition,
|
||||||
0.01
|
cameraLerpFactor * deltaTime
|
||||||
);
|
);
|
||||||
|
|
||||||
body.current.applyImpulse(
|
body.current.applyImpulse(
|
||||||
{
|
{
|
||||||
x: forwardDirection.x * currentSpeed,
|
x: forwardDirection.x * currentSpeed * 50 * deltaTime,
|
||||||
y: 0 + jumpForce.current,
|
y: 0 + jumpForce.current,
|
||||||
z: forwardDirection.z * currentSpeed,
|
z: forwardDirection.z * currentSpeed * 50 * deltaTime,
|
||||||
},
|
},
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
// Update the kart's rotation based on the steering angle
|
// Update the kart's rotation based on the steering angle
|
||||||
setSteeringAngleWheels(steeringAngle * 25);
|
setSteeringAngleWheels(steeringAngle * 0.1);
|
||||||
|
|
||||||
// SOUND WORK
|
// SOUND WORK
|
||||||
|
|
||||||
|
|
||||||
console.log(body.current.translation())
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -381,7 +392,7 @@ export const PlayerController = () => {
|
||||||
<PerspectiveCamera
|
<PerspectiveCamera
|
||||||
makeDefault
|
makeDefault
|
||||||
position={[0, 2, 8]}
|
position={[0, 2, 8]}
|
||||||
fov={50}
|
fov={40}
|
||||||
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}/> */}
|
||||||
|
|
|
@ -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 (
|
||||||
|
<group>
|
||||||
|
<RigidBody
|
||||||
|
ref={body}
|
||||||
|
colliders={false}
|
||||||
|
position={[8, 20, -96]}
|
||||||
|
centerOfMass={[0, -1, 0]}
|
||||||
|
mass={3}
|
||||||
|
>
|
||||||
|
<BallCollider
|
||||||
|
args={[0.5]}
|
||||||
|
mass={3}
|
||||||
|
onCollisionEnter={(event) => {
|
||||||
|
isOnFloor.current = true;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
onCollisionEnter=
|
||||||
|
{(event) => {
|
||||||
|
isOnFloor.current = false;
|
||||||
|
}}
|
||||||
|
</RigidBody>
|
||||||
|
|
||||||
|
<group ref={kart} rotation={[0, Math.PI / 2, 0]}>
|
||||||
|
<group ref={mario}>
|
||||||
|
<Mario
|
||||||
|
currentSpeed={currentSpeed}
|
||||||
|
steeringAngleWheels={steeringAngleWheels}
|
||||||
|
/>
|
||||||
|
<pointLight
|
||||||
|
position={[0.6, 0.05, 0.5]}
|
||||||
|
intensity={scale}
|
||||||
|
color={turboColor}
|
||||||
|
distance={1}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
|
||||||
|
<sphereGeometry args={[0.1, 16, 16]} />
|
||||||
|
<meshStandardMaterial
|
||||||
|
emissive={turboColor}
|
||||||
|
toneMapped={false}
|
||||||
|
emissiveIntensity={100}
|
||||||
|
transparent
|
||||||
|
opacity={0.4}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
<pointLight
|
||||||
|
position={[-0.6, 0.05, 0.5]}
|
||||||
|
intensity={scale}
|
||||||
|
color={turboColor}
|
||||||
|
distance={1}
|
||||||
|
/>
|
||||||
|
<mesh position={[-0.6, 0.05, 0.5]} scale={scale}>
|
||||||
|
<sphereGeometry args={[0.1, 16, 16]} />
|
||||||
|
<meshStandardMaterial
|
||||||
|
emissive={turboColor}
|
||||||
|
toneMapped={false}
|
||||||
|
emissiveIntensity={100}
|
||||||
|
transparent
|
||||||
|
opacity={0.4}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
{/* <Flame/> */}
|
||||||
|
<FlameParticles isBoosting={isBoosting} />
|
||||||
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
|
<PointParticle
|
||||||
|
position={[-0.6, 0.05, 0.5]}
|
||||||
|
png="./circle.png"
|
||||||
|
turboColor={turboColor}
|
||||||
|
/>
|
||||||
|
<PointParticle
|
||||||
|
position={[0.6, 0.05, 0.5]}
|
||||||
|
png="./circle.png"
|
||||||
|
turboColor={turboColor}
|
||||||
|
/>
|
||||||
|
<PointParticle
|
||||||
|
position={[-0.6, 0.05, 0.5]}
|
||||||
|
png="./star.png"
|
||||||
|
turboColor={turboColor}
|
||||||
|
/>
|
||||||
|
<PointParticle
|
||||||
|
position={[0.6, 0.05, 0.5]}
|
||||||
|
png="./star.png"
|
||||||
|
turboColor={turboColor}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
|
||||||
|
{/* <ContactShadows frames={1} /> */}
|
||||||
|
<PerspectiveCamera
|
||||||
|
makeDefault
|
||||||
|
position={[0, 2, 8]}
|
||||||
|
fov={40}
|
||||||
|
ref={cam}
|
||||||
|
/>
|
||||||
|
{/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}
|
||||||
|
</group>
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
};
|
|
@ -25,10 +25,11 @@ export const PointParticle = ({ position, png, turboColor }) => {
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (turboColor === 0xffffff) return;
|
if (turboColor === 0xffffff) return;
|
||||||
if (size < 5) {
|
if (size < 3) {
|
||||||
setSize((size) => size + 0.5);
|
setSize((size) => size + 0.5);
|
||||||
} else if (opacity > 0) {
|
} else if (opacity > 0) {
|
||||||
setOpacity((opacity) => opacity - 0.05);
|
setOpacity((opacity) => opacity - 0.05);
|
||||||
|
setSize((size) => size + 0.2);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -6,20 +6,48 @@
|
||||||
*
|
*
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
cursor:none;
|
/* cursor:none; */
|
||||||
overflow-y: none;
|
overflow-y: none;
|
||||||
overflow-x: none;
|
overflow-x: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
body::-webkit-scrollbar {
|
body::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
.wheel{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
z-index: 100;
|
|
||||||
top:0;
|
top:0;
|
||||||
width: 200px;
|
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
} */
|
|
@ -7,6 +7,6 @@ import { HUD } from './HUD'
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
<HUD />
|
{/* <HUD /> */}
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue