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