to fix(VFX): Skids in game

src/App.jsx

@@ -38,7 +38,7 @@ function App() {
 
   const { actions } = useStore();
   const start = async () => {
-    await insertCoin();
+    await insertCoin({ skipLobby: true});
 
     onPlayerJoin((state) => {
       actions.addPlayer(state);

src/components/Experience.jsx

@@ -42,6 +42,7 @@ import { useFrame, useLoader } from "@react-three/fiber";
 import { LUTPass, LUTCubeLoader } from "three-stdlib";
 import { useCurvedPathPoints } from "./useCurvedPath";
 import { ParisBis } from "./models/tracks/Paris-bis";
+import { Skid } from "./Skid";
 
 export const Experience = () => {
   const onCollide = (event) => {};
@@ -154,7 +155,7 @@ export const Experience = () => {
 
       <Ground position={[0, 0, 0]} />
       <Environment resolution={256} preset="lobby" />
-
+      <Skid />
       {networkBananas.map((banana) => (
         <Banana
           key={banana.id}

src/components/PlayerControllerGamepad.jsx

@@ -88,6 +88,14 @@ export const PlayerControllerGamepad = ({
   const slowDownDuration = useRef(1500);
   const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
 
+  useEffect(() => {
+    if(kart.current) {
+      actions.setBody(body.current);
+    }
+  }, [body.current]);
+  
+      
+
   useFrame(({ pointer, clock }, delta) => {
     if (player.id !== id) return;
     const time = clock.getElapsedTime();
@@ -459,6 +467,7 @@ export const PlayerControllerGamepad = ({
       actions.useItem();
     }
 
+
     player.setState("position", body.current.translation());
     player.setState("rotation", kartRotation + mario.current.rotation.y);
     player.setState("isBoosting", isBoosting);

src/components/Skid.jsx

@@ -0,0 +1,52 @@
+import { Euler, Object3D, Vector3, Matrix4, DoubleSide } from 'three'
+import { useRef, useLayoutEffect } from 'react'
+import { useFrame } 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()
+
+
+
+export function Skid({ count = 500, opacity = 1, size = 2 }) {
+  const ref = useRef(null);
+  const { body } = useStore();
+  let index = 0
+  useFrame(() => {
+    if (body && ref.current) {
+      setItemAt(ref.current, e, body, index++)
+      if (index === count) index = 0
+    }
+  })
+
+  useLayoutEffect(() => {
+    if(ref.current){
+      ref.current.geometry.rotateX(-Math.PI / 2)
+      return () => {
+        ref.current.geometry.rotateX(Math.PI / 2)
+      }
+    }
+  })
+
+  return (
+    <instancedMesh ref={ref} args={[undefined, undefined, count]}>
+      <planeGeometry args={[size, size * 2]} />
+      <meshBasicMaterial color="black" side={DoubleSide} />
+    </instancedMesh>
+  )
+}
+
+function setItemAt(instances, rotation, body, index) {
+  o.position.copy(vec3(body.translation()))
+  o.rotation.copy(rotation)
+  o.scale.setScalar(1)
+  o.updateMatrix()
+  instances.setMatrixAt(index, o.matrix)
+  instances.instanceMatrix.needsUpdate = true
+}

src/components/store.jsx

@@ -13,8 +13,8 @@ export const items = [
 ]
 
 export const useStore = create((set, get) => ({
-  gameStarted: false,
-  controls: "",
+  gameStarted: true,
+  controls: "gamepad",
   particles1: [],
   particles2: [],
   bodyPosition: [0, 0, 0],
@@ -28,6 +28,7 @@ export const useStore = create((set, get) => ({
   skids: [],
   coins : 0,
   players : [],
+  body: null,
   id : "",
   joystickX: 0,
   driftButton: false,
@@ -164,6 +165,9 @@ export const useStore = create((set, get) => ({
     setMenuButton: (menuButton) => {
       set({ menuButton });
     },
+    setBody: (body) => {
+      set({ body });
+    },
   },
  
 }));