fix(game): implemented the InstancedMesh principle on the particle system for drifting

src/App.jsx

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

src/components/DriftParticlesLeft.jsx

@@ -10,16 +10,16 @@ export const DriftParticlesLeft = ({turboColor,scale, ...props}) => {
   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/DriftParticlesRight.jsx

@@ -9,18 +9,7 @@ export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
 
   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} />
-
+    <Particles2 turboColor={turboColor} scale={scale} />
 
     </group>
   )

src/components/Particles1.jsx

@@ -1,55 +1,47 @@
-import { useRef } from "react";
+import { useRef, useMemo } 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;
+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) => {
-    let position = ref.current.position;
-    let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
+    const deltaScaled = delta * 144; // Scale for 144 FPS
+    particlesData.forEach((particle, i) => {
+      particle.velocity.y += particle.gravity * deltaScaled;
 
-    // Adjust gravity and velocity based on delta
-    velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
+      particle.position.x += particle.velocity.x * deltaScaled;
+      particle.position.y += particle.velocity.y * deltaScaled;
+      particle.position.z += particle.velocity.z * deltaScaled;
 
-    // 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 (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);
+      }
 
-    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);
-    }
+      const matrix = new THREE.Matrix4();
+      matrix.setPosition(particle.position);
+      instancedMeshRef.current.setMatrixAt(i, matrix);
+    });
 
-    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);
+    instancedMeshRef.current.instanceMatrix.needsUpdate = true;
   });
 
-
   return (
-    <mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
+    <instancedMesh ref={instancedMeshRef} args={[null, null, numParticles]}>
       <sphereGeometry args={[0.01, 16, 16]} />
       <meshStandardMaterial
         emissive={turboColor}
         toneMapped={false}
         emissiveIntensity={5}
       />
-    </mesh>
+    </instancedMesh>
   );
 };

src/components/Particles2.jsx

@@ -1,55 +1,47 @@
-import { useRef } from "react";
+import { useRef, useMemo } 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;
+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) => {
-    let position = ref.current.position;
-    let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
+    const deltaScaled = delta * 144; // Scale for 144 FPS
+    particlesData.forEach((particle, i) => {
+      particle.velocity.y += particle.gravity * deltaScaled;
 
-    // Adjust gravity and velocity based on delta
-    velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
+      particle.position.x += particle.velocity.x * deltaScaled;
+      particle.position.y += particle.velocity.y * deltaScaled;
+      particle.position.z += particle.velocity.z * deltaScaled;
 
-    // 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 (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);
+      }
 
-    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);
-    }
+      const matrix = new THREE.Matrix4();
+      matrix.setPosition(particle.position);
+      instancedMeshRef.current.setMatrixAt(i, matrix);
+    });
 
-    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);
+    instancedMeshRef.current.instanceMatrix.needsUpdate = true;
   });
 
-
   return (
-    <mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
+    <instancedMesh ref={instancedMeshRef} args={[null, null, numParticles]}>
       <sphereGeometry args={[0.01, 16, 16]} />
       <meshStandardMaterial
         emissive={turboColor}
         toneMapped={false}
         emissiveIntensity={5}
       />
-    </mesh>
+    </instancedMesh>
   );
 };

src/components/PlayerController.jsx

@@ -387,13 +387,13 @@ export const PlayerController = () => {
             />
           </mesh>
 
-          <Cylinder
+          {/* <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>
+          </Cylinder> */}
           {/* <Flame/> */}
           <FlameParticles isBoosting={isBoosting} />
           <DriftParticlesLeft turboColor={turboColor} scale={scale} />