commit
0422ac68c9
36
README.md
36
README.md
|
@ -45,36 +45,36 @@ Start the dev server
|
||||||
|
|
||||||
## TO - DO
|
## 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
|
- [ ] Items
|
||||||
- Tennis ball
|
- [ ] Tennis ball
|
||||||
- Bomb
|
- [ ] Bomb
|
||||||
- Real red shell
|
- [ ] Real red shell
|
||||||
- Treats
|
- [ ] Treats
|
||||||
- ?
|
- [ ] ?
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,82 @@
|
||||||
|
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 || rightDrift){
|
||||||
|
pointsCurrent.position.z += 0.1 * delta * 144;
|
||||||
|
|
||||||
|
//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;
|
||||||
|
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.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,24 @@
|
||||||
|
import { SmokeParticle } from "./SmokeParticle";
|
||||||
|
|
||||||
|
export const SmokeParticles = ({ driftRight, driftLeft }) => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
|
@ -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";
|
||||||
|
@ -273,6 +273,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
|
||||||
) {
|
) {
|
||||||
|
@ -281,6 +282,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
|
||||||
) {
|
) {
|
||||||
|
@ -569,6 +571,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";
|
||||||
|
@ -545,6 +545,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";
|
||||||
|
@ -261,6 +262,7 @@ export const PlayerControllerKeyboard = ({
|
||||||
if (
|
if (
|
||||||
jumpIsHeld.current &&
|
jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
currentSteeringSpeed > 0 &&
|
||||||
|
upPressed &&
|
||||||
leftPressed &&
|
leftPressed &&
|
||||||
!driftRight.current
|
!driftRight.current
|
||||||
) {
|
) {
|
||||||
|
@ -269,6 +271,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
|
||||||
) {
|
) {
|
||||||
|
@ -557,6 +560,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";
|
||||||
|
@ -497,6 +497,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