add smoke for drift

src/components/Particles/smoke/SmokeParticle.jsx

@@ -0,0 +1,96 @@
+import React, { useRef, useMemo } from "react";
+import { useLoader, useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+export const SmokeParticle = ({ position, png, leftDrift, rightDrift, 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 (leftDrift) {
+      //Set inclination
+      pointsCurrent.position.x -= 0.09 * delta * 144;
+      pointsCurrent.position.z += 0.1 * delta * 144;
+      
+      if(pointsCurrent.position.x < -1.8) {
+        pointsCurrent.position.y = 0;
+        pointsCurrent.position.z = 0;
+        pointsCurrent.position.x = 0;
+        pointsCurrent.material.opacity = 1.5;
+        pointsCurrent.material.size = 4;
+      }
+    
+      if(pointsCurrent.material.opacity > 0) {
+        pointsCurrent.material.opacity -= 0.01 * delta * 144;
+      }
+
+      if(pointsCurrent.material.size > 0) {
+        //Shrinking effect
+        pointsCurrent.material.size -= 0.1* delta * 144;
+      }
+    } else if (rightDrift) {
+      //Set inclination
+      pointsCurrent.position.x += 0.09 * delta * 144;
+      pointsCurrent.position.z += 0.1 * delta * 144;
+
+      if(pointsCurrent.position.x > 1.8) {
+        pointsCurrent.position.y = 0;
+        pointsCurrent.position.z = 0;
+        pointsCurrent.position.x = 0;
+        pointsCurrent.material.opacity = 1.5;
+        pointsCurrent.material.size = 4;
+      }
+    
+      if(pointsCurrent.material.opacity > 0) {
+        pointsCurrent.material.opacity -= 0.01 * delta * 144;
+      }
+
+      if(pointsCurrent.material.size > 0) {
+        //Shrinking effect
+        pointsCurrent.material.size -= 0.1* delta * 144;
+      }
+    } else {
+      pointsCurrent.position.y = 0;
+      pointsCurrent.position.z = 0;
+      pointsCurrent.position.x = 0;
+      pointsCurrent.material.opacity = 0;
+      pointsCurrent.material.size = 0;
+    }
+  });
+
+  return (
+    <points ref={pointsRef} geometry={points}>
+      <pointsMaterial
+        size={1}
+        alphaMap={texture}
+        transparent={true}
+        depthWrite={false}
+        color={0xBFBFBF}
+        opacity={1}
+        toneMapped={false}
+      />
+    </points>
+  );
+};