feat:(game) improved particle system for drifting again

src/components/Experience.jsx

@@ -39,7 +39,7 @@ export const Experience = () => {
         
       >
         <SMAA />
-        <N8AO distanceFalloff={1} aoRadius={1} intensity={3} />
+        {/* <N8AO distanceFalloff={1} aoRadius={1} intensity={3} /> */}
         <Bloom
           luminanceThreshold={0}
           mipmapBlur

src/components/PlayerController.jsx

@@ -20,6 +20,7 @@ import { Particles1 } from "./Particles1";
 import { DriftParticlesLeft } from "./DriftParticlesLeft";
 import { DriftParticlesRight } from "./DriftParticlesRight";
 import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
+import { PointParticle } from "./PointParticle";
 
 export const PlayerController = () => {
   const upPressed = useKeyboardControls((state) => state[Controls.up]);
@@ -357,6 +358,10 @@ export const PlayerController = () => {
 
           <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} /> */}

src/components/PointParticle.jsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Canvas, useLoader, useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+export const PointParticle = ({ position, png, turboColor }) => {
+  const texture = useLoader(THREE.TextureLoader, png);
+  const pointsRef = useRef();
+  const [size, setSize] = useState(0);
+  const [opacity, setOpacity] = useState(1);
+
+  const points = React.useMemo(() => {
+    const geom = new THREE.BufferGeometry();
+    geom.setAttribute(
+      "position",
+      new THREE.Float32BufferAttribute(position, 3)
+    );
+    return geom;
+  }, [position]);
+
+  useEffect(() => {
+
+    setSize(0);
+    setOpacity(1);
+  }, [turboColor]);
+
+  useFrame(() => {
+    if (turboColor === 0xffffff) return;
+    if (size < 5) {
+      setSize((size) => size + 0.5);
+    } else if (opacity > 0) {
+      setOpacity((opacity) => opacity - 0.05);
+    }
+  });
+
+  return (
+    <points ref={pointsRef} geometry={points}>
+      <pointsMaterial
+        size={size}
+        alphaMap={texture}
+        transparent={true}
+        depthWrite={false}
+        color={turboColor}
+        opacity={opacity}
+        toneMapped={false}
+      />
+    </points>
+  );
+};