feat:(VFX) Added skids and smoke particles
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 61 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 88 KiB |
|
@ -0,0 +1,86 @@
|
|||
import { Euler, Object3D, Vector3, Matrix4, DoubleSide, Quaternion, TextureLoader, BackSide } from 'three'
|
||||
import { useRef, useLayoutEffect } from 'react'
|
||||
import { useFrame, useLoader } from '@react-three/fiber'
|
||||
import { vec3 } from '@react-three/rapier'
|
||||
|
||||
|
||||
import { useStore } from './store'
|
||||
|
||||
|
||||
const e = new Euler()
|
||||
const m = new Matrix4()
|
||||
const o = new Object3D()
|
||||
const v = new Vector3()
|
||||
const q = new Quaternion()
|
||||
|
||||
|
||||
|
||||
export function Dust({ count = 500, opacity = 0.1, size = 0.6 }) {
|
||||
const smoke01 = useLoader(TextureLoader, './particles/smokes/smoke_01.png');
|
||||
const smoke02 = useLoader(TextureLoader, './particles/smokes/smoke_02.png');
|
||||
const smoke03 = useLoader(TextureLoader, './particles/smokes/smoke_03.png');
|
||||
const smoke04 = useLoader(TextureLoader, './particles/smokes/smoke_04.png');
|
||||
const smoke05 = useLoader(TextureLoader, './particles/smokes/smoke_05.png');
|
||||
const smoke06 = useLoader(TextureLoader, './particles/smokes/smoke_06.png');
|
||||
const smoke07 = useLoader(TextureLoader, './particles/smokes/smoke_07.png');
|
||||
const smoke08 = useLoader(TextureLoader, './particles/smokes/smoke_08.png');
|
||||
|
||||
const texture = [smoke01, smoke02, smoke03, smoke04, smoke05, smoke06, smoke07, smoke08]
|
||||
const ref = useRef(null);
|
||||
const { leftWheel, rightWheel } = useStore();
|
||||
let index = 0
|
||||
let time = 0
|
||||
let i = 0
|
||||
useFrame((state,delta ) => {
|
||||
const rotation = leftWheel.kartRotation;
|
||||
if (state.clock.getElapsedTime() - time > 0.02 && leftWheel && rightWheel && ref.current && leftWheel.isSpinning) {
|
||||
time = state.clock.getElapsedTime()
|
||||
setItemAt(ref.current, rotation, leftWheel, index++);
|
||||
setItemAt(ref.current, rotation, rightWheel, index++);
|
||||
|
||||
if (index === count) index = 0
|
||||
} else {
|
||||
// Shrink old one
|
||||
for (i = 0; i < count; i++) {
|
||||
const direction = new Vector3(Math.sin(time * 6 + i * 10) , 2, 0);
|
||||
ref.current.getMatrixAt(i, m)
|
||||
m.decompose(o.position, q, v)
|
||||
o.scale.setScalar(Math.max(0, v.x - 0.005))
|
||||
o.position.addScaledVector(direction, 0.01)
|
||||
o.updateMatrix()
|
||||
ref.current.setMatrixAt(i, o.matrix)
|
||||
ref.current.instanceMatrix.needsUpdate = true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if(ref.current){
|
||||
ref.current.geometry.rotateY(-Math.PI / 2)
|
||||
return () => {
|
||||
ref.current.geometry.rotateY(Math.PI / 2)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<instancedMesh frustumCulled={false} ref={ref} args={[undefined, undefined, count]}>
|
||||
<planeGeometry args={[size, size]} />
|
||||
<meshBasicMaterial color={0xfcebc5} transparent map={smoke01} opacity={1} depthWrite={false} side={DoubleSide} />
|
||||
</instancedMesh>
|
||||
)
|
||||
}
|
||||
|
||||
function setItemAt(instances, rotation, body, index) {
|
||||
const randomOffset = (Math.random() - 0.5) * 0.3 ;
|
||||
const pos = body.getWorldPosition(v);
|
||||
o.rotation.set(0, rotation + Math.PI / 2, 0);
|
||||
pos.x += randomOffset
|
||||
// pos.y += randomOffset
|
||||
pos.z += randomOffset
|
||||
o.position.copy(pos);
|
||||
o.scale.setScalar(1)
|
||||
o.updateMatrix()
|
||||
instances.setMatrixAt(index, o.matrix)
|
||||
instances.instanceMatrix.needsUpdate = true
|
||||
}
|
|
@ -43,6 +43,7 @@ import { LUTPass, LUTCubeLoader } from "three-stdlib";
|
|||
import { useCurvedPathPoints } from "./useCurvedPath";
|
||||
import { ParisBis } from "./models/tracks/Paris-bis";
|
||||
import { Skid } from "./Skid";
|
||||
import { Dust } from "./Dust";
|
||||
|
||||
export const Experience = () => {
|
||||
const onCollide = (event) => {};
|
||||
|
@ -152,10 +153,11 @@ export const Experience = () => {
|
|||
<ParisBis position={[0, 0, 0]} />
|
||||
<ItemBox position={[-20, 2.5, -119]} />
|
||||
<Coin position={[-30, 2, -119]} />
|
||||
<Skid />
|
||||
<Dust />
|
||||
|
||||
<Ground position={[0, 0, 0]} />
|
||||
<Environment resolution={256} preset="lobby" />
|
||||
<Skid />
|
||||
{networkBananas.map((banana) => (
|
||||
<Banana
|
||||
key={banana.id}
|
||||
|
|
|
@ -91,9 +91,18 @@ export const PlayerController = ({
|
|||
const effectiveBoost = useRef(0);
|
||||
const text = useRef();
|
||||
|
||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls } = useStore();
|
||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls } =
|
||||
useStore();
|
||||
const slowDownDuration = useRef(1500);
|
||||
|
||||
const rightWheel = useRef();
|
||||
const leftWheel = useRef();
|
||||
useEffect(() => {
|
||||
if (leftWheel.current && rightWheel.current && body.current) {
|
||||
actions.setLeftWheel(leftWheel.current);
|
||||
actions.setRightWheel(rightWheel.current);
|
||||
}
|
||||
}, [body.current]);
|
||||
useFrame(({ pointer, clock }, delta) => {
|
||||
if (player.id !== id) return;
|
||||
const time = clock.getElapsedTime();
|
||||
|
@ -119,7 +128,9 @@ export const PlayerController = ({
|
|||
if (escPressed) {
|
||||
actions.setGameStarted(false);
|
||||
}
|
||||
|
||||
if(kartRotation){
|
||||
leftWheel.current.kartRotation = kartRotation;
|
||||
}
|
||||
if (leftPressed && currentSpeed > 0) {
|
||||
steeringAngle = currentSteeringSpeed;
|
||||
targetXPosition = -camMaxOffset;
|
||||
|
@ -179,6 +190,8 @@ export const PlayerController = ({
|
|||
}
|
||||
}
|
||||
if (shouldSlow) {
|
||||
rightWheel.current.isSpinning = true;
|
||||
|
||||
setCurrentSpeed(
|
||||
Math.max(currentSpeed - decceleration * 2 * delta * 144, 0)
|
||||
);
|
||||
|
@ -186,6 +199,7 @@ export const PlayerController = ({
|
|||
slowDownDuration.current -= 1500 * delta;
|
||||
setShouldLaunch(true);
|
||||
if (slowDownDuration.current <= 1) {
|
||||
rightWheel.current.isSpinning = false;
|
||||
actions.setShouldSlowDown(false);
|
||||
slowDownDuration.current = 1500;
|
||||
setShouldLaunch(false);
|
||||
|
@ -311,7 +325,11 @@ export const PlayerController = ({
|
|||
steeringAngle * 25 + 0.4,
|
||||
0.05 * delta * 144
|
||||
);
|
||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
|
||||
if (isOnFloor.current) {
|
||||
leftWheel.current.isSpinning = true;
|
||||
accumulatedDriftPower.current +=
|
||||
0.1 * (steeringAngle + 1) * delta * 144;
|
||||
}
|
||||
}
|
||||
if (driftRight.current) {
|
||||
driftDirection.current = -1;
|
||||
|
@ -321,7 +339,11 @@ export const PlayerController = ({
|
|||
-(-steeringAngle * 25 + 0.4),
|
||||
0.05 * delta * 144
|
||||
);
|
||||
if(isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144;
|
||||
|
||||
}
|
||||
}
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
|
@ -330,6 +352,11 @@ export const PlayerController = ({
|
|||
0.05 * delta * 144
|
||||
);
|
||||
setScale(0);
|
||||
if((pointer.x > 0.8 || pointer.x < -0.8) && currentSpeed > 20 && isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
} else {
|
||||
leftWheel.current.isSpinning = false;
|
||||
}
|
||||
}
|
||||
if (accumulatedDriftPower.current > blueTurboThreshold) {
|
||||
setTurboColor(0x00ffff);
|
||||
|
@ -559,6 +586,8 @@ export const PlayerController = ({
|
|||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[-0.46, 0.05, 0.3]} ref={leftWheel}></mesh>
|
||||
<mesh position={[0.46, 0.05, 0.3]} ref={rightWheel}></mesh>
|
||||
<mesh position={[-0.6, 0.05, 0.5]} scale={scale * 10}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<FakeGlowMaterial
|
||||
|
@ -571,7 +600,10 @@ export const PlayerController = ({
|
|||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||
<SmokeParticles
|
||||
driftRight={driftRight.current}
|
||||
driftLeft={driftLeft.current}
|
||||
/>
|
||||
<PointParticle
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
png="./particles/circle.png"
|
||||
|
|
|
@ -15,7 +15,6 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
|
|||
|
||||
import { PointParticle } from "./Particles/drifts/PointParticle";
|
||||
|
||||
import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
|
||||
import { useStore } from "./store";
|
||||
import { Cylinder } from "@react-three/drei";
|
||||
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
||||
|
@ -34,7 +33,6 @@ export const PlayerControllerGamepad = ({
|
|||
networkBananas,
|
||||
networkShells,
|
||||
}) => {
|
||||
|
||||
const [isOnGround, setIsOnGround] = useState(false);
|
||||
const body = useRef();
|
||||
const kart = useRef();
|
||||
|
@ -84,7 +82,8 @@ export const PlayerControllerGamepad = ({
|
|||
const effectiveBoost = useRef(0);
|
||||
const text = useRef();
|
||||
|
||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls } = useStore();
|
||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls } =
|
||||
useStore();
|
||||
const slowDownDuration = useRef(1500);
|
||||
const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
|
||||
|
||||
|
@ -94,15 +93,12 @@ export const PlayerControllerGamepad = ({
|
|||
const leftWheel = useRef();
|
||||
const isDrifting = useRef(false);
|
||||
useEffect(() => {
|
||||
if(leftWheel.current && rightWheel.current && body.current) {
|
||||
if (leftWheel.current && rightWheel.current && body.current) {
|
||||
actions.setLeftWheel(leftWheel.current);
|
||||
actions.setRightWheel(rightWheel.current);
|
||||
actions.setIsDrifting(isDrifting.current);
|
||||
}
|
||||
}, [body.current]);
|
||||
|
||||
|
||||
|
||||
useFrame(({ pointer, clock }, delta) => {
|
||||
if (player.id !== id) return;
|
||||
const time = clock.getElapsedTime();
|
||||
|
@ -129,6 +125,7 @@ export const PlayerControllerGamepad = ({
|
|||
if (start) {
|
||||
actions.setGameStarted(false);
|
||||
}
|
||||
leftWheel.current.kartRotation = kartRotation ;
|
||||
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
steeringAngle = currentSteeringSpeed * -joystick[0];
|
||||
|
@ -169,6 +166,7 @@ export const PlayerControllerGamepad = ({
|
|||
}
|
||||
}
|
||||
if (shouldSlow) {
|
||||
rightWheel.current.isSpinning = true;
|
||||
setCurrentSpeed(
|
||||
Math.max(currentSpeed - decceleration * 2 * delta * 144, 0)
|
||||
);
|
||||
|
@ -176,6 +174,7 @@ export const PlayerControllerGamepad = ({
|
|||
slowDownDuration.current -= 1500 * delta;
|
||||
setShouldLaunch(true);
|
||||
if (slowDownDuration.current <= 1) {
|
||||
rightWheel.current.isSpinning = false;
|
||||
actions.setShouldSlowDown(false);
|
||||
slowDownDuration.current = 1500;
|
||||
setShouldLaunch(false);
|
||||
|
@ -299,9 +298,13 @@ export const PlayerControllerGamepad = ({
|
|||
steeringAngle * 25 + 0.4,
|
||||
0.05 * delta * 144
|
||||
);
|
||||
if(isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
|
||||
|
||||
}
|
||||
if (driftRight.current) {
|
||||
}
|
||||
if (driftRight.current ) {
|
||||
driftDirection.current = -1;
|
||||
driftForce.current = 0.4;
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
|
@ -309,7 +312,11 @@ export const PlayerControllerGamepad = ({
|
|||
-(-steeringAngle * 25 + 0.4),
|
||||
0.05 * delta * 144
|
||||
);
|
||||
if(isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144;
|
||||
|
||||
}
|
||||
}
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
|
@ -318,6 +325,12 @@ export const PlayerControllerGamepad = ({
|
|||
0.05 * delta * 144
|
||||
);
|
||||
setScale(0);
|
||||
|
||||
if((joystick[0] > 0.8 || joystick[0] < -0.8) && currentSpeed > 20 && isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
} else {
|
||||
leftWheel.current.isSpinning = false;
|
||||
}
|
||||
}
|
||||
if (accumulatedDriftPower.current > blueTurboThreshold) {
|
||||
setTurboColor(0x00ffff);
|
||||
|
@ -387,6 +400,7 @@ export const PlayerControllerGamepad = ({
|
|||
0.01 * delta * 144
|
||||
);
|
||||
|
||||
|
||||
cam.current.position.z = THREE.MathUtils.lerp(
|
||||
cam.current.position.z,
|
||||
targetZPosition,
|
||||
|
@ -473,7 +487,6 @@ export const PlayerControllerGamepad = ({
|
|||
actions.useItem();
|
||||
}
|
||||
|
||||
|
||||
player.setState("position", body.current.translation());
|
||||
player.setState("rotation", kartRotation + mario.current.rotation.y);
|
||||
player.setState("isBoosting", isBoosting);
|
||||
|
@ -550,8 +563,7 @@ export const PlayerControllerGamepad = ({
|
|||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[-0.46, 0.05, 0.3]} ref={leftWheel}>
|
||||
</mesh>
|
||||
<mesh position={[-0.46, 0.05, 0.3]} ref={leftWheel}></mesh>
|
||||
<mesh position={[-0.6, 0.05, 0.5]} scale={scale * 10}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<FakeGlowMaterial
|
||||
|
@ -561,12 +573,10 @@ export const PlayerControllerGamepad = ({
|
|||
glowSharpness={1}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[0.46, 0.05, 0.3]} ref={rightWheel}>
|
||||
</mesh>
|
||||
<mesh position={[0.46, 0.05, 0.3]} ref={rightWheel}></mesh>
|
||||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||
<PointParticle
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
png="./particles/circle.png"
|
||||
|
|
|
@ -92,9 +92,20 @@ export const PlayerControllerKeyboard = ({
|
|||
const effectiveBoost = useRef(0);
|
||||
const text = useRef();
|
||||
|
||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls } = useStore();
|
||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls } =
|
||||
useStore();
|
||||
const slowDownDuration = useRef(1500);
|
||||
|
||||
const rightWheel = useRef();
|
||||
const leftWheel = useRef();
|
||||
const isDrifting = useRef(false);
|
||||
useEffect(() => {
|
||||
if (leftWheel.current && rightWheel.current && body.current) {
|
||||
actions.setLeftWheel(leftWheel.current);
|
||||
actions.setRightWheel(rightWheel.current);
|
||||
}
|
||||
}, [body.current]);
|
||||
|
||||
useFrame(({ pointer, clock }, delta) => {
|
||||
if (player.id !== id) return;
|
||||
const time = clock.getElapsedTime();
|
||||
|
@ -116,7 +127,7 @@ export const PlayerControllerKeyboard = ({
|
|||
0,
|
||||
-Math.cos(kartRotation)
|
||||
);
|
||||
|
||||
leftWheel.current.kartRotation = kartRotation;
|
||||
if (escPressed) {
|
||||
actions.setGameStarted(false);
|
||||
}
|
||||
|
@ -168,6 +179,7 @@ export const PlayerControllerKeyboard = ({
|
|||
}
|
||||
}
|
||||
if (shouldSlow) {
|
||||
rightWheel.current.isSpinning = true;
|
||||
setCurrentSpeed(
|
||||
Math.max(currentSpeed - decceleration * 2 * delta * 144, 0)
|
||||
);
|
||||
|
@ -175,6 +187,7 @@ export const PlayerControllerKeyboard = ({
|
|||
slowDownDuration.current -= 1500 * delta;
|
||||
setShouldLaunch(true);
|
||||
if (slowDownDuration.current <= 1) {
|
||||
rightWheel.current.isSpinning = false;
|
||||
actions.setShouldSlowDown(false);
|
||||
slowDownDuration.current = 1500;
|
||||
setShouldLaunch(false);
|
||||
|
@ -300,7 +313,11 @@ export const PlayerControllerKeyboard = ({
|
|||
steeringAngle * 25 + 0.4,
|
||||
0.05 * delta * 144
|
||||
);
|
||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
|
||||
if (isOnFloor.current) {
|
||||
leftWheel.current.isSpinning = true;
|
||||
accumulatedDriftPower.current +=
|
||||
0.1 * (steeringAngle + 1) * delta * 144;
|
||||
}
|
||||
}
|
||||
if (driftRight.current) {
|
||||
driftDirection.current = -1;
|
||||
|
@ -310,7 +327,11 @@ export const PlayerControllerKeyboard = ({
|
|||
-(-steeringAngle * 25 + 0.4),
|
||||
0.05 * delta * 144
|
||||
);
|
||||
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144;
|
||||
if (isOnFloor.current) {
|
||||
leftWheel.current.isSpinning = true;
|
||||
accumulatedDriftPower.current +=
|
||||
0.1 * (-steeringAngle + 1) * delta * 144;
|
||||
}
|
||||
}
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
|
@ -319,6 +340,11 @@ export const PlayerControllerKeyboard = ({
|
|||
0.05 * delta * 144
|
||||
);
|
||||
setScale(0);
|
||||
if((leftPressed || rightPressed) && currentSpeed > 20 && isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
} else {
|
||||
leftWheel.current.isSpinning = false;
|
||||
}
|
||||
}
|
||||
if (accumulatedDriftPower.current > blueTurboThreshold) {
|
||||
setTurboColor(0x00ffff);
|
||||
|
@ -529,6 +555,8 @@ export const PlayerControllerKeyboard = ({
|
|||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[-0.46, 0.05, 0.3]} ref={leftWheel}></mesh>
|
||||
<mesh position={[0.46, 0.05, 0.3]} ref={rightWheel}></mesh>
|
||||
<mesh position={[0.6, 0.05, 0.5]} scale={scale * 10}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<FakeGlowMaterial
|
||||
|
@ -548,6 +576,7 @@ export const PlayerControllerKeyboard = ({
|
|||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
<mesh position={[-0.6, 0.05, 0.5]} scale={scale * 10}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<FakeGlowMaterial
|
||||
|
@ -560,7 +589,10 @@ export const PlayerControllerKeyboard = ({
|
|||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||
<SmokeParticles
|
||||
driftRight={driftRight.current}
|
||||
driftLeft={driftLeft.current}
|
||||
/>
|
||||
<PointParticle
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
png="./particles/circle.png"
|
||||
|
|
|
@ -86,6 +86,15 @@ export const PlayerControllerTouch = ({
|
|||
|
||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls, joystickX, driftButton, itemButton, menuButton } = useStore();
|
||||
const slowDownDuration = useRef(1500);
|
||||
const rightWheel = useRef();
|
||||
const leftWheel = useRef();
|
||||
const isDrifting = useRef(false);
|
||||
useEffect(() => {
|
||||
if (leftWheel.current && rightWheel.current && body.current) {
|
||||
actions.setLeftWheel(leftWheel.current);
|
||||
actions.setRightWheel(rightWheel.current);
|
||||
}
|
||||
}, [body.current]);
|
||||
|
||||
useFrame(({ pointer, clock }, delta) => {
|
||||
if (player.id !== id) return;
|
||||
|
@ -108,7 +117,7 @@ export const PlayerControllerTouch = ({
|
|||
0,
|
||||
-Math.cos(kartRotation)
|
||||
);
|
||||
|
||||
leftWheel.current.kartRotation = kartRotation;
|
||||
if (menuButton) {
|
||||
actions.setGameStarted(false);
|
||||
}
|
||||
|
@ -153,6 +162,8 @@ export const PlayerControllerTouch = ({
|
|||
);
|
||||
}
|
||||
if (shouldSlow) {
|
||||
rightWheel.current.isSpinning = true;
|
||||
|
||||
setCurrentSpeed(
|
||||
Math.max(currentSpeed - decceleration * 2 * delta * 144, 0)
|
||||
);
|
||||
|
@ -160,6 +171,8 @@ export const PlayerControllerTouch = ({
|
|||
slowDownDuration.current -= 1500 * delta;
|
||||
setShouldLaunch(true);
|
||||
if (slowDownDuration.current <= 1) {
|
||||
rightWheel.current.isSpinning = false;
|
||||
|
||||
actions.setShouldSlowDown(false);
|
||||
slowDownDuration.current = 1500;
|
||||
setShouldLaunch(false);
|
||||
|
@ -252,7 +265,11 @@ export const PlayerControllerTouch = ({
|
|||
steeringAngle * 25 + 0.4,
|
||||
0.05 * delta * 144
|
||||
);
|
||||
if(isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
|
||||
|
||||
}
|
||||
}
|
||||
if (driftRight.current) {
|
||||
driftDirection.current = -1;
|
||||
|
@ -262,7 +279,11 @@ export const PlayerControllerTouch = ({
|
|||
-(-steeringAngle * 25 + 0.4),
|
||||
0.05 * delta * 144
|
||||
);
|
||||
if(isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144;
|
||||
|
||||
}
|
||||
}
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
|
@ -271,6 +292,11 @@ export const PlayerControllerTouch = ({
|
|||
0.05 * delta * 144
|
||||
);
|
||||
setScale(0);
|
||||
if((joystickX > 0.8 || joystickX < -0.8) && currentSpeed > 20 && isOnFloor.current){
|
||||
leftWheel.current.isSpinning = true;
|
||||
} else {
|
||||
leftWheel.current.isSpinning = false;
|
||||
}
|
||||
}
|
||||
if (accumulatedDriftPower.current > blueTurboThreshold) {
|
||||
setTurboColor(0x00ffff);
|
||||
|
@ -466,6 +492,8 @@ export const PlayerControllerTouch = ({
|
|||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[-0.46, 0.05, 0.3]} ref={leftWheel}></mesh>
|
||||
<mesh position={[0.46, 0.05, 0.3]} ref={rightWheel}></mesh>
|
||||
<mesh position={[0.6, 0.05, 0.5]} scale={scale * 10}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<FakeGlowMaterial
|
||||
|
|
|
@ -14,16 +14,15 @@ const v = new Vector3()
|
|||
|
||||
|
||||
|
||||
export function Skid({ count = 500, opacity = 0.5, size = 0.3 }) {
|
||||
export function Skid({ count = 50000, opacity = 0.5, size = 0.3 }) {
|
||||
const ref = useRef(null);
|
||||
const { leftWheel, rightWheel } = useStore();
|
||||
let index = 0
|
||||
useFrame(() => {
|
||||
const isDrifting = useStore.getState()
|
||||
console.log(isDrifting)
|
||||
if (leftWheel && rightWheel && ref.current && isDrifting) {
|
||||
setItemAt(ref.current, leftWheel.rotation, leftWheel, index++);
|
||||
setItemAt(ref.current, rightWheel.rotation, rightWheel, index++);
|
||||
const rotation = leftWheel.kartRotation;
|
||||
if (leftWheel && rightWheel && ref.current && (leftWheel.isSpinning || rightWheel.isSpinning)) {
|
||||
setItemAt(ref.current, rotation, leftWheel, index++);
|
||||
setItemAt(ref.current, rotation, rightWheel, index++);
|
||||
|
||||
if (index === count) index = 0
|
||||
}
|
||||
|
@ -48,7 +47,7 @@ export function Skid({ count = 500, opacity = 0.5, size = 0.3 }) {
|
|||
|
||||
function setItemAt(instances, rotation, body, index) {
|
||||
o.position.copy(body.getWorldPosition(v));
|
||||
o.rotation.copy(rotation)
|
||||
o.rotation.set(0, rotation, 0);
|
||||
o.scale.setScalar(1)
|
||||
o.updateMatrix()
|
||||
instances.setMatrixAt(index, o.matrix)
|
||||
|
|