add smoke for drift
parent
5ac25a1de8
commit
35085055bc
|
@ -27,7 +27,7 @@ export const DriftParticlesRight = ({turboColor,scale, ...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} />
|
<Particles2 turboColor={turboColor} scale={scale} />
|
||||||
<Particles2 turboColor={turboColor} scale={scale} />
|
<Particles2 turboColor={turboColor} scale={scale} />z
|
||||||
</group>
|
</group>
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { SmokeParticle } from "./SmokeParticle";
|
||||||
|
|
||||||
|
export const SmokeParticles = ({ driftRight, driftLeft }) => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<group>
|
||||||
|
{/* bottom left */}
|
||||||
|
<group>
|
||||||
|
<SmokeParticle
|
||||||
|
position={[-0.6, 0.05, 0.5]}
|
||||||
|
png="./particles/fire_02.png"
|
||||||
|
leftDrift={driftLeft}
|
||||||
|
rightDrift={driftRight}
|
||||||
|
delay={200}
|
||||||
|
/>
|
||||||
|
<SmokeParticle
|
||||||
|
position={[0.6, 0.05, 0.5]}
|
||||||
|
png="./particles/fire_01.png"
|
||||||
|
leftDrift={driftLeft}
|
||||||
|
rightDrift={driftRight}
|
||||||
|
delay={200}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
};
|
|
@ -15,7 +15,7 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
|
||||||
|
|
||||||
import { PointParticle } from "./Particles/drifts/PointParticle";
|
import { PointParticle } from "./Particles/drifts/PointParticle";
|
||||||
|
|
||||||
import { FlameParticles } from "./Particles/flames/FlameParticles";
|
import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
|
||||||
import { useStore } from "./store";
|
import { useStore } from "./store";
|
||||||
import { Cylinder } from "@react-three/drei";
|
import { Cylinder } from "@react-three/drei";
|
||||||
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
||||||
|
@ -268,6 +268,7 @@ export const PlayerController = ({
|
||||||
if (
|
if (
|
||||||
jumpIsHeld.current &&
|
jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
currentSteeringSpeed > 0 &&
|
||||||
|
upPressed &&
|
||||||
pointer.x < -0.1 &&
|
pointer.x < -0.1 &&
|
||||||
!driftRight.current
|
!driftRight.current
|
||||||
) {
|
) {
|
||||||
|
@ -276,6 +277,7 @@ export const PlayerController = ({
|
||||||
if (
|
if (
|
||||||
jumpIsHeld.current &&
|
jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
currentSteeringSpeed > 0 &&
|
||||||
|
upPressed &&
|
||||||
pointer.x > 0.1 &&
|
pointer.x > 0.1 &&
|
||||||
!driftLeft.current
|
!driftLeft.current
|
||||||
) {
|
) {
|
||||||
|
@ -564,6 +566,7 @@ export const PlayerController = ({
|
||||||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
|
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||||
<PointParticle
|
<PointParticle
|
||||||
position={[-0.6, 0.05, 0.5]}
|
position={[-0.6, 0.05, 0.5]}
|
||||||
png="./particles/circle.png"
|
png="./particles/circle.png"
|
||||||
|
|
|
@ -15,7 +15,7 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
|
||||||
|
|
||||||
import { PointParticle } from "./Particles/drifts/PointParticle";
|
import { PointParticle } from "./Particles/drifts/PointParticle";
|
||||||
|
|
||||||
import { FlameParticles } from "./Particles/flames/FlameParticles";
|
import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
|
||||||
import { useStore } from "./store";
|
import { useStore } from "./store";
|
||||||
import { Cylinder } from "@react-three/drei";
|
import { Cylinder } from "@react-three/drei";
|
||||||
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
||||||
|
@ -541,6 +541,7 @@ export const PlayerControllerGamepad = ({
|
||||||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
|
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||||
<PointParticle
|
<PointParticle
|
||||||
position={[-0.6, 0.05, 0.5]}
|
position={[-0.6, 0.05, 0.5]}
|
||||||
png="./particles/circle.png"
|
png="./particles/circle.png"
|
||||||
|
|
|
@ -15,7 +15,8 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
|
||||||
|
|
||||||
import { PointParticle } from "./Particles/drifts/PointParticle";
|
import { PointParticle } from "./Particles/drifts/PointParticle";
|
||||||
|
|
||||||
import { FlameParticles } from "./Particles/flames/FlameParticles";
|
import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
|
||||||
|
import { FlameParticle } from "./Particles/flames/FlameParticle";
|
||||||
import { useStore } from "./store";
|
import { useStore } from "./store";
|
||||||
import { Cylinder } from "@react-three/drei";
|
import { Cylinder } from "@react-three/drei";
|
||||||
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
||||||
|
@ -256,6 +257,7 @@ export const PlayerControllerKeyboard = ({
|
||||||
if (
|
if (
|
||||||
jumpIsHeld.current &&
|
jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
currentSteeringSpeed > 0 &&
|
||||||
|
upPressed &&
|
||||||
leftPressed &&
|
leftPressed &&
|
||||||
!driftRight.current
|
!driftRight.current
|
||||||
) {
|
) {
|
||||||
|
@ -264,6 +266,7 @@ export const PlayerControllerKeyboard = ({
|
||||||
if (
|
if (
|
||||||
jumpIsHeld.current &&
|
jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
currentSteeringSpeed > 0 &&
|
||||||
|
upPressed &&
|
||||||
rightPressed > 0.1 &&
|
rightPressed > 0.1 &&
|
||||||
!driftLeft.current
|
!driftLeft.current
|
||||||
) {
|
) {
|
||||||
|
@ -552,6 +555,7 @@ export const PlayerControllerKeyboard = ({
|
||||||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
|
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||||
<PointParticle
|
<PointParticle
|
||||||
position={[-0.6, 0.05, 0.5]}
|
position={[-0.6, 0.05, 0.5]}
|
||||||
png="./particles/circle.png"
|
png="./particles/circle.png"
|
||||||
|
|
|
@ -15,7 +15,7 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
|
||||||
|
|
||||||
import { PointParticle } from "./Particles/drifts/PointParticle";
|
import { PointParticle } from "./Particles/drifts/PointParticle";
|
||||||
|
|
||||||
import { FlameParticles } from "./Particles/flames/FlameParticles";
|
import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
|
||||||
import { useStore } from "./store";
|
import { useStore } from "./store";
|
||||||
import { Cylinder } from "@react-three/drei";
|
import { Cylinder } from "@react-three/drei";
|
||||||
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
||||||
|
@ -493,6 +493,7 @@ export const PlayerControllerTouch = ({
|
||||||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
|
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||||
<PointParticle
|
<PointParticle
|
||||||
position={[-0.6, 0.05, 0.5]}
|
position={[-0.6, 0.05, 0.5]}
|
||||||
png="./particles/circle.png"
|
png="./particles/circle.png"
|
||||||
|
|
Loading…
Reference in New Issue