From 35085055bcb63263b3092339e69a8b982d0ec285 Mon Sep 17 00:00:00 2001 From: Riccardo Venturini <80196285+ctrlVnt@users.noreply.github.com> Date: Sun, 18 Feb 2024 18:52:26 +0000 Subject: [PATCH 1/3] add smoke for drift --- .../Particles/drifts/DriftParticlesRight.jsx | 2 +- .../Particles/smoke/SmokeParticle.jsx | 96 +++++++++++++++++++ .../Particles/smoke/SmokeParticles.jsx | 27 ++++++ src/components/PlayerController.jsx | 5 +- src/components/PlayerControllerGamepad.jsx | 3 +- src/components/PlayerControllerKeyboard.jsx | 6 +- src/components/PlayerControllerTouch.jsx | 3 +- 7 files changed, 137 insertions(+), 5 deletions(-) create mode 100644 src/components/Particles/smoke/SmokeParticle.jsx create mode 100644 src/components/Particles/smoke/SmokeParticles.jsx diff --git a/src/components/Particles/drifts/DriftParticlesRight.jsx b/src/components/Particles/drifts/DriftParticlesRight.jsx index 99b481a..4bad1a8 100644 --- a/src/components/Particles/drifts/DriftParticlesRight.jsx +++ b/src/components/Particles/drifts/DriftParticlesRight.jsx @@ -27,7 +27,7 @@ export const DriftParticlesRight = ({turboColor,scale, ...props}) => { - + z ) } \ No newline at end of file diff --git a/src/components/Particles/smoke/SmokeParticle.jsx b/src/components/Particles/smoke/SmokeParticle.jsx new file mode 100644 index 0000000..ee7b9d5 --- /dev/null +++ b/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 ( + + + + ); +}; diff --git a/src/components/Particles/smoke/SmokeParticles.jsx b/src/components/Particles/smoke/SmokeParticles.jsx new file mode 100644 index 0000000..3aa5157 --- /dev/null +++ b/src/components/Particles/smoke/SmokeParticles.jsx @@ -0,0 +1,27 @@ +import { SmokeParticle } from "./SmokeParticle"; + +export const SmokeParticles = ({ driftRight, driftLeft }) => { + + + return ( + + {/* bottom left */} + + + + + + ); +}; diff --git a/src/components/PlayerController.jsx b/src/components/PlayerController.jsx index 22c71e2..028197f 100644 --- a/src/components/PlayerController.jsx +++ b/src/components/PlayerController.jsx @@ -15,7 +15,7 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight"; import { PointParticle } from "./Particles/drifts/PointParticle"; -import { FlameParticles } from "./Particles/flames/FlameParticles"; +import { SmokeParticles } from "./Particles/smoke/SmokeParticles"; import { useStore } from "./store"; import { Cylinder } from "@react-three/drei"; import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial"; @@ -268,6 +268,7 @@ export const PlayerController = ({ if ( jumpIsHeld.current && currentSteeringSpeed > 0 && + upPressed && pointer.x < -0.1 && !driftRight.current ) { @@ -276,6 +277,7 @@ export const PlayerController = ({ if ( jumpIsHeld.current && currentSteeringSpeed > 0 && + upPressed && pointer.x > 0.1 && !driftLeft.current ) { @@ -564,6 +566,7 @@ export const PlayerController = ({ {/* */} + */} + 0 && + upPressed && leftPressed && !driftRight.current ) { @@ -264,6 +266,7 @@ export const PlayerControllerKeyboard = ({ if ( jumpIsHeld.current && currentSteeringSpeed > 0 && + upPressed && rightPressed > 0.1 && !driftLeft.current ) { @@ -552,6 +555,7 @@ export const PlayerControllerKeyboard = ({ {/* */} + */} + Date: Mon, 19 Feb 2024 21:20:11 +0000 Subject: [PATCH 2/3] code corrections smoke --- .../Particles/drifts/DriftParticlesRight.jsx | 2 +- .../Particles/smoke/SmokeParticle.jsx | 40 ++++++------------- .../Particles/smoke/SmokeParticles.jsx | 31 +++++++------- 3 files changed, 28 insertions(+), 45 deletions(-) diff --git a/src/components/Particles/drifts/DriftParticlesRight.jsx b/src/components/Particles/drifts/DriftParticlesRight.jsx index 4bad1a8..99b481a 100644 --- a/src/components/Particles/drifts/DriftParticlesRight.jsx +++ b/src/components/Particles/drifts/DriftParticlesRight.jsx @@ -27,7 +27,7 @@ export const DriftParticlesRight = ({turboColor,scale, ...props}) => { - z + ) } \ No newline at end of file diff --git a/src/components/Particles/smoke/SmokeParticle.jsx b/src/components/Particles/smoke/SmokeParticle.jsx index ee7b9d5..9bf1558 100644 --- a/src/components/Particles/smoke/SmokeParticle.jsx +++ b/src/components/Particles/smoke/SmokeParticle.jsx @@ -29,13 +29,19 @@ export const SmokeParticle = ({ position, png, leftDrift, rightDrift, delay = 0 const pointsCurrent = pointsRef.current; - if (leftDrift) { - //Set inclination - pointsCurrent.position.x -= 0.09 * delta * 144; + if(leftDrift || rightDrift){ pointsCurrent.position.z += 0.1 * delta * 144; - - if(pointsCurrent.position.x < -1.8) { - pointsCurrent.position.y = 0; + + //Set inclination + if(leftDrift){ + pointsCurrent.position.x -= 0.09 * delta * 144; + } + + if(rightDrift){ + pointsCurrent.position.x += 0.09 * delta * 144; + } + + if(pointsCurrent.position.x < -1.8 || pointsCurrent.position.x > 1.8) { pointsCurrent.position.z = 0; pointsCurrent.position.x = 0; pointsCurrent.material.opacity = 1.5; @@ -50,34 +56,14 @@ export const SmokeParticle = ({ position, png, leftDrift, rightDrift, delay = 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 ( diff --git a/src/components/Particles/smoke/SmokeParticles.jsx b/src/components/Particles/smoke/SmokeParticles.jsx index 3aa5157..0050690 100644 --- a/src/components/Particles/smoke/SmokeParticles.jsx +++ b/src/components/Particles/smoke/SmokeParticles.jsx @@ -5,23 +5,20 @@ export const SmokeParticles = ({ driftRight, driftLeft }) => { return ( - {/* bottom left */} - - - - + + ); }; From 7275250fe007763ee212e857d1ede07b9060aaed Mon Sep 17 00:00:00 2001 From: Riccardo Venturini <80196285+ctrlVnt@users.noreply.github.com> Date: Mon, 19 Feb 2024 21:23:10 +0000 Subject: [PATCH 3/3] update readme --- README.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index ecb9cd5..07b26aa 100644 --- a/README.md +++ b/README.md @@ -45,36 +45,36 @@ Start the dev server ## TO - DO -- Design Landing page +- [ ] Design Landing page -- Add items +- [ ] Add items -- Add texture to the flame shaders +- [ ] Add texture to the flame shaders -- Add curve/length modifiers to drift particles 3/4 +- [ ] Add curve/length modifiers to drift particles 3/4 -- Add Skid marks +- [ ] Add Skid marks -- Add smokes +- [x] Add smokes -- Add wind screen effect when boosting +- [ ] Add wind screen effect when boosting -- Improve sound design quality +- [ ] Improve sound design quality -- Design UI for HUD +- [ ] Design UI for HUD -- Make Time Trial mode +- [ ] Make Time Trial mode -- Design tracks and checkpoints +- [ ] Design tracks and checkpoints -- Improve code quality +- [ ] Improve code quality -- Items - - Tennis ball - - Bomb - - Real red shell - - Treats - - ? +- [ ] Items + - [ ] Tennis ball + - [ ] Bomb + - [ ] Real red shell + - [ ] Treats + - [ ] ? ## License