fix:(game) Fixed small issue with pointParticle causing the particle to go negative

src/components/Experience.jsx

@@ -16,8 +16,7 @@ export const Experience = () => {
       <Environment
         resolution={256}
         preset='lobby'
-        background
+
-        ground
       />
 
       <directionalLight

src/components/PlayerController.jsx

@@ -198,6 +198,7 @@ export const PlayerController = () => {
 
     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)
@@ -258,11 +259,12 @@ export const PlayerController = () => {
           onCollisionEnter={(event) => {
             isOnFloor.current = true
           }}
+          onCollisionExit={(event) => {
+            isOnFloor.current = false
+          }}
+
         />
-        {/* onCollisionEnter=
+
-        {(event) => {
-          isOnFloor.current = false
-        }} */}
       </RigidBody>
 
       <group

src/components/PointParticle.jsx

@@ -25,11 +25,11 @@ export const PointParticle = ({ position, png, turboColor }) => {
 
   useFrame((_, delta) => {
     if (turboColor === 0xffffff) return;
-    if (size < 3) {
+    if (size < 5) {
-      setSize((size) => size + 0.5 * delta * 144);
+      setSize((size) => Math.min(size + 0.3 * delta * 144, 5));
     } else if (opacity > 0) {
-      setOpacity((opacity) => opacity - 0.05  * delta * 144);
+      setOpacity((opacity) => Math.max(opacity - 0.2 * delta * 144, 0));
-      setSize((size) => size + 0.2  * delta * 144);
+      setSize((size) => Math.max(size - 0.2 * delta * 144, 0));
     }
   });
 

src/components/Skid.jsx

@@ -0,0 +1,51 @@
+import { Euler, Object3D, Vector3, Matrix4 } from 'three';
+import { useRef, useLayoutEffect } from 'react';
+import { useFrame } from '@react-three/fiber';
+
+import { getState, mutation, 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 = 0.5, size = 0.4 }) {
+  const ref = useRef(null);
+  const [chassisBody, wheels] = useStore((state) => [state.chassisBody, state.wheels]);
+
+  let brake;
+  let index = 0;
+  useFrame(() => {
+    brake = getState().controls.brake;
+    if (chassisBody.current && wheels[2].current && wheels[3].current && brake && mutation.speed > 10) {
+      e.setFromRotationMatrix(m.extractRotation(chassisBody.current.matrix));
+      setItemAt(ref.current, e, wheels[2].current, 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={0x4d4d4d} transparent opacity={opacity} depthWrite={false} />
+    </instancedMesh>
+  );
+}
+
+function setItemAt(instances, rotation, wheel, index) {
+  o.position.copy(wheel.getWorldPosition(v));
+  o.rotation.copy(rotation);
+  o.scale.setScalar(1);
+  o.updateMatrix();
+  instances.setMatrixAt(index, o.matrix);
+  instances.instanceMatrix.needsUpdate = true;
+}

src/components/store.jsx

@@ -4,6 +4,8 @@ export const useStore = create((set, get) => ({
   return : {
     particles1: [],
     particles2: [],
+    bodyPosition: [0, 0, 0],
+    bodyRotation: [0, 0, 0],
     actions : {
       addParticle1: (particle) => {
         set((state) => ({