feat:(VFX) Added skids and smoke particles

src/components/Dust.jsx

@@ -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
+}

src/components/Experience.jsx

@@ -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}

src/components/PlayerController.jsx

@@ -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
       );
-      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(
@@ -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"

src/components/PlayerControllerGamepad.jsx

@@ -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
       );
-      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) {
+    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
       );
-      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(
@@ -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 position={[-0.46, 0.05, 0.3]} ref={leftWheel}></mesh>
-          </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 position={[0.46, 0.05, 0.3]} ref={rightWheel}></mesh>
-          </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"

src/components/PlayerControllerKeyboard.jsx

@@ -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"

src/components/PlayerControllerTouch.jsx

@@ -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
       );
-      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;
@@ -262,7 +279,11 @@ export const PlayerControllerTouch = ({
         -(-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(
@@ -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

src/components/Skid.jsx

@@ -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()
+    const rotation = leftWheel.kartRotation;
-    console.log(isDrifting)
+    if (leftWheel && rightWheel && ref.current && (leftWheel.isSpinning || rightWheel.isSpinning)) {
-    if (leftWheel && rightWheel && ref.current && isDrifting) {
+      setItemAt(ref.current, rotation, leftWheel, index++);
-      setItemAt(ref.current, leftWheel.rotation, leftWheel, index++);
+      setItemAt(ref.current, rotation, rightWheel, index++);
-      setItemAt(ref.current, rightWheel.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)