feat:(game) improved particle system for drifting again

package-lock.json

@@ -12,7 +12,7 @@
         "@react-three/fiber": "^8.15.13",
         "@react-three/postprocessing": "^2.15.11",
         "@react-three/rapier": "^1.2.1",
-        "gsap": "^3.12.4",
+        "gsap": "^3.12.5",
         "leva": "^0.9.35",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -1981,9 +1981,9 @@
       }
     },
     "node_modules/gsap": {
-      "version": "3.12.4",
-      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz",
-      "integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ=="
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
     },
     "node_modules/has-property-descriptors": {
       "version": "1.0.1",

package.json

@@ -13,7 +13,7 @@
     "@react-three/fiber": "^8.15.13",
     "@react-three/postprocessing": "^2.15.11",
     "@react-three/rapier": "^1.2.1",
-    "gsap": "^3.12.4",
+    "gsap": "^3.12.5",
     "leva": "^0.9.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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>
+  );
+};