From e1c11b3d749d71b7422a94206bd51e2a3a9fd00b Mon Sep 17 00:00:00 2001
From: Alex <leslayer92@gmail.com>
Date: Tue, 23 Jan 2024 10:44:10 +0100
Subject: [PATCH] feat:(game) improved particle system for drifting

---
 src/components/DriftParticlesLeft.jsx  |  4 +--
 src/components/DriftParticlesRight.jsx |  7 +++--
 src/components/Particles1.jsx          | 25 ++++++++++-------
 src/components/Particles2.jsx          | 25 ++++++++++-------
 src/components/Particles3.jsx          | 35 +++++++++++++++---------
 src/components/Particles4.jsx          | 37 ++++++++++++++++----------
 src/components/PlayerController.jsx    | 16 ++++++-----
 7 files changed, 89 insertions(+), 60 deletions(-)

diff --git a/src/components/DriftParticlesLeft.jsx b/src/components/DriftParticlesLeft.jsx
index b6de039..710d778 100644
--- a/src/components/DriftParticlesLeft.jsx
+++ b/src/components/DriftParticlesLeft.jsx
@@ -3,7 +3,7 @@ import { Particles3 } from "./Particles3";
 
 export const DriftParticlesLeft = ({turboColor,scale, ...props}) => {
 
-  if(scale < 0.5) {
+  if(scale < 0.8) {
     return null;
   }
 
@@ -20,8 +20,6 @@ export const DriftParticlesLeft = ({turboColor,scale, ...props}) => {
       <Particles1 turboColor={turboColor} scale={scale} />
 
       <Particles3 turboColor={turboColor} scale={scale} />
-      <Particles3 turboColor={turboColor} scale={scale} />
-      <Particles3 turboColor={turboColor} scale={scale} />
 
     </group>
   )
diff --git a/src/components/DriftParticlesRight.jsx b/src/components/DriftParticlesRight.jsx
index 4ef8a28..2d275db 100644
--- a/src/components/DriftParticlesRight.jsx
+++ b/src/components/DriftParticlesRight.jsx
@@ -3,13 +3,13 @@ import { Particles4 } from "./Particles4";
 
 export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
 
-  if(scale < 0.5) {
+  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} />
@@ -20,8 +20,7 @@ export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
       <Particles2 turboColor={turboColor} scale={scale} />
 
       <Particles4 turboColor={turboColor} scale={scale} />
-      <Particles4 turboColor={turboColor} scale={scale} />
-      <Particles4 turboColor={turboColor} scale={scale} />
+
 
     </group>
   )
diff --git a/src/components/Particles1.jsx b/src/components/Particles1.jsx
index 33ebc3e..6e8601a 100644
--- a/src/components/Particles1.jsx
+++ b/src/components/Particles1.jsx
@@ -1,20 +1,19 @@
 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 frame = useRef(0);
-
   const velocity = useRef({
-    x: -Math.random() * 0.1,
+    x: -Math.random() * 0.05,
     y: Math.random() * 0.05,
-    z: Math.random() * 0.05,
+    z: Math.random() * 0.02,
   });
   const gravity = -0.003;
 
   useFrame(() => {
-    frame.current += 1;
     let position = ref.current.position;
+    let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
 
     velocity.current.y += gravity;
 
@@ -22,12 +21,18 @@ export const Particles1 = ({ turboColor, scale, ...props }) => {
     position.y += velocity.current.y;
     position.z += velocity.current.z;
 
-    if (position.y < 0) {
+    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.1,
+        x: -Math.random() * 0.05,
         y: Math.random() * 0.05,
-        z: Math.random() * 0.05,
+        z: Math.random() * 0.02,
       };
     }
 
@@ -35,8 +40,8 @@ export const Particles1 = ({ turboColor, scale, ...props }) => {
   });
 
   return (
-    <mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={scale}>
-      <boxGeometry args={[0.05, 0.1, 0.05]} />
+    <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}
diff --git a/src/components/Particles2.jsx b/src/components/Particles2.jsx
index 69d86a8..f961cfa 100644
--- a/src/components/Particles2.jsx
+++ b/src/components/Particles2.jsx
@@ -1,20 +1,19 @@
 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 frame = useRef(0);
-
   const velocity = useRef({
-    x: Math.random() * 0.1,
+    x: Math.random() * 0.05,
     y: Math.random() * 0.05,
-    z: Math.random() * 0.05,
+    z: Math.random() * 0.02,
   });
   const gravity = -0.003;
 
   useFrame(() => {
-    frame.current += 1;
     let position = ref.current.position;
+    let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
 
     velocity.current.y += gravity;
 
@@ -22,12 +21,18 @@ export const Particles2 = ({ turboColor, scale, ...props }) => {
     position.y += velocity.current.y;
     position.z += velocity.current.z;
 
-    if (position.y < 0) {
+    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.1,
+        x: Math.random() * 0.05,
         y: Math.random() * 0.05,
-        z: Math.random() * 0.05,
+        z: Math.random() * 0.02,
       };
     }
 
@@ -35,8 +40,8 @@ export const Particles2 = ({ turboColor, scale, ...props }) => {
   });
 
   return (
-    <mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={scale}>
-      <boxGeometry args={[0.05, 0.1, 0.05]} />
+    <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}
diff --git a/src/components/Particles3.jsx b/src/components/Particles3.jsx
index 038b569..94dd839 100644
--- a/src/components/Particles3.jsx
+++ b/src/components/Particles3.jsx
@@ -1,21 +1,20 @@
 import { useRef } from "react";
 import { useFrame } from "@react-three/fiber";
-import { Trail } from "@react-three/drei";
+import * as THREE from 'three';
 
 export const Particles3 = ({ turboColor, scale, ...props }) => {
   const ref = useRef();
-  const frame = useRef(0);
-
   const velocity = useRef({
-    x: -Math.random() * 0.1,
+    x: -Math.random() * 0.05,
     y: Math.random() * 0.1,
-    z: Math.random() * 0.05,
+    z: Math.random() * 0.02,
   });
-  const gravity = -0.003;
+  const gravity = -0.001;
 
+  const frames = useRef(0);
   useFrame(() => {
-    frame.current += 1;
     let position = ref.current.position;
+    let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
 
     velocity.current.y += gravity;
 
@@ -23,25 +22,35 @@ export const Particles3 = ({ turboColor, scale, ...props }) => {
     position.y += velocity.current.y;
     position.z += velocity.current.z;
 
-    if (position.y < 0) {
+    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 (frames.current > Math.floor(Math.random() * (150 - 50)) + 50 ) {
       position.set(-0.6, 0.05, 0.5);
       velocity.current = {
-        x: -Math.random() * 0.1,
+        x: -Math.random() * 0.05,
         y: Math.random() * 0.1,
-        z: Math.random() * 0.05,
+        z: Math.random() * 0.02,
       };
+      frames.current = 0;
     }
 
     ref.current.position.set(position.x, position.y, position.z);
+
+    frames.current++;
+    console.log(frames.current)
   });
 
   return (
-    <mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={scale}>
-      <boxGeometry args={[0.1, 0.2, 0.1]} />
+    <mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 20, scale]}>
+      <sphereGeometry args={[0.01, 16, 16]} />
       <meshStandardMaterial
         emissive={turboColor}
         toneMapped={false}
-        emissiveIntensity={50}
+        emissiveIntensity={10}
       />
     </mesh>
   );
diff --git a/src/components/Particles4.jsx b/src/components/Particles4.jsx
index 0dbe041..6d9a424 100644
--- a/src/components/Particles4.jsx
+++ b/src/components/Particles4.jsx
@@ -1,21 +1,20 @@
 import { useRef } from "react";
 import { useFrame } from "@react-three/fiber";
-import { Trail } from "@react-three/drei";
+import * as THREE from 'three';
 
 export const Particles4 = ({ turboColor, scale, ...props }) => {
   const ref = useRef();
-  const frame = useRef(0);
-
   const velocity = useRef({
-    x: Math.random() * 0.1,
-    y: Math.random() * 0.2,
-    z: Math.random() * 0.05,
+    x: Math.random() * 0.05,
+    y: Math.random() * 0.1,
+    z: Math.random() * 0.02,
   });
-  const gravity = -0.003;
+  const gravity = -0.001;
 
+  const frames = useRef(0);
   useFrame(() => {
-    frame.current += 1;
     let position = ref.current.position;
+    let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
 
     velocity.current.y += gravity;
 
@@ -23,25 +22,35 @@ export const Particles4 = ({ turboColor, scale, ...props }) => {
     position.y += velocity.current.y;
     position.z += velocity.current.z;
 
-    if (position.y < 0) {
+    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 (frames.current > Math.floor(Math.random() * (150 - 100)) + 100 ) {
       position.set(0.6, 0.05, 0.5);
       velocity.current = {
-        x: Math.random() * 0.1,
+        x: Math.random() * 0.05,
         y: Math.random() * 0.1,
-        z: Math.random() * 0.05,
+        z: Math.random() * 0.02,
       };
+      frames.current = 0;
     }
 
     ref.current.position.set(position.x, position.y, position.z);
+
+    frames.current++;
+    console.log(frames.current)
   });
 
   return (
-    <mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={scale}>
-      <boxGeometry args={[0.1, 0.1, 0.1]} />
+    <mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 20, scale]}>
+      <sphereGeometry args={[0.01, 16, 16]} />
       <meshStandardMaterial
         emissive={turboColor}
         toneMapped={false}
-        emissiveIntensity={50}
+        emissiveIntensity={10}
       />
     </mesh>
   );
diff --git a/src/components/PlayerController.jsx b/src/components/PlayerController.jsx
index 9e05962..151233a 100644
--- a/src/components/PlayerController.jsx
+++ b/src/components/PlayerController.jsx
@@ -75,7 +75,6 @@ export const PlayerController = () => {
       0,
       -Math.cos(kartRotation)
     );
-    console.log(forwardDirection);
 
     if (leftPressed && currentSpeed > 0) {
       steeringAngle = currentSteeringSpeed;
@@ -248,7 +247,12 @@ export const PlayerController = () => {
       const oscillation = Math.sin(time * 1000) * 0.1;
 
       const vibration = oscillation + 0.9;
-      setScale(vibration);
+      
+      if (turboColor === 0xffffff) {
+        setScale(vibration * 0.8);
+      } else {
+        setScale(vibration);
+      }
     }
     // RELEASING DRIFT
 
@@ -329,9 +333,9 @@ export const PlayerController = () => {
             <meshStandardMaterial
               emissive={turboColor}
               toneMapped={false}
-              emissiveIntensity={50}
+              emissiveIntensity={100}
               transparent
-              opacity={1}
+              opacity={0.4}
             />
           </mesh>
           <pointLight
@@ -345,9 +349,9 @@ export const PlayerController = () => {
             <meshStandardMaterial
               emissive={turboColor}
               toneMapped={false}
-              emissiveIntensity={50}
+              emissiveIntensity={100}
               transparent
-              opacity={1}
+              opacity={0.4}
             />
           </mesh>