message

Instanced mesh particles

package-lock.json

@@ -8,15 +8,16 @@
       "name": "vite-starter",
       "version": "0.0.0",
       "dependencies": {
-        "@react-three/drei": "^9.93.0",
+        "@react-three/drei": "^9.96.4",
-        "@react-three/fiber": "^8.15.13",
+        "@react-three/fiber": "^8.15.15",
         "@react-three/postprocessing": "^2.15.11",
         "@react-three/rapier": "^1.2.1",
         "gsap": "^3.12.5",
+        "joymap": "^2.2.4",
         "leva": "^0.9.35",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "three": "^0.160.0",
+        "three": "^0.160.1",
         "zustand": "^4.5.0"
       },
       "devDependencies": {
@@ -932,9 +933,9 @@
       "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q=="
     },
     "node_modules/@react-three/drei": {
-      "version": "9.93.0",
+      "version": "9.96.4",
-      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.93.0.tgz",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.96.4.tgz",
-      "integrity": "sha512-G59IZqPzpIZPvVLmzdCITXJQB+mnKMtFv7FvSRFogeelLzOFkyfnkED9QiY0WQCBMFOFLnSx6vb5xzmbQjHyQA==",
+      "integrity": "sha512-Zmy5felOamD7DkD5EeLfijNkohDxHNtXomGAf3C/0G6ml/ocf1+VrJ6mLDQRE+DhRnF1RDHV+WC6nuvpPPkx1w==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@mediapipe/tasks-vision": "0.10.8",
@@ -944,9 +945,6 @@
         "cross-env": "^7.0.3",
         "detect-gpu": "^5.0.28",
         "glsl-noise": "^0.0.0",
-        "lodash.clamp": "^4.0.3",
-        "lodash.omit": "^4.5.0",
-        "lodash.pick": "^4.4.0",
         "maath": "^0.10.7",
         "meshline": "^3.1.6",
         "react-composer": "^5.0.3",
@@ -954,12 +952,13 @@
         "stats-gl": "^2.0.0",
         "stats.js": "^0.17.0",
         "suspend-react": "^0.1.3",
-        "three-mesh-bvh": "^0.6.7",
+        "three-mesh-bvh": "^0.7.0",
-        "three-stdlib": "^2.28.0",
+        "three-stdlib": "^2.29.4",
         "troika-three-text": "^0.47.2",
+        "tunnel-rat": "^0.1.2",
         "utility-types": "^3.10.0",
         "uuid": "^9.0.1",
-        "zustand": "^3.5.13"
+        "zustand": "^3.7.1"
       },
       "peerDependencies": {
         "@react-three/fiber": ">=8.0",
@@ -990,9 +989,9 @@
       }
     },
     "node_modules/@react-three/fiber": {
-      "version": "8.15.13",
+      "version": "8.15.15",
-      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.15.13.tgz",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.15.15.tgz",
-      "integrity": "sha512-FS6F/k69q2KEf7nxdce1Rzd5qyp6VHtTgjouTMfiotWNiNwlhfQQeAxfcnDg0i2XVaOUGkLaD9BK8LBVnpfzUA==",
+      "integrity": "sha512-Z5POnzgpYxrgnYuiCv+8t7lpynEcGcn0/323kV1NtE7Cwq16aMqEuC6nF2Y/tK+crJpKNEqsRtvng/eJy0xxOA==",
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.26.7",
@@ -1863,6 +1862,11 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-memoize": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+    },
     "node_modules/fflate": {
       "version": "0.6.10",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
@@ -2141,6 +2145,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/joymap": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/joymap/-/joymap-2.2.4.tgz",
+      "integrity": "sha512-5N0VMbym49AwrfUz0vD6tE++I50SFjBYtwcJsdgE086GgAraGB2YQFsgVj+cG2fd8eUFmK+8U36Ecud3/UYTRg==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2",
+        "fast-memoize": "^2.5.2",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2194,21 +2208,6 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/lodash.clamp": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
-      "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
-    },
-    "node_modules/lodash.omit": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
-      "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg=="
-    },
-    "node_modules/lodash.pick": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
-      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q=="
-    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2893,22 +2892,22 @@
       }
     },
     "node_modules/three": {
-      "version": "0.160.0",
+      "version": "0.160.1",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.160.0.tgz",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.160.1.tgz",
-      "integrity": "sha512-DLU8lc0zNIPkM7rH5/e1Ks1Z8tWCGRq6g8mPowdDJpw1CFBJMU7UoJjC6PefXW7z//SSl0b2+GCw14LB+uDhng=="
+      "integrity": "sha512-Bgl2wPJypDOZ1stAxwfWAcJ0WQf7QzlptsxkjYiURPz+n5k4RBDLsq+6f9Y75TYxn6aHLcWz+JNmwTOXWrQTBQ=="
     },
     "node_modules/three-mesh-bvh": {
-      "version": "0.6.8",
+      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.6.8.tgz",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.0.tgz",
-      "integrity": "sha512-EGebF9DZx1S8+7OZYNNTT80GXJZVf+UYXD/HyTg/e2kR/ApofIFfUS4ZzIHNnUVIadpnLSzM4n96wX+l7GMbnQ==",
+      "integrity": "sha512-Hj0Z1Rp02yy5H+/xtMBu/dYAeRsSONaBaVLZoST9sMpZxycHypRiUeMHucPOLWFHnpc5hwelOnONcLpkfhDg0Q==",
       "peerDependencies": {
         "three": ">= 0.151.0"
       }
     },
     "node_modules/three-stdlib": {
-      "version": "2.28.12",
+      "version": "2.29.4",
-      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.28.12.tgz",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.29.4.tgz",
-      "integrity": "sha512-6ZAomFjrtDVNxI56F3QNgV7uVn8JlEZVgzZP+UE9h/zpKmeD3pIZvmWymw9sYPoteof0hLDFom3cETRhErQh3g==",
+      "integrity": "sha512-XNzGCrz/uAk9XoLwd35eN7dQyI4ggXZTeqjcN034YdYBpBlNO9kmLHehl/0Nw9jCelblB7jla+unHAOIyLyV6Q==",
       "dependencies": {
         "@types/draco3d": "^1.4.0",
         "@types/offscreencanvas": "^2019.6.4",
@@ -2966,6 +2965,14 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -3006,9 +3013,9 @@
       }
     },
     "node_modules/utility-types": {
-      "version": "3.10.0",
+      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
-      "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
       "engines": {
         "node": ">= 4"
       }
@@ -3047,9 +3054,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.1",
+      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",

package.json

@@ -9,15 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-three/drei": "^9.93.0",
+    "@react-three/drei": "^9.96.4",
-    "@react-three/fiber": "^8.15.13",
+    "@react-three/fiber": "^8.15.15",
     "@react-three/postprocessing": "^2.15.11",
     "@react-three/rapier": "^1.2.1",
     "gsap": "^3.12.5",
+    "joymap": "^2.2.4",
     "leva": "^0.9.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "three": "^0.160.0",
+    "three": "^0.160.1",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

src/App.jsx

@@ -43,7 +43,7 @@ function App() {
           <KeyboardControls map={map}>
             <Experience />
           </KeyboardControls>
-          {/* <Stats /> */}
+          <Stats />
         </Physics>
       </Suspense>
     </Canvas>

src/components/DriftParticlesRight.jsx

@@ -1,27 +0,0 @@
-import { Particles2 } from "./Particles2";
-import { Particles4 } from "./Particles4";
-
-export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
-
-  if(scale < 0.8) {
-    return null;
-  }
-
-  return (
-    <group {...props}>
-  <Particles2 turboColor={turboColor} scale={scale} />
-      <Particles2 turboColor={turboColor} scale={scale} />
-      <Particles2 turboColor={turboColor} scale={scale} />
-      <Particles2 turboColor={turboColor} scale={scale} />
-      <Particles2 turboColor={turboColor} scale={scale} />
-      <Particles2 turboColor={turboColor} scale={scale} />
-      <Particles2 turboColor={turboColor} scale={scale} />
-      <Particles2 turboColor={turboColor} scale={scale} />
-      <Particles2 turboColor={turboColor} scale={scale} />
-
-      <Particles4 turboColor={turboColor} scale={scale} />
-
-
-    </group>
-  )
-}

src/components/Experience.jsx

@@ -1,19 +1,15 @@
 import { Environment, OrbitControls, PerspectiveCamera, Lightformer } from '@react-three/drei'
 import { Ground } from './Ground'
-import { RigidBody } from '@react-three/rapier'
 import { PlayerController } from './PlayerController'
-import { Track } from './models/Spafrancorchamps-REALISTIC'
+import { Paris } from './models/tracks/Tour_paris_promenade'
-import { Paris } from './models/Tour_paris_promenade'
+import { EffectComposer, N8AO, Bloom, TiltShift2, HueSaturation, SMAA, ChromaticAberration, Vignette } from '@react-three/postprocessing'
-import { EffectComposer, N8AO, Bloom, DepthOfField, TiltShift2, HueSaturation, SMAA, ChromaticAberration, Vignette } from '@react-three/postprocessing'
-import { PlayerControllerAgain } from './PlayerControllerAgain'
 import { Skid } from './Skid'
 
 export const Experience = () => {
   return (
     <>
       <PlayerController />
-      <Skid />
+      {/* <Skid /> */}
-      {/* <PlayerControllerAgain /> */}
       <Ground position={[0, 0, 0]} />
       <Environment
         resolution={256}
@@ -33,8 +29,6 @@ export const Experience = () => {
         castShadow
       />
 
-      {/* <ambientLight intensity={0.2} /> */}
-      {/* <spotLight position={[10, 20, 10]} angle={0.12} penumbra={1} intensity={1} castShadow shadow-mapSize={1024} /> */}
       <Paris position={[0, 0, 0]} />
       <EffectComposer
         multisampling={0}
@@ -51,12 +45,7 @@ export const Experience = () => {
           luminanceSmoothing={0.01}
           intensity={0.5}
         />
-        {/* <DepthOfField
+
-          target={[0, 0, 12]}
-          focalLength={15}
-          bokehScale={60}
-          resolutionScale={1}
-        /> */}
         <TiltShift2/>
         <ChromaticAberration offset={[0.0006, 0.0006]} />
         <HueSaturation saturation={0.1} />

src/components/FlameParticle.jsx

@@ -1,56 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { useLoader, useFrame } from "@react-three/fiber";
-import * as THREE from "three";
-
-export const FlameParticle = ({ position, png, turboColor, delay = 0 }) => {
-  const texture = useLoader(THREE.TextureLoader, png);
-  const pointsRef = useRef();
-  const [size, setSize] = useState(1);
-  const [opacity, setOpacity] = useState(1);
-  const [initialized, setInitialized] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setInitialized(true);
-    }, delay);
-    return () => clearTimeout(timer);
-  }, [delay]);
-
-  const points = React.useMemo(() => {
-    const geom = new THREE.BufferGeometry();
-    geom.setAttribute(
-      "position",
-      new THREE.Float32BufferAttribute(position, 3)
-    );
-    return geom;
-  }, [position]);
-
-  useFrame(({clock}, delta) => {
-    if (!initialized) return;
-
-    pointsRef.current.position.y += 0.03 * delta * 144;
-    pointsRef.current.position.z += 0.06 * delta * 144;
-    if(pointsRef.current.position.y > 0.4) {
-      pointsRef.current.position.y = 0;
-      pointsRef.current.position.z = 0;
-      setOpacity(1);
-    }
-    if(opacity > 0) {
-      setOpacity((opacity) => opacity - 0.05 * delta * 144);
-    }
-  });
-
-  return (
-    <points ref={pointsRef} geometry={points}>
-      <pointsMaterial
-        size={size}
-        alphaMap={texture}
-        transparent={true}
-        depthWrite={false}
-        color={0x000000}
-        opacity={opacity}
-        toneMapped={false}
-      />
-    </points>
-  );
-};

src/components/Particles/DriftParticlesLeft.jsx

@@ -3,23 +3,23 @@ import { Particles3 } from "./Particles3";
 
 export const DriftParticlesLeft = ({turboColor,scale, ...props}) => {
 
-  if(scale < 0.8) {
+  // if(scale < 0.8) {
-    return null;
+  //   return null;
-  }
+  // }
 
   return (
     <group {...props}>
       <Particles1 turboColor={turboColor} scale={scale} />
+      {/* <Particles1 turboColor={turboColor} scale={scale} />
       <Particles1 turboColor={turboColor} scale={scale} />
       <Particles1 turboColor={turboColor} scale={scale} />
       <Particles1 turboColor={turboColor} scale={scale} />
       <Particles1 turboColor={turboColor} scale={scale} />
       <Particles1 turboColor={turboColor} scale={scale} />
       <Particles1 turboColor={turboColor} scale={scale} />
-      <Particles1 turboColor={turboColor} scale={scale} />
+      <Particles1 turboColor={turboColor} scale={scale} /> */}
-      <Particles1 turboColor={turboColor} scale={scale} />
 
-      <Particles3 turboColor={turboColor} scale={scale} />
+      {/* <Particles3 turboColor={turboColor} scale={scale} /> */}
 
     </group>
   )

src/components/Particles/DriftParticlesRight.jsx

@@ -0,0 +1,16 @@
+import { Particles2 } from "./Particles2";
+import { Particles4 } from "./Particles4";
+
+export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
+
+  // if(scale < 0.8) {
+  //   return null;
+  // }
+
+  return (
+    <group {...props}>
+    <Particles2 turboColor={turboColor} scale={scale} />
+
+    </group>
+  )
+}

src/components/Particles/FlameParticle.jsx

@@ -0,0 +1,67 @@
+import React, { useRef, useMemo } from "react";
+import { useLoader, useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+export const FlameParticle = ({ position, png, isBoosting, delay = 0 }) => {
+  const texture = useLoader(THREE.TextureLoader, png);
+  const pointsRef = useRef();
+  const initialized = useRef(false);
+
+  // Initialize after delay
+  useMemo(() => {
+    const timer = setTimeout(() => {
+      initialized.current = true;
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  const points = useMemo(() => {
+    const geom = new THREE.BufferGeometry();
+    geom.setAttribute(
+      "position",
+      new THREE.Float32BufferAttribute(position, 3)
+    );
+    return geom;
+  }, [position]);
+
+  useFrame(({clock}, delta) => {
+    if (!initialized.current) return;
+
+    const pointsCurrent = pointsRef.current;
+
+    if (isBoosting) {
+      // Update logic when boosting
+      pointsCurrent.position.y += 0.03 * delta * 144;
+      pointsCurrent.position.z += 0.06 * delta * 144;
+
+      if(pointsCurrent.position.y > 0.4) {
+        pointsCurrent.position.y = 0;
+        pointsCurrent.position.z = 0;
+        pointsCurrent.material.opacity = 1;
+      }
+    
+      if(pointsCurrent.material.opacity > 0) {
+        pointsCurrent.material.opacity -= 0.05 * delta * 144;
+      }
+    } else {
+      // Reset position and opacity when not boosting
+      pointsCurrent.position.y = 0;
+      pointsCurrent.position.z = 0;
+      pointsCurrent.material.opacity = 0;
+    }
+  });
+
+  return (
+    <points ref={pointsRef} geometry={points}>
+      <pointsMaterial
+        size={1}
+        alphaMap={texture}
+        transparent={true}
+        depthWrite={false}
+        color={0x000000}
+        opacity={1}
+        toneMapped={false}
+      />
+    </points>
+  );
+};

src/components/Particles/FlameParticles.jsx

@@ -2,9 +2,7 @@ import { FlameParticle } from "./FlameParticle";
 
 export const FlameParticles = ({ isBoosting }) => {
 
-  if (!isBoosting) {
+
-    return null;
-  }
   return (
     <group>
       {/* bottom left */}
@@ -12,37 +10,37 @@ export const FlameParticles = ({ isBoosting }) => {
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={0}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={100}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={200}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={300}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={400}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={500}
         />
       </group>
@@ -52,37 +50,37 @@ export const FlameParticles = ({ isBoosting }) => {
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={0}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={100}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={200}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={300}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={400}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={500}
         />
       </group>
@@ -91,37 +89,37 @@ export const FlameParticles = ({ isBoosting }) => {
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={0}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={100}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={200}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={300}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={400}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={500}
         />
       </group>
@@ -129,37 +127,37 @@ export const FlameParticles = ({ isBoosting }) => {
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={0}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={100}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={200}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={300}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_02.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={400}
         />
         <FlameParticle
           position={[0, 0, 0]}
           png="./fire_01.png"
-          turboColor={0xfea347}
+          isBoosting={isBoosting}
           delay={500}
         />
       </group>

src/components/Particles/Particles1.jsx

@@ -0,0 +1,57 @@
+import { useRef, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from 'three';
+
+export const Particles1 = ({ turboColor, scale, numParticles = 50, ...props }) => {
+  const instancedMeshRef = useRef();
+  const particlesData = useMemo(() => {
+    return new Array(numParticles).fill().map(() => ({
+      position: new THREE.Vector3(-0.6, 0.05, 0.5),
+      velocity: new THREE.Vector3(-Math.random() * 0.05, Math.random() * 0.05, Math.random() * 0.02),
+      gravity: -0.003
+    }));
+  }, [numParticles]);
+
+  useFrame((state, delta) => {
+    if (!instancedMeshRef.current) {
+      return;
+    }
+
+    // Manage visibility directly in the animation loop
+    instancedMeshRef.current.visible = scale >= 0.8;
+
+    if (scale < 0.8) {
+      return;
+    }
+
+    const deltaScaled = delta * 144; // Scale for 144 FPS
+    particlesData.forEach((particle, i) => {
+      particle.velocity.y += particle.gravity * deltaScaled;
+
+      particle.position.x += particle.velocity.x * deltaScaled;
+      particle.position.y += particle.velocity.y * deltaScaled;
+      particle.position.z += particle.velocity.z * deltaScaled;
+
+      if (particle.position.y < 0.05) {
+        particle.position.set(-0.6, 0.05, 0.5);
+        particle.velocity.set(-Math.random() * 0.05, Math.random() * 0.05, Math.random() * 0.02);
+      }
+      const matrix = new THREE.Matrix4();
+      matrix.setPosition(particle.position);
+      instancedMeshRef.current.setMatrixAt(i, matrix);
+    });
+
+    instancedMeshRef.current.instanceMatrix.needsUpdate = true;
+  });
+
+  return (
+    <instancedMesh ref={instancedMeshRef} args={[null, null, numParticles]} visible={scale >= 0.8}>
+      <sphereGeometry args={[0.01, 16, 16]} />
+      <meshStandardMaterial
+        emissive={turboColor}
+        toneMapped={false}
+        emissiveIntensity={5}
+      />
+    </instancedMesh>
+  );
+};

src/components/Particles/Particles2.jsx

@@ -0,0 +1,57 @@
+import { useRef, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from 'three';
+
+export const Particles2 = ({ turboColor, scale, numParticles = 50, ...props }) => {
+  const instancedMeshRef = useRef();
+  const particlesData = useMemo(() => {
+    return new Array(numParticles).fill().map(() => ({
+      position: new THREE.Vector3(0.6, 0.05, 0.5),
+      velocity: new THREE.Vector3(Math.random() * 0.05, Math.random() * 0.05, Math.random() * 0.02),
+      gravity: -0.003
+    }));
+  }, [numParticles]);
+
+  useFrame((state, delta) => {
+    if (!instancedMeshRef.current) {
+      return;
+    }
+
+    // Manage visibility directly in the animation loop
+    instancedMeshRef.current.visible = scale >= 0.8;
+
+    if (scale < 0.8) {
+      return;
+    }
+
+    const deltaScaled = delta * 144; // Scale for 144 FPS
+    particlesData.forEach((particle, i) => {
+      particle.velocity.y += particle.gravity * deltaScaled;
+
+      particle.position.x += particle.velocity.x * deltaScaled;
+      particle.position.y += particle.velocity.y * deltaScaled;
+      particle.position.z += particle.velocity.z * deltaScaled;
+
+      if (particle.position.y < 0.05) {
+        particle.position.set(0.6, 0.05, 0.5);
+        particle.velocity.set(Math.random() * 0.05, Math.random() * 0.05, Math.random() * 0.02);
+      }
+      const matrix = new THREE.Matrix4();
+      matrix.setPosition(particle.position);
+      instancedMeshRef.current.setMatrixAt(i, matrix);
+    });
+
+    instancedMeshRef.current.instanceMatrix.needsUpdate = true;
+  });
+
+  return (
+    <instancedMesh ref={instancedMeshRef} args={[null, null, numParticles]} visible={scale >= 0.8}>
+      <sphereGeometry args={[0.01, 16, 16]} />
+      <meshStandardMaterial
+        emissive={turboColor}
+        toneMapped={false}
+        emissiveIntensity={5}
+      />
+    </instancedMesh>
+  );
+};

src/components/Particles1.jsx

@@ -1,55 +0,0 @@
-import { useRef } from "react";
-import { useFrame } from "@react-three/fiber";
-import * as THREE from 'three';
-
-export const Particles1 = ({ turboColor, scale, ...props }) => {
-  const ref = useRef();
-  const velocity = useRef({
-    x: -Math.random() * 0.05,
-    y: Math.random() * 0.05,
-    z: Math.random() * 0.02,
-  });
-  const gravity = -0.003;
-  
-  useFrame((state, delta) => {
-    let position = ref.current.position;
-    let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
-  
-    // Adjust gravity and velocity based on delta
-    velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
-  
-    // Scale velocity changes by delta
-    position.x += velocity.current.x * delta * 144;
-    position.y += velocity.current.y * delta * 144;
-    position.z += velocity.current.z * delta * 144;
-  
-    if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
-      const alignmentQuaternion = new THREE.Quaternion();
-      alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize());
-      ref.current.quaternion.slerp(alignmentQuaternion, 0.1);
-    }
-  
-    if (position.y < 0.05) {
-      position.set(-0.6, 0.05, 0.5);
-      velocity.current = {
-        x: -Math.random() * 0.05,
-        y: Math.random() * 0.05,
-        z: Math.random() * 0.02,
-      };
-    }
-  
-    ref.current.position.set(position.x, position.y, position.z);
-  });
-  
-
-  return (
-    <mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
-      <sphereGeometry args={[0.01, 16, 16]} />
-      <meshStandardMaterial
-        emissive={turboColor}
-        toneMapped={false}
-        emissiveIntensity={5}
-      />
-    </mesh>
-  );
-};

src/components/Particles2.jsx

@@ -1,55 +0,0 @@
-import { useRef } from "react";
-import { useFrame } from "@react-three/fiber";
-import * as THREE from 'three';
-
-export const Particles2 = ({ turboColor, scale, ...props }) => {
-  const ref = useRef();
-  const velocity = useRef({
-    x: Math.random() * 0.05,
-    y: Math.random() * 0.05,
-    z: Math.random() * 0.02,
-  });
-  const gravity = -0.003;
-  
-  useFrame((state, delta) => {
-    let position = ref.current.position;
-    let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
-  
-    // Adjust gravity and velocity based on delta
-    velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
-  
-    // Scale velocity changes by delta
-    position.x += velocity.current.x * delta * 144;
-    position.y += velocity.current.y * delta * 144;
-    position.z += velocity.current.z * delta * 144;
-  
-    if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
-      const alignmentQuaternion = new THREE.Quaternion();
-      alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize());
-      ref.current.quaternion.slerp(alignmentQuaternion, 0.1);
-    }
-  
-    if (position.y < 0.05) {
-      position.set(0.6, 0.05, 0.5);
-      velocity.current = {
-        x: Math.random() * 0.05,
-        y: Math.random() * 0.05,
-        z: Math.random() * 0.02,
-      };
-    }
-  
-    ref.current.position.set(position.x, position.y, position.z);
-  });
-  
-
-  return (
-    <mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
-      <sphereGeometry args={[0.01, 16, 16]} />
-      <meshStandardMaterial
-        emissive={turboColor}
-        toneMapped={false}
-        emissiveIntensity={5}
-      />
-    </mesh>
-  );
-};

src/components/PlayerController.jsx

@@ -12,21 +12,17 @@ import {
 import { useFrame, useThree } from "@react-three/fiber";
 import { useRef, useState, useEffect, useCallback } from "react";
 import * as THREE from "three";
-import { Model } from "./models/Racing_kart";
+
-import { FrontRightWheel } from "./models/Front_Right_Wheel";
+import { Mario } from "./models/characters/Mario_kart";
-import { FrontLeftWheel } from "./models/Front_Left_Wheel";
+import { DriftParticlesLeft } from "./Particles/DriftParticlesLeft";
-import { RearWheels } from "./models/Rear_wheels";
+import { DriftParticlesRight } from "./Particles/DriftParticlesRight";
-import gsap from "gsap";
+
-import { Mario } from "./models/Mario_kart";
+import { PointParticle } from "./Particles/PointParticle";
-import { Particles1 } from "./Particles1";
+
-import { DriftParticlesLeft } from "./DriftParticlesLeft";
+import { FlameParticles } from "./Particles/FlameParticles";
-import { DriftParticlesRight } from "./DriftParticlesRight";
-import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
-import { PointParticle } from "./PointParticle";
-import { FlameParticle } from "./FlameParticle";
-import { FlameParticles } from "./FlameParticles";
 import { useStore } from "./store";
 import { Cylinder } from "@react-three/drei";
+import { useGamepad } from "./useGamepad";
 
 export const PlayerController = () => {
   const upPressed = useKeyboardControls((state) => state[Controls.up]);
@@ -68,14 +64,16 @@ export const PlayerController = () => {
   let targetZPosition = 8;
   const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
   const engineSound = useRef();
+  const { buttonA, joystick, RB } = useGamepad();
 
   const [scale, setScale] = useState(0);
-  const { actions, addPastPosition } = useStore();
 
   useFrame(({ pointer, clock }, delta) => {
     const time = clock.getElapsedTime();
     if (!body.current && !mario.current) return;
 
+    // console.log(buttonA, joystick);
+
     // HANDLING AND STEERING
     const kartRotation =
       kart.current.rotation.y - driftDirection.current * driftForce.current;
@@ -84,8 +82,6 @@ export const PlayerController = () => {
       0,
       -Math.cos(kartRotation)
     );
-    actions.setBodyPosition(body.current.translation());
-    actions.setBodyRotation(kart.current.rotation);
 
     if (leftPressed && currentSpeed > 0) {
       steeringAngle = currentSteeringSpeed;
@@ -100,6 +96,7 @@ export const PlayerController = () => {
     }
 
     // mouse steering
+    const steer = joystick[0] * 0.8;
 
     if (!driftLeft.current && !driftRight.current) {
       steeringAngle = currentSteeringSpeed * -pointer.x;
@@ -111,6 +108,19 @@ export const PlayerController = () => {
       steeringAngle = currentSteeringSpeed * -(pointer.x + 0.5);
       targetXPosition = -camMaxOffset * -pointer.x;
     }
+
+    if (steer) {
+      if (!driftLeft.current && !driftRight.current) {
+        steeringAngle = currentSteeringSpeed * -joystick[0];
+        targetXPosition = -camMaxOffset * -joystick[0];
+      } else if (driftLeft.current && !driftRight.current) {
+        steeringAngle = currentSteeringSpeed * -(joystick[0] - 1);
+        targetXPosition = -camMaxOffset * -joystick[0];
+      } else if (driftRight.current && !driftLeft.current) {
+        steeringAngle = currentSteeringSpeed * -(joystick[0] + 1);
+        targetXPosition = -camMaxOffset * -joystick[0];
+      }
+    }
     // ACCELERATING
 
     if (upPressed && currentSpeed < maxSpeed) {
@@ -138,6 +148,33 @@ export const PlayerController = () => {
         );
       }
     }
+
+    if (buttonA && currentSpeed < maxSpeed) {
+      // Accelerate the kart within the maximum speed limit
+      setCurrentSpeed(
+        Math.min(currentSpeed + acceleration * delta * 144, maxSpeed)
+      );
+    } else if (
+      buttonA &&
+      currentSpeed > maxSpeed &&
+      boostDuration.current > 0
+    ) {
+      setCurrentSpeed(
+        Math.max(currentSpeed - decceleration * delta * 144, maxSpeed)
+      );
+    }
+
+    if (buttonA) {
+      if (currentSteeringSpeed < MaxSteeringSpeed) {
+        setCurrentSteeringSpeed(
+          Math.min(
+            currentSteeringSpeed + 0.0001 * delta * 144,
+            MaxSteeringSpeed
+          )
+        );
+      }
+    }
+
     // REVERSING
     if (downPressed && currentSpeed < -maxSpeed) {
       setCurrentSpeed(
@@ -145,7 +182,7 @@ export const PlayerController = () => {
       );
     }
     // DECELERATING
-    else if (!upPressed && !downPressed) {
+    else if (!buttonA && !downPressed) {
       if (currentSteeringSpeed > 0) {
         setCurrentSteeringSpeed(
           Math.max(currentSteeringSpeed - 0.00005 * delta * 144, 0)
@@ -182,34 +219,58 @@ export const PlayerController = () => {
       jumpForce.current += 10;
       isOnFloor.current = false;
       jumpIsHeld.current = true;
+    } else if (RB && isOnFloor.current && !jumpIsHeld.current) {
+      jumpForce.current += 10;
+      isOnFloor.current = false;
+      jumpIsHeld.current = true;
     }
 
     if (!isOnFloor.current && jumpForce.current > 0) {
       jumpForce.current -= 1 * delta * 144;
     }
-    if (!jumpPressed) {
+    if (!jumpPressed && !RB) {
       jumpIsHeld.current = false;
       driftDirection.current = 0;
       driftForce.current = 0;
       driftLeft.current = false;
       driftRight.current = false;
     }
+    console.log(jumpIsHeld.current);
     // DRIFTING
-    if (
+    // if (
-      jumpIsHeld.current &&
+    //   jumpIsHeld.current &&
-      currentSteeringSpeed > 0 &&
+    //   currentSteeringSpeed > 0 &&
-      pointer.x < -0.1 &&
+    //   pointer.x < -0.1 &&
-      !driftRight.current
+    //   !driftRight.current
-    ) {
+    // ) {
-      driftLeft.current = true;
+    //   driftLeft.current = true;
-    }
+    // }
-    if (
+    // if (
-      jumpIsHeld.current &&
+    //   jumpIsHeld.current &&
-      currentSteeringSpeed > 0 &&
+    //   currentSteeringSpeed > 0 &&
-      pointer.x > 0.1 &&
+    //   pointer.x > 0.1 &&
-      !driftLeft.current
+    //   !driftLeft.current
-    ) {
+    // ) {
-      driftRight.current = true;
+    //   driftRight.current = true;
+    // }
+
+    if (steer) {
+      if (
+        jumpIsHeld.current &&
+        currentSteeringSpeed > 0 &&
+        steer < -0.1 &&
+        !driftRight.current
+      ) {
+        driftLeft.current = true;
+      }
+      if (
+        jumpIsHeld.current &&
+        currentSteeringSpeed > 0 &&
+        steer > 0.1 &&
+        !driftLeft.current
+      ) {
+        driftRight.current = true;
+      }
     }
 
     if (!jumpIsHeld.current && !driftLeft.current && !driftRight.current) {
@@ -329,7 +390,7 @@ export const PlayerController = () => {
       <RigidBody
         ref={body}
         colliders={false}
-        position={[8, 20, -96]}
+        position={[8, 100, -96]}
         centerOfMass={[0, -1, 0]}
         mass={3}
         ccd
@@ -340,12 +401,8 @@ export const PlayerController = () => {
           onCollisionEnter={(event) => {
             isOnFloor.current = true;
           }}
-          // onCollisionExit={(event) => {
-          //   isOnFloor.current = false
-          // }}
         />
       </RigidBody>
-
       <group ref={kart} rotation={[0, Math.PI / 2, 0]}>
         <group ref={mario}>
           <Mario
@@ -353,13 +410,6 @@ export const PlayerController = () => {
             steeringAngleWheels={steeringAngleWheels}
             isBoosting={isBoosting}
           />
-          {/* <pointLight
-            position={[0.6, 0.05, 0.5]}
-            intensity={scale}
-            color={turboColor}
-            distance={1}
-          /> */}
-
           <mesh position={[0.6, 0.05, 0.5]} scale={scale}>
             <sphereGeometry args={[0.05, 16, 16]} />
             <meshStandardMaterial
@@ -370,12 +420,6 @@ export const PlayerController = () => {
               opacity={0.4}
             />
           </mesh>
-          {/* <pointLight
-            position={[-0.6, 0.05, 0.5]}
-            intensity={scale}
-            color={turboColor}
-            distance={1}
-          /> */}
           <mesh position={[-0.6, 0.05, 0.5]} scale={scale}>
             <sphereGeometry args={[0.05, 16, 16]} />
             <meshStandardMaterial
@@ -386,15 +430,6 @@ export const PlayerController = () => {
               opacity={0.4}
             />
           </mesh>
-
-          <Cylinder
-            args={[0.1, 0, 1, 128, 64, true]}
-            position={[-0.6, 0.05, 0.5]}
-            rotation={[Math.PI / 3, 0 , 0]}
-          >
-            <meshStandardMaterial side={THREE.DoubleSide} />
-          </Cylinder>
-          {/* <Flame/> */}
           <FlameParticles isBoosting={isBoosting} />
           <DriftParticlesLeft turboColor={turboColor} scale={scale} />
           <DriftParticlesRight turboColor={turboColor} scale={scale} />
@@ -419,15 +454,12 @@ export const PlayerController = () => {
             turboColor={turboColor}
           />
         </group>
-
-        {/* <ContactShadows frames={1} /> */}
         <PerspectiveCamera
           makeDefault
           position={[0, 2, 8]}
           fov={50}
           ref={cam}
         />
-        {/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}
       </group>
     </group>
   );

src/components/PlayerControllerAgain.jsx

@@ -1,417 +0,0 @@
-import { Controls } from "../App";
-import { BallCollider, RigidBody, useRapier } from "@react-three/rapier";
-import {
-  useKeyboardControls,
-  PerspectiveCamera,
-  ContactShadows,
-  Sphere,
-  OrbitControls,
-  Trail,
-  PositionalAudio,
-} from "@react-three/drei";
-import { useFrame, useThree } from "@react-three/fiber";
-import { useRef, useState, useEffect, useCallback } from "react";
-import * as THREE from "three";
-import { Model } from "./models/Racing_kart";
-import { FrontRightWheel } from "./models/Front_Right_Wheel";
-import { FrontLeftWheel } from "./models/Front_Left_Wheel";
-import { RearWheels } from "./models/Rear_wheels";
-import gsap from "gsap";
-import { Mario } from "./models/Mario_kart";
-import { Particles1 } from "./Particles1";
-import { DriftParticlesLeft } from "./DriftParticlesLeft";
-import { DriftParticlesRight } from "./DriftParticlesRight";
-import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
-import { PointParticle } from "./PointParticle";
-import { FlameParticle } from "./FlameParticle";
-import { FlameParticles } from "./FlameParticles";
-
-export const PlayerControllerAgain = () => {
-  const upPressed = useKeyboardControls((state) => state[Controls.up]);
-  const downPressed = useKeyboardControls((state) => state[Controls.down]);
-  const leftPressed = useKeyboardControls((state) => state[Controls.left]);
-  const rightPressed = useKeyboardControls((state) => state[Controls.right]);
-  const jumpPressed = useKeyboardControls((state) => state[Controls.jump]);
-  const [isOnGround, setIsOnGround] = useState(false);
-  const body = useRef();
-  const kart = useRef();
-  const cam = useRef();
-  const initialSpeed = 0;
-  const maxSpeed = 45;
-  const boostSpeed = 70;
-  const acceleration = 30;
-  const decceleration = 50;
-  const damping = 90;
-  const MaxSteeringSpeed = 1.1;
-  const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0);
-  const [currentSpeed, setCurrentSpeed] = useState(initialSpeed);
-  const camMaxOffset = 1;
-  let steeringAngle = 0;
-  const isOnFloor = useRef(false);
-  const jumpForce = useRef(0);
-  const jumpIsHeld = useRef(false);
-  const driftDirection = useRef(0);
-  const driftLeft = useRef(false);
-  const driftRight = useRef(false);
-  const driftForce = useRef(0);
-  const mario = useRef();
-  const accumulatedDriftPower = useRef(0);
-  const blueTurboThreshold = 10;
-  const orangeTurboThreshold = 30;
-  const purpleTurboThreshold = 60;
-  const [turboColor, setTurboColor] = useState(0xffffff);
-  const boostDuration = useRef(0);
-  const [isBoosting, setIsBoosting] = useState(false);
-  let targetXPosition = 0;
-  let targetZPosition = 8;
-  const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
-  const engineSound = useRef();
-  const cameraLerpFactor = 2;
-  const marioLerpFactor = 5;
-
-  const [scale, setScale] = useState(0);
-  let lastTime = performance.now();
-
-  useFrame(({ pointer, clock }) => {
-    const time = clock.getElapsedTime();
-    const currentTime = performance.now();
-    const deltaTime = (currentTime - lastTime) * 0.001;
-    lastTime = currentTime;
-    if (!body.current && !mario.current) return;
-
-    // HANDLING AND STEERING
-    const kartRotation =
-      kart.current.rotation.y - driftDirection.current * driftForce.current;
-    const forwardDirection = new THREE.Vector3(
-      -Math.sin(kartRotation),
-      0,
-      -Math.cos(kartRotation)
-    );
-    body.current.applyImpulse(
-      {
-        x: forwardDirection.x * currentSpeed * 50 * deltaTime,
-        y: 0 + jumpForce.current,
-        z: forwardDirection.z * currentSpeed * 50 * deltaTime,
-      },
-      true
-    );
-
-    // ACCELERATING
-    if (upPressed && currentSpeed < maxSpeed) {
-
-      setCurrentSpeed(
-        Math.min(currentSpeed + acceleration * deltaTime, maxSpeed)
-      );
-    } 
-    if (!upPressed) {
-      if (currentSpeed > 0) {
-        setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0));
-      }
-      if (currentSteeringSpeed > 0) {
-        setCurrentSteeringSpeed(
-          Math.max(currentSteeringSpeed - 1 * deltaTime, 0)
-        );
-      }
-    }
-
-    if (upPressed) {
-      if (currentSteeringSpeed < MaxSteeringSpeed) {
-        setCurrentSteeringSpeed(
-          Math.min(currentSteeringSpeed + 1 * deltaTime, MaxSteeringSpeed)
-        );
-      }
-    }
-    if (leftPressed && currentSpeed > 0) {
-      steeringAngle = currentSteeringSpeed;
-      targetXPosition = -camMaxOffset;
-    } else if (rightPressed && currentSpeed > 0) {
-      steeringAngle = -currentSteeringSpeed;
-      targetXPosition = camMaxOffset;
-    } else {
-      steeringAngle = 0;
-      targetXPosition = 0;
-      1;
-    }
-
-    if (!driftLeft.current && !driftRight.current) {
-      steeringAngle = currentSteeringSpeed * -pointer.x;
-      targetXPosition = -camMaxOffset * -pointer.x;
-    } else if (driftLeft.current && !driftRight.current) {
-      steeringAngle = currentSteeringSpeed * -(pointer.x - 0.8);
-      targetXPosition = -camMaxOffset * -pointer.x;
-    } else if (driftRight.current && !driftLeft.current) {
-      steeringAngle = currentSteeringSpeed * -(pointer.x + 0.8);
-      targetXPosition = -camMaxOffset * -pointer.x;
-    }
-    kart.current.rotation.y += steeringAngle * deltaTime;
-    body.current.applyImpulse(
-      {
-        x: -body.current.linvel().x * damping * deltaTime,
-        y: 0,
-        z: -body.current.linvel().z * damping * deltaTime,
-      },
-      true
-    );
-    body.current.applyImpulse(
-      {
-        x: forwardDirection.x * currentSpeed * 50 * deltaTime,
-        y: 0 + jumpForce.current,
-        z: forwardDirection.z * currentSpeed * 50 * deltaTime,
-      },
-      true
-    );
-
-    const bodyPosition = body.current.translation();
-    kart.current.position.set(
-      bodyPosition.x,
-      bodyPosition.y - 0.5,
-      bodyPosition.z
-    );
-
-    // JUMPING
-    if (jumpPressed && isOnFloor.current && !jumpIsHeld.current) {
-      jumpForce.current += 7;
-      isOnFloor.current = false;
-      jumpIsHeld.current = true;
-    }
-
-    if (!isOnFloor.current && jumpForce.current > 0) {
-      jumpForce.current -= 1;
-    }
-    if (!jumpPressed) {
-      jumpIsHeld.current = false;
-      driftDirection.current = 0;
-      driftForce.current = 0;
-      driftLeft.current = false;
-      driftRight.current = false;
-    }
-
-    // DRIFTING
-    if (
-      jumpIsHeld.current &&
-      currentSteeringSpeed > 0 &&
-      pointer.x < -0.1 &&
-      !driftRight.current
-    ) {
-      driftLeft.current = true;
-    }
-    if (
-      jumpIsHeld.current &&
-      currentSteeringSpeed > 0 &&
-      pointer.x > 0.1 &&
-      !driftLeft.current
-    ) {
-      driftRight.current = true;
-    }
-
-    if (driftLeft.current) {
-      driftDirection.current = 1;
-      driftForce.current = 0.15;
-      mario.current.rotation.y = THREE.MathUtils.lerp(
-        mario.current.rotation.y,
-        steeringAngle * 0.5,
-        marioLerpFactor * deltaTime
-      );
-      accumulatedDriftPower.current += 10 * (steeringAngle + 1) * deltaTime;
-    }
-    if (driftRight.current) {
-      driftDirection.current = -1;
-      driftForce.current = 0.15;
-      mario.current.rotation.y = THREE.MathUtils.lerp(
-        mario.current.rotation.y,
-        -(-steeringAngle) * 0.5,
-        marioLerpFactor * deltaTime
-      );
-      accumulatedDriftPower.current += 10 * (-steeringAngle + 1) * deltaTime;
-    }
-
-    // console.log(steeringAngle)
-    if (!driftLeft.current && !driftRight.current) {
-      mario.current.rotation.y = THREE.MathUtils.lerp(
-        mario.current.rotation.y,
-        steeringAngle * 0.2,
-        marioLerpFactor * deltaTime
-      );
-      setScale(0);
-      accumulatedDriftPower.current = 0;
-      setTurboColor(0xffffff);
-
-    }
-      
-
-    if (accumulatedDriftPower.current > blueTurboThreshold) {
-      setTurboColor(0x00ffff);
-      boostDuration.current = 50;
-    }
-    if (accumulatedDriftPower.current > orangeTurboThreshold) {
-      setTurboColor(0xffcf00);
-      boostDuration.current = 100;
-    }
-    if (accumulatedDriftPower.current > purpleTurboThreshold) {
-      setTurboColor(0xff00ff);
-      boostDuration.current = 250;
-    }
-
-    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);
-      } else {
-        setScale(vibration);
-      }
-    }
-
-    // RELEASING DRIFT
-    if (isBoosting) {
-      setCurrentSpeed(boostSpeed);
-      boostDuration.current -= deltaTime * 200; 
-      targetZPosition = 10;
-
-      if (boostDuration.current <= 0) {
-        setIsBoosting(false); 
-        targetZPosition = 8;
-      }
-    } else if (boostDuration.current > 0 && !jumpIsHeld.current) {
-      setIsBoosting(true); 
-    }
-
-    if (!isBoosting && currentSpeed === boostSpeed) {
-      setCurrentSpeed(maxSpeed); 
-    }
-
-
-    if (!isBoosting) {
-      if (upPressed && currentSpeed < maxSpeed) {
-        setCurrentSpeed(Math.min(currentSpeed + acceleration * deltaTime, maxSpeed));
-      } else if (!upPressed && currentSpeed > 0) {
-        setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0));
-      }
-    }
-
-    // Debug logging
-    // console.log(`Speed: ${currentSpeed}, Boosting: ${isBoosting}, Boost Duration: ${boostDuration.current}`);
-
-        // CAMERA WORK
-
-        cam.current.position.x = THREE.MathUtils.lerp(
-          cam.current.position.x,
-          targetXPosition,
-          cameraLerpFactor * deltaTime
-        );
-    
-        cam.current.position.z = THREE.MathUtils.lerp(
-          cam.current.position.z,
-          targetZPosition,
-          cameraLerpFactor * deltaTime
-        );
-
-        cam.current.updateMatrixWorld();
-
-    setSteeringAngleWheels(steeringAngle * 0.1);
-    //misc / debug
-
-    // SOUND WORK
-  });
-
-  return (
-    <group>
-      <RigidBody
-        ref={body}
-        colliders={false}
-        position={[8, 20, -96]}
-        centerOfMass={[0, -1, 0]}
-        mass={3}
-      >
-        <BallCollider
-          args={[0.5]}
-          mass={3}
-          onCollisionEnter={(event) => {
-            isOnFloor.current = true;
-          }}
-        />
-        onCollisionEnter=
-        {(event) => {
-          isOnFloor.current = false;
-        }}
-      </RigidBody>
-
-      <group ref={kart} rotation={[0, Math.PI / 2, 0]}>
-        <group ref={mario}>
-          <Mario
-            currentSpeed={currentSpeed}
-            steeringAngleWheels={steeringAngleWheels}
-          />
-          <pointLight
-            position={[0.6, 0.05, 0.5]}
-            intensity={scale}
-            color={turboColor}
-            distance={1}
-          />
-
-          <mesh position={[0.6, 0.05, 0.5]} scale={scale}>
-            <sphereGeometry args={[0.1, 16, 16]} />
-            <meshStandardMaterial
-              emissive={turboColor}
-              toneMapped={false}
-              emissiveIntensity={100}
-              transparent
-              opacity={0.4}
-            />
-          </mesh>
-          <pointLight
-            position={[-0.6, 0.05, 0.5]}
-            intensity={scale}
-            color={turboColor}
-            distance={1}
-          />
-          <mesh position={[-0.6, 0.05, 0.5]} scale={scale}>
-            <sphereGeometry args={[0.1, 16, 16]} />
-            <meshStandardMaterial
-              emissive={turboColor}
-              toneMapped={false}
-              emissiveIntensity={100}
-              transparent
-              opacity={0.4}
-            />
-          </mesh>
-          {/* <Flame/> */}
-          <FlameParticles isBoosting={isBoosting} />
-          <DriftParticlesLeft turboColor={turboColor} scale={scale} />
-          <DriftParticlesRight turboColor={turboColor} scale={scale} />
-          <PointParticle
-            position={[-0.6, 0.05, 0.5]}
-            png="./circle.png"
-            turboColor={turboColor}
-          />
-          <PointParticle
-            position={[0.6, 0.05, 0.5]}
-            png="./circle.png"
-            turboColor={turboColor}
-          />
-          <PointParticle
-            position={[-0.6, 0.05, 0.5]}
-            png="./star.png"
-            turboColor={turboColor}
-          />
-          <PointParticle
-            position={[0.6, 0.05, 0.5]}
-            png="./star.png"
-            turboColor={turboColor}
-          />
-        </group>
-
-        {/* <ContactShadows frames={1} /> */}
-        <PerspectiveCamera
-          makeDefault
-          position={[0, 2, 8]}
-          fov={40}
-          ref={cam}
-        />
-        {/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}
-      </group>
-    </group>
-  );
-};

src/components/Skid.jsx

@@ -57,7 +57,7 @@ function setItemAt(instances, bodyPosition, bodyRotation, index) {
     .add(bodyPosition);
 
   // Apply the offset to position the skid marks behind the body
-  console.log(bodyPosition);
+  // console.log(bodyPosition);
   o.position.copy(bodyPosition.x, bodyPosition.y + 2, bodyPosition.z);
 
   o.rotation.set(0, bodyRotation, 0);

src/components/models/Front_Left_Wheel.jsx

@@ -1,73 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { useGLTF } from "@react-three/drei";
-import gsap from "gsap";
-
-export function FrontLeftWheel({
-  currentSpeed,
-  left,
-  right,
-  ...props
-}) {
-  const { nodes, materials } = useGLTF("./models/front_wheel.glb");
-  const wheel = useRef();
-
-
-  useEffect(() => {
-    if (!wheel.current) return;
-    if(left){
-      gsap.to(wheel.current.rotation, {
-        duration: 0.5,
-        y: Math.PI + Math.PI / 8,
-        ease: "power2.inOut",
-      });
-      gsap.to(wheel.current.position, {
-        duration: 0.5,
-        z: 0.075,
-        ease: "power2.inOut",
-      });
-    } else if(right){
-      gsap.to(wheel.current.rotation, {
-        duration: 0.5,
-        y: Math.PI - Math.PI / 8,
-        ease: "power2.inOut",
-      });
-      gsap.to(wheel.current.position, {
-        duration: 0.5,
-        z: -0.075,
-        ease: "power2.inOut",
-      });
-    } else if(!left && !right){
-      gsap.to(wheel.current.rotation, {
-        duration: 0.2,
-        y: Math.PI,
-        ease: "power2.inOut",
-      });
-      gsap.to(wheel.current.position, {
-        duration: 0.2,
-        z: 0,
-        ease: "power2.inOut",
-      });
-    }
-    
-  }, [left, right]);
-  return (
-    <group {...props} dispose={null}>
-      <group ref={wheel}>
-        <mesh
-          geometry={nodes.FL_Wheel_Body_0001.geometry}
-          material={materials.Body}
-        />
-        <mesh
-          geometry={nodes.FL_Wheel_Rims_0001.geometry}
-          material={materials.Rims}
-        />
-        <mesh
-          geometry={nodes.FL_Wheel_Tires_0001.geometry}
-          material={materials.Tires}
-        />
-      </group>
-    </group>
-  );
-}
-
-useGLTF.preload("./models/front_wheel.glb");

src/components/models/Front_Right_Wheel.jsx

@@ -1,74 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { useGLTF } from "@react-three/drei";
-import gsap from "gsap";
-
-export function FrontRightWheel({
-  currentSpeed,
-  left,
-  right,
-  ...props
-}) {
-  const { nodes, materials } = useGLTF("./models/front_wheel.glb");
-  const wheel = useRef();
-
-
-  useEffect(() => {
-    if (!wheel.current) return;
-    if(left){
-      gsap.to(wheel.current.rotation, {
-        duration: 0.5,
-        y: Math.PI / 8,
-        ease: "power2.inOut",
-      });
-      gsap.to(wheel.current.position, {
-        duration: 0.5,
-        z: -0.075,
-        ease: "power2.inOut",
-      });
-
-    } else if(right){
-      gsap.to(wheel.current.rotation, {
-        duration: 0.5,
-        y: - Math.PI / 8,
-        ease: "power2.inOut",
-      });
-      gsap.to(wheel.current.position, {
-        duration: 0.5,
-        z: 0.075,
-        ease: "power2.inOut",
-      });
-    } else if(!left && !right) {
-      gsap.to(wheel.current.rotation, {
-        duration: 0.2,
-        y: 0,
-        ease: "power2.inOut",
-      });
-      gsap.to(wheel.current.position, {
-        duration: 0.2,
-        z: 0,
-        ease: "power2.inOut",
-      });
-    }
-    
-  }, [left, right]);
-  return (
-    <group {...props} dispose={null}>
-      <group ref={wheel}>
-        <mesh
-          geometry={nodes.FL_Wheel_Body_0001.geometry}
-          material={materials.Body}
-        />
-        <mesh
-          geometry={nodes.FL_Wheel_Rims_0001.geometry}
-          material={materials.Rims}
-        />
-        <mesh
-          geometry={nodes.FL_Wheel_Tires_0001.geometry}
-          material={materials.Tires}
-        />
-      </group>
-    </group>
-  );
-}
-
-useGLTF.preload("./models/front_wheel.glb");

src/components/models/Front_wheel.jsx

@@ -1,44 +0,0 @@
-/*
-Auto-generated by: https://github.com/pmndrs/gltfjsx
-Command: npx gltfjsx@6.2.16 .\front_wheel.glb 
-*/
-
-import React, { useEffect, useRef } from "react";
-import { useGLTF } from "@react-three/drei";
-import gsap from "gsap";
-
-export function FrontWheel({
-  isLeftWheel,
-  currentSpeed,
-  left,
-  right,
-  ...props
-}) {
-  const { nodes, materials } = useGLTF("./models/front_wheel.glb");
-  const wheel = useRef();
-  const rotation = isLeftWheel ? [0, Math.PI, 0] : [0, 0, 0];
-
-  useEffect(() => {
-    
-  }, [currentSpeed, left, right]);
-  return (
-    <group {...props} dispose={null}>
-      <group ref={wheel} rotation={rotation}>
-        <mesh
-          geometry={nodes.FL_Wheel_Body_0001.geometry}
-          material={materials.Body}
-        />
-        <mesh
-          geometry={nodes.FL_Wheel_Rims_0001.geometry}
-          material={materials.Rims}
-        />
-        <mesh
-          geometry={nodes.FL_Wheel_Tires_0001.geometry}
-          material={materials.Tires}
-        />
-      </group>
-    </group>
-  );
-}
-
-useGLTF.preload("./models/front_wheel.glb");

src/components/models/Racing_kart.jsx

@@ -1,111 +0,0 @@
-/*
-Auto-generated by: https://github.com/pmndrs/gltfjsx
-Command: npx gltfjsx@6.2.16 .\racing_kart.glb --transform 
-Files: .\racing_kart.glb [1.83MB] > C:\Users\mouli\dev\r3f-vite-starter\public\models\racing_kart-transformed.glb [150.05KB] (92%)
-Author: scailman (https://sketchfab.com/scailman)
-License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
-Source: https://sketchfab.com/3d-models/racing-kart-f48f8e66bba6492eadc000d2585b6a32
-Title: Racing Kart
-*/
-
-import React, { useEffect, useRef } from "react";
-import { useGLTF } from "@react-three/drei";
-import gsap from "gsap";
-
-export function Model({ steeringAngle, speed, left, right, ...props }) {
-  const { nodes, materials } = useGLTF("./models/racing_kart-transformed.glb");
-
-
-  return (
-    <group {...props} dispose={null}>
-      <group rotation={[0, Math.PI, 0]}>
-        <mesh
-          geometry={nodes.drivers_Visera_0.geometry}
-          material={materials.Visera}
-          position={[0, 1.055, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        />
-        <mesh
-          geometry={nodes.drivers_Mono1_0.geometry}
-          material={materials.Mono1}
-          position={[0, 1.055, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        />
-        <mesh
-          geometry={nodes.drivers_Casco2_0.geometry}
-          material={materials.Casco2}
-          position={[0, 1.055, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        />
-        <mesh
-          geometry={nodes.drivers_Casco_0.geometry}
-          material={materials.Casco}
-          position={[0, 1.055, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        />
-        <mesh
-          geometry={nodes.drivers_Piel_0.geometry}
-          material={materials.Piel}
-          position={[0, 1.055, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        />
-        <mesh
-          geometry={nodes.drivers_Mono2_0.geometry}
-          material={materials.Mono2}
-          position={[0, 1.055, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        />
-        <mesh
-          geometry={nodes.drivers_Mono2_0_1.geometry}
-          material={materials.Mono2_0}
-          position={[0, 1.055, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        />
-        <mesh
-          geometry={nodes.Chassis_Rims_0.geometry}
-          material={materials.Rims}
-          position={[-0.221, 0.132, 0.413]}
-        />
-        <mesh
-          geometry={nodes.Chassis_Chassis_0.geometry}
-          material={materials.Chassis}
-          position={[-0.221, 0.132, 0.413]}
-        />
-        {/* <mesh
-          geometry={nodes.FR_Wheel_Tires_0.geometry}
-          material={materials.Tires}
-          position={[-0.033, 0.157, 0.412]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        />
-        <mesh
-          geometry={nodes.FR_Wheel_Body_0.geometry}
-          material={materials.Body}
-          position={[-0.033, 0.157, 0.412]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        /> */}
-        <mesh
-          geometry={nodes.Body_Lines2_0.geometry}
-          material={materials.Lines2}
-          position={[-0.351, 0.15, -0.124]}
-          rotation={[0, -1.57, 0]}
-        />
-        <mesh
-          geometry={nodes.Engine_Engine_0.geometry}
-          material={materials.Engine}
-          position={[-0.229, 0.22, -0.465]}
-          rotation={[0, -1.57, 0]}
-          scale={[1.31, 1.31, 1.041]}
-        />
-        <mesh
-          geometry={nodes.Engine_Deposit_0.geometry}
-          material={materials.Deposit}
-          position={[-0.229, 0.22, -0.465]}
-          rotation={[0, -1.57, 0]}
-          scale={[1.31, 1.31, 1.041]}
-        />
-      </group>
-    </group>
-  );
-}
-
-useGLTF.preload("./models/racing_kart-transformed.glb");

src/components/models/Rear_wheels.jsx

@@ -1,33 +0,0 @@
-/*
-Auto-generated by: https://github.com/pmndrs/gltfjsx
-Command: npx gltfjsx@6.2.16 .\rear_wheels.glb 
-*/
-
-import React, { useRef } from 'react'
-import { useGLTF } from '@react-three/drei'
-
-export function RearWheels(props) {
-  const { nodes, materials } = useGLTF('./models/rear_wheels.glb')
-  return (
-    <group {...props} dispose={null}>
-      <group position={[0.463, 0.157, -0.622]}>
-        <group position={[-0.431, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
-          <mesh geometry={nodes.RL_Wheel_Body_0.geometry} material={materials.Body} />
-          <mesh geometry={nodes.RL_Wheel_Rims_0.geometry} material={materials.Rims} />
-          <mesh geometry={nodes.RL_Wheel_Tires_0.geometry} material={materials.Tires} />
-          <mesh geometry={nodes.RL_Wheel_Tires_0001.geometry} material={materials.Tires} />
-        </group>
-      </group>
-      <group position={[-0.463, 0.157, -0.622]}>
-        <group position={[0.431, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
-          <mesh geometry={nodes.RR_Wheel_Body_0.geometry} material={materials.Body} />
-          <mesh geometry={nodes.RR_Wheel_Rims_0.geometry} material={materials.Rims} />
-          <mesh geometry={nodes.RR_Wheel_Tires_0.geometry} material={materials.Tires} />
-          <mesh geometry={nodes.RR_Wheel_Tires_0001.geometry} material={materials.Tires} />
-        </group>
-      </group>
-    </group>
-  )
-}
-
-useGLTF.preload('./models/rear_wheels.glb')

src/components/models/Spafrancorchamps-REALISTIC.jsx

@@ -1,21 +0,0 @@
-/*
-Auto-generated by: https://github.com/pmndrs/gltfjsx
-Command: npx gltfjsx@6.2.16 .\spafrancorchamps-REALISTIC.glb 
-*/
-
-import React, { useRef } from 'react'
-import { useGLTF } from '@react-three/drei'
-import { RigidBody } from '@react-three/rapier'
-
-export function Track(props) {
-  const { nodes, materials } = useGLTF('./models/spafrancorchamps-REALISTIC.glb')
-  return (
-    <group {...props} dispose={null}>
-      <RigidBody type="fixed" name={'terrain'} colliders="trimesh" userData={'terrain'} position={[0, 1, 0]}>
-      <mesh geometry={nodes.Cube.geometry} material={nodes.Cube.material} />
-      </RigidBody>
-    </group>
-  )
-}
-
-useGLTF.preload('./models/spafrancorchamps-REALISTIC.glb')

src/components/models/characters/Mario_kart.jsx

@@ -6,11 +6,11 @@ Command: npx gltfjsx@6.2.16 .\mariokarttest.glb --shadows
 import React, { useRef } from 'react'
 import { Cylinder, OrbitControls, Sphere, useGLTF } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
-import FakeGlowMaterial from '../FakeGlow/FakeGlowMaterial'
+import FakeGlowMaterial from '../../ShaderMaterials/FakeGlow/FakeGlowMaterial'
-import FakeFlame from '../FakeFlame/FakeFlame'
+import FakeFlame from '../../ShaderMaterials/FakeFlame/FakeFlame'
 
 export function Mario({ currentSpeed, steeringAngleWheels, isBoosting, ...props }) {
-  const { nodes, materials } = useGLTF('./models/mariokarttest.glb')
+  const { nodes, materials } = useGLTF('./models/characters/mariokarttest.glb')
 
   const frontLeftWheel = useRef()
   const frontRightWheel = useRef()
@@ -123,4 +123,4 @@ export function Mario({ currentSpeed, steeringAngleWheels, isBoosting, ...props
   )
 }
 
-useGLTF.preload('./models/mariokarttest.glb')
+useGLTF.preload('./models/characters/mariokarttest.glb')

src/components/models/tracks/Tour_paris_promenade.jsx

@@ -13,7 +13,7 @@ import { useGLTF } from '@react-three/drei'
 import { RigidBody } from '@react-three/rapier'
 
 export function Paris(props) {
-  const { nodes, materials } = useGLTF('./models/tour_paris_promenade-transformed.glb')
+  const { nodes, materials } = useGLTF('./models/tracks/tour_paris_promenade-transformed.glb')
   materials.M_Cmn_ShadowCollision.opacity = 0
   materials.M_Cmn_ShadowCollision.transparent = true
   return (
@@ -35,4 +35,4 @@ export function Paris(props) {
   )
 }
 
-useGLTF.preload('./models/tour_paris_promenade-transformed.glb')
+useGLTF.preload('./models/tracks/tour_paris_promenade-transformed.glb')

src/components/store.jsx

@@ -6,6 +6,39 @@ export const useStore = create((set, get) => ({
   bodyPosition: [0, 0, 0],
   bodyRotation: [0, 0, 0],
   pastPositions: [],
+  LeftAxis: [0, 0],
+  buttons : {
+    A: false,
+    B: false,
+    X: false,
+    Y: false,
+    LB: false,
+    RB: false,
+    LT: false,
+    RT: false,
+    Back: false,
+    Start: false,
+    LeftStick: false,
+    RightStick: false,
+    Up: false,
+    Down: false,
+    Left: false,
+    Right: false,
+  },
+  setLeftAxis: (axis) => {
+    set({ LeftAxis: axis });
+  },
+  setButtons: (button, value) => {
+    set((state) => ({
+      buttons: {
+        ...state.buttons,
+        [button]: value,
+      },
+    }));
+  },
+  getButtons: () => {
+    return get().buttons;
+  },
   addPastPosition: (position) => {
     set((state) => ({
       pastPositions: [position, ...state.pastPositions.slice(0, 499)],

src/components/useGamepad.jsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+
+export const useGamepad = () => {
+  const [gamepadInfo, setGamepadInfo] = useState({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
+
+  // Function to update gamepad state
+  const updateGamepadState = () => {
+    const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];
+    const gamepad = gamepads[0]; // Assuming the first gamepad
+
+    if (gamepad) {
+      const newGamepadInfo = {
+        connected: true,
+        buttonA: gamepad.buttons[0].pressed,
+        RB: gamepad.buttons[5].pressed,
+        joystick: [gamepad.axes[0], gamepad.axes[1]]
+      };
+
+      // Update state only if there's a change
+      if (JSON.stringify(newGamepadInfo) !== JSON.stringify(gamepadInfo)) {
+        setGamepadInfo(newGamepadInfo);
+      }
+    } else {
+      if (gamepadInfo.connected) {
+        setGamepadInfo({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
+      }
+    }
+  };
+
+  useEffect(() => {
+    const gamepadConnected = () => {
+      console.log('Gamepad connected!');
+      updateGamepadState();
+    };
+
+    const gamepadDisconnected = () => {
+      console.log('Gamepad disconnected!');
+      setGamepadInfo({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
+    };
+
+    window.addEventListener('gamepadconnected', gamepadConnected);
+    window.addEventListener('gamepaddisconnected', gamepadDisconnected);
+
+    // Polling the gamepad state
+    const interval = setInterval(updateGamepadState, 100);
+
+    return () => {
+      window.removeEventListener('gamepadconnected', gamepadConnected);
+      window.removeEventListener('gamepaddisconnected', gamepadDisconnected);
+      clearInterval(interval);
+    };
+  }, [gamepadInfo]);
+
+  return gamepadInfo;
+};