feat:(game) added flame particles for boosting
parent
6d4032d9c7
commit
16b2bbb93a
Binary file not shown.
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
After Width: | Height: | Size: 82 KiB |
|
@ -39,7 +39,7 @@ export const Experience = () => {
|
||||||
|
|
||||||
>
|
>
|
||||||
<SMAA />
|
<SMAA />
|
||||||
{/* <N8AO distanceFalloff={1} aoRadius={1} intensity={3} /> */}
|
<N8AO distanceFalloff={1} aoRadius={1} intensity={3} />
|
||||||
<Bloom
|
<Bloom
|
||||||
luminanceThreshold={0}
|
luminanceThreshold={0}
|
||||||
mipmapBlur
|
mipmapBlur
|
||||||
|
|
|
@ -0,0 +1,56 @@
|
||||||
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
|
import { useLoader, useFrame } from "@react-three/fiber";
|
||||||
|
import * as THREE from "three";
|
||||||
|
|
||||||
|
export const FlameParticle = ({ position, png, turboColor, delay = 0 }) => {
|
||||||
|
const texture = useLoader(THREE.TextureLoader, png);
|
||||||
|
const pointsRef = useRef();
|
||||||
|
const [size, setSize] = useState(1);
|
||||||
|
const [opacity, setOpacity] = useState(1);
|
||||||
|
const [initialized, setInitialized] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setInitialized(true);
|
||||||
|
}, delay);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [delay]);
|
||||||
|
|
||||||
|
const points = React.useMemo(() => {
|
||||||
|
const geom = new THREE.BufferGeometry();
|
||||||
|
geom.setAttribute(
|
||||||
|
"position",
|
||||||
|
new THREE.Float32BufferAttribute(position, 3)
|
||||||
|
);
|
||||||
|
return geom;
|
||||||
|
}, [position]);
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
if (!initialized) return;
|
||||||
|
|
||||||
|
pointsRef.current.position.y += 0.03;
|
||||||
|
pointsRef.current.position.z += 0.06;
|
||||||
|
if(pointsRef.current.position.y > 0.4) {
|
||||||
|
pointsRef.current.position.y = 0;
|
||||||
|
pointsRef.current.position.z = 0;
|
||||||
|
setOpacity(1);
|
||||||
|
}
|
||||||
|
if(opacity > 0) {
|
||||||
|
setOpacity((opacity) => opacity - 0.05);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<points ref={pointsRef} geometry={points}>
|
||||||
|
<pointsMaterial
|
||||||
|
size={size}
|
||||||
|
alphaMap={texture}
|
||||||
|
transparent={true}
|
||||||
|
depthWrite={false}
|
||||||
|
color={turboColor}
|
||||||
|
opacity={opacity}
|
||||||
|
toneMapped={false}
|
||||||
|
/>
|
||||||
|
</points>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,168 @@
|
||||||
|
import { FlameParticle } from "./FlameParticle";
|
||||||
|
|
||||||
|
export const FlameParticles = ({ isBoosting }) => {
|
||||||
|
|
||||||
|
if (!isBoosting) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<group>
|
||||||
|
{/* bottom left */}
|
||||||
|
<group position={[-0.26, 0.45, 1]}>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={0}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={100}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={200}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={300}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={400}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={500}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
|
||||||
|
{/* bottom right */}
|
||||||
|
<group position={[0.26, 0.45, 1]}>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={0}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={100}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={200}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={300}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={400}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={500}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
{/* top left */}
|
||||||
|
<group position={[-0.18, 0.6, 0.8]}>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={0}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={100}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={200}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={300}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={400}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={500}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
<group position={[0.18, 0.6, 0.8]}>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={0}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={100}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={200}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={300}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_02.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={400}
|
||||||
|
/>
|
||||||
|
<FlameParticle
|
||||||
|
position={[0, 0, 0]}
|
||||||
|
png="./fire_01.png"
|
||||||
|
turboColor={0xfea347}
|
||||||
|
delay={500}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
};
|
|
@ -21,6 +21,8 @@ import { DriftParticlesLeft } from "./DriftParticlesLeft";
|
||||||
import { DriftParticlesRight } from "./DriftParticlesRight";
|
import { DriftParticlesRight } from "./DriftParticlesRight";
|
||||||
import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
|
import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
|
||||||
import { PointParticle } from "./PointParticle";
|
import { PointParticle } from "./PointParticle";
|
||||||
|
import { FlameParticle } from "./FlameParticle";
|
||||||
|
import { FlameParticles } from "./FlameParticles";
|
||||||
|
|
||||||
export const PlayerController = () => {
|
export const PlayerController = () => {
|
||||||
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
||||||
|
@ -41,7 +43,7 @@ export const PlayerController = () => {
|
||||||
const MaxSteeringSpeed = 0.01;
|
const MaxSteeringSpeed = 0.01;
|
||||||
const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0);
|
const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0);
|
||||||
const [currentSpeed, setCurrentSpeed] = useState(initialSpeed);
|
const [currentSpeed, setCurrentSpeed] = useState(initialSpeed);
|
||||||
const camMaxOffset = 0.5;
|
const camMaxOffset = 1;
|
||||||
let steeringAngle = 0;
|
let steeringAngle = 0;
|
||||||
const isOnFloor = useRef(false);
|
const isOnFloor = useRef(false);
|
||||||
const jumpForce = useRef(0);
|
const jumpForce = useRef(0);
|
||||||
|
@ -57,7 +59,7 @@ export const PlayerController = () => {
|
||||||
const purpleTurboThreshold = 60;
|
const purpleTurboThreshold = 60;
|
||||||
const [turboColor, setTurboColor] = useState(0xffffff);
|
const [turboColor, setTurboColor] = useState(0xffffff);
|
||||||
const boostDuration = useRef(0);
|
const boostDuration = useRef(0);
|
||||||
const isBoosting = useRef(false);
|
const [isBoosting, setIsBoosting] = useState(false);
|
||||||
let targetXPosition = 0;
|
let targetXPosition = 0;
|
||||||
let targetZPosition = 8;
|
let targetZPosition = 8;
|
||||||
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
||||||
|
@ -261,8 +263,10 @@ export const PlayerController = () => {
|
||||||
setCurrentSpeed(boostSpeed);
|
setCurrentSpeed(boostSpeed);
|
||||||
boostDuration.current -= 1;
|
boostDuration.current -= 1;
|
||||||
targetZPosition = 10;
|
targetZPosition = 10;
|
||||||
|
setIsBoosting(true);
|
||||||
} else if (boostDuration.current <= 1) {
|
} else if (boostDuration.current <= 1) {
|
||||||
targetZPosition = 8;
|
targetZPosition = 8;
|
||||||
|
setIsBoosting(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
// CAMERA WORK
|
// CAMERA WORK
|
||||||
|
@ -355,7 +359,8 @@ export const PlayerController = () => {
|
||||||
opacity={0.4}
|
opacity={0.4}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
|
{/* <Flame/> */}
|
||||||
|
<FlameParticles isBoosting={isBoosting}/>
|
||||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
<PointParticle position={[-0.6, 0.05, 0.5]} png="./circle.png" turboColor={turboColor}/>
|
<PointParticle position={[-0.6, 0.05, 0.5]} png="./circle.png" turboColor={turboColor}/>
|
||||||
|
|
Loading…
Reference in New Issue