feat(VFX): Added skidmarks

src/components/PlayerControllerGamepad.jsx

@@ -88,9 +88,16 @@ export const PlayerControllerGamepad = ({
   const slowDownDuration = useRef(1500);
   const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
 
+  const skidRotation = useRef(0);
+
+  const rightWheel = useRef();
+  const leftWheel = useRef();
+  const isDrifting = useRef(false);
   useEffect(() => {
-    if(kart.current) {
+    if(leftWheel.current && rightWheel.current && body.current) {
-      actions.setBody(body.current);
+      actions.setLeftWheel(leftWheel.current);
+      actions.setRightWheel(rightWheel.current);
+      actions.setIsDrifting(isDrifting.current);
     }
   }, [body.current]);
   
@@ -100,6 +107,7 @@ export const PlayerControllerGamepad = ({
     if (player.id !== id) return;
     const time = clock.getElapsedTime();
     if (!body.current && !mario.current) return;
+    isDrifting.current = driftLeft.current || driftRight.current;
     engineSound.current.setVolume(currentSpeed / 300 + 0.2);
     engineSound.current.setPlaybackRate(currentSpeed / 10 + 0.1);
     jumpSound.current.setPlaybackRate(1.5);
@@ -122,8 +130,6 @@ export const PlayerControllerGamepad = ({
       actions.setGameStarted(false);
     }
 
-    // mouse steering
-
     if (!driftLeft.current && !driftRight.current) {
       steeringAngle = currentSteeringSpeed * -joystick[0];
       targetXPosition = -camMaxOffset * -joystick[0];
@@ -475,6 +481,8 @@ export const PlayerControllerGamepad = ({
     player.setState("turboColor", turboColor);
     player.setState("scale", scale);
     player.setState("bananas", bananas);
+
+    skidRotation.current = kartRotation + mario.current.rotation.y;
   });
 
   return player.id === id ? (
@@ -513,7 +521,7 @@ export const PlayerControllerGamepad = ({
           />
           <CoinParticles coins={coins} />
           <ItemParticles item={item} />
-          <mesh position={[0.6, 0.05, 0.5]} scale={scale}>
+          <mesh position={[0.6, 0.05, 0.5]} scale={scale} ref={rightWheel}>
             <sphereGeometry args={[0.05, 16, 16]} />
             <meshStandardMaterial
               emissive={turboColor}
@@ -542,6 +550,8 @@ export const PlayerControllerGamepad = ({
               opacity={0.4}
             />
           </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
@@ -551,6 +561,8 @@ export const PlayerControllerGamepad = ({
               glowSharpness={1}
             />
           </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} />

src/components/Skid.jsx

@@ -14,13 +14,17 @@ const v = new Vector3()
 
 
 
-export function Skid({ count = 500, opacity = 1, size = 2 }) {
+export function Skid({ count = 500, opacity = 0.5, size = 0.3 }) {
   const ref = useRef(null);
-  const { body } = useStore();
+  const { leftWheel, rightWheel } = useStore();
   let index = 0
   useFrame(() => {
-    if (body && ref.current) {
+    const isDrifting = useStore.getState()
-      setItemAt(ref.current, e, body, index++)
+    console.log(isDrifting)
+    if (leftWheel && rightWheel && ref.current && isDrifting) {
+      setItemAt(ref.current, leftWheel.rotation, leftWheel, index++);
+      setItemAt(ref.current, rightWheel.rotation, rightWheel, index++);
+      
       if (index === count) index = 0
     }
   })
@@ -35,15 +39,15 @@ export function Skid({ count = 500, opacity = 1, size = 2 }) {
   })
 
   return (
-    <instancedMesh ref={ref} args={[undefined, undefined, count]}>
+    <instancedMesh frustumCulled={false} ref={ref} args={[undefined, undefined, count]}>
-      <planeGeometry args={[size, size * 2]} />
+      <planeGeometry args={[size, size]} />
-      <meshBasicMaterial color="black" side={DoubleSide} />
+      <meshBasicMaterial color="black" side={DoubleSide} transparent opacity={opacity} />
     </instancedMesh>
   )
 }
 
 function setItemAt(instances, rotation, body, index) {
-  o.position.copy(vec3(body.translation()))
+  o.position.copy(body.getWorldPosition(v));
   o.rotation.copy(rotation)
   o.scale.setScalar(1)
   o.updateMatrix()

src/components/store.jsx

@@ -17,8 +17,9 @@ export const useStore = create((set, get) => ({
   controls: "gamepad",
   particles1: [],
   particles2: [],
-  bodyPosition: [0, 0, 0],
+  leftWheel: null,
-  bodyRotation: [0, 0, 0],
+  rightWheel: null,
+  bodyRotation: null,
   pastPositions: [],
   shouldSlowdown: false,
   bananas: [],
@@ -34,6 +35,7 @@ export const useStore = create((set, get) => ({
   driftButton: false,
   itemButton: false,
   menuButton: false,
+  isDrifting: false,
   addPastPosition: (position) => {
     set((state) => ({
       pastPositions: [position, ...state.pastPositions.slice(0, 499)],
@@ -64,7 +66,7 @@ export const useStore = create((set, get) => ({
       set({ bodyPosition: position });
     },
     setBodyRotation: (rotation) => {
-      set({ bodyRotation: rotation });
+      set({ rotation });
     },
     getBodyPosition: () => {
       return get().bodyPosition;
@@ -168,6 +170,18 @@ export const useStore = create((set, get) => ({
     setBody: (body) => {
       set({ body });
     },
+    setLeftWheel: (leftWheel) => {
+      set({ leftWheel });
+    },
+    setRightWheel: (rightWheel) => {
+      set({ rightWheel });
+    },
+    setIsDrifting: (isDrifting) => {
+      set({ isDrifting });
+    },
+    getIsDrifting: () => {
+      return get().isDrifting;
+    },
   },
  
 }));