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} />z
|
||||
</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 { 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 = ({
|
|||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||
<PointParticle
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
png="./particles/circle.png"
|
||||
|
|
|
@ -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";
|
||||
|
@ -541,6 +541,7 @@ export const PlayerControllerGamepad = ({
|
|||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||
<PointParticle
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
png="./particles/circle.png"
|
||||
|
|
|
@ -15,7 +15,8 @@ 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 { FlameParticle } from "./Particles/flames/FlameParticle";
|
||||
import { useStore } from "./store";
|
||||
import { Cylinder } from "@react-three/drei";
|
||||
import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
||||
|
@ -256,6 +257,7 @@ export const PlayerControllerKeyboard = ({
|
|||
if (
|
||||
jumpIsHeld.current &&
|
||||
currentSteeringSpeed > 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 = ({
|
|||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||
<PointParticle
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
png="./particles/circle.png"
|
||||
|
|
|
@ -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";
|
||||
|
@ -493,6 +493,7 @@ export const PlayerControllerTouch = ({
|
|||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
<SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
|
||||
<PointParticle
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
png="./particles/circle.png"
|
||||
|
|
Loading…
Reference in New Issue