cdnutter
/
Mario-Kart-3.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:(game) GAME IS FIXED, CAN CONTINUE DEV SAFELY

skidmarks
Alex 2024-01-24 15:51:51 +01:00
parent 83d7e6c16b
commit be364fca25
4 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/FakeFlame/FakeFlame.jsx
View File

@ -7,7 +7,7 @@ import { shaderMaterial } from '@react-three/drei'
import { extend, useFrame } from '@react-three/fiber'
import { Color, DoubleSide, AdditiveBlending } from 'three'
export default function FakeFlame({ falloff = 3, glowInternalRadius = 1.0, glowColor = 'orange', glowSharpness = 1.0 }) {
export default function FakeFlame({ falloff = 10, glowInternalRadius = 1.0, glowColor = 'orange', glowSharpness = 1.0 , isBoosting,}) {
const FakeFlame = useMemo(() => {
return shaderMaterial(
{
@ -15,7 +15,8 @@ export default function FakeFlame({ falloff = 3, glowInternalRadius = 1.0, glowC
glowInternalRadius: glowInternalRadius,
glowColor: new Color(glowColor),
glowSharpness: glowSharpness,
time: 0
time: 0,
isBoosting: isBoosting,
},
/*GLSL */
`
@ -38,11 +39,11 @@ export default function FakeFlame({ falloff = 3, glowInternalRadius = 1.0, glowC
float glitchStrength = sin(glitchTime) + sin(glitchTime * .05) + sin(glitchTime * .36);
glitchStrength /= 2.0;
glitchStrength = smoothstep(0.2, 0.8, glitchStrength);
glitchStrength *= 0.25;
glitchStrength *= 0.;
modelPosition.x += (random2D(modelNormal.xx + time) - 0.5) * glitchStrength;
modelPosition.x += (random2D(modelNormal.xx - time) - 0.2) * glitchStrength;
modelPosition.y += sin(smoothstep(0.3, vUv.y - 1.8, position.y) * 2.) * sin(time * 2.);
modelPosition.z += sin(smoothstep(0., vUv.x - 0.8, position.z) * 2.) * sin(time * 2.) * .6;
modelPosition.y += sin(smoothstep(0.3, vUv.y - 1.8, position.y) * 2.) * sin(time * 24.);
modelPosition.z += sin(smoothstep(0., vUv.x - 0.8, position.z) * 2.) * sin(time * 24.) * .6;
gl_Position = projectionMatrix * viewMatrix * modelPosition;
@ -55,6 +56,7 @@ export default function FakeFlame({ falloff = 3, glowInternalRadius = 1.0, glowC
uniform float glowSharpness;
uniform float glowInternalRadius;
uniform float time;
uniform bool isBoosting;
varying vec2 vUv;
@ -123,13 +125,18 @@ export default function FakeFlame({ falloff = 3, glowInternalRadius = 1.0, glowC
col = 0.85*col.yxz;
#endif
gl_FragColor = vec4( col, 1.0);
if (isBoosting) {
gl_FragColor = vec4(col, 1.0);
} else {
gl_FragColor = vec4(col, 0.0);
}
#include <tonemapping_fragment>
#include <colorspace_fragment>
}`
)
}, [falloff, glowInternalRadius, glowColor, glowSharpness])
}, [falloff, glowInternalRadius, glowColor, glowSharpness, isBoosting])
extend({ FakeFlame })

7
src/components/PlayerController.jsx
View File

@ -259,9 +259,9 @@ export const PlayerController = () => {
onCollisionEnter={(event) => {
isOnFloor.current = true
}}
onCollisionExit={(event) => {
isOnFloor.current = false
}}
// onCollisionExit={(event) => {
// isOnFloor.current = false
// }}
/>
@ -275,6 +275,7 @@ export const PlayerController = () => {
<Mario
currentSpeed={currentSpeed}
steeringAngleWheels={steeringAngleWheels}
isBoosting={isBoosting}
/>
<pointLight
position={[0.6, 0.05, 0.5]}

40
src/components/models/Mario_kart.jsx
View File

@ -9,20 +9,26 @@ import { useFrame } from '@react-three/fiber'
import FakeGlowMaterial from '../FakeGlow/FakeGlowMaterial'
import FakeFlame from '../FakeFlame/FakeFlame'
export function Mario({ currentSpeed, steeringAngleWheels, ...props }) {
export function Mario({ currentSpeed, steeringAngleWheels, isBoosting, ...props }) {
const { nodes, materials } = useGLTF('./models/mariokarttest.glb')
const frontLeftWheel = useRef()
const frontRightWheel = useRef()
const rearWheels = useRef()
const frontWheels = useRef()
const [scale, setScale] = React.useState(0)
useFrame(() => {
useFrame((_,delta) => {
const rotation = currentSpeed / 100
frontLeftWheel.current.rotation.x += rotation
frontRightWheel.current.rotation.x += rotation
rearWheels.current.rotation.x += rotation
frontWheels.current.rotation.y = steeringAngleWheels
if (isBoosting){
setScale(Math.min(scale + 0.1 * 144 * delta, 1))
} else {
setScale(Math.max(scale - 0.1 * 144 * delta, 0))
}
})
return (
<group
@ -72,26 +78,46 @@ export function Mario({ currentSpeed, steeringAngleWheels, ...props }) {
/>
<Sphere
position={[0, 0.6, -1.2]}
scale={1.2}
scale={scale * 1.2}
>
<FakeGlowMaterial />
</Sphere>
<Cylinder
args={[0.1, 0.5, 1, 128, 64, true]}
args={[0.1, 0, 1, 128, 64, true]}
position={[0.3, 0.6, -1.2]}
rotation={[Math.PI / 1.5, 0, 0]}
scale={scale}
>
<FakeFlame />
<FakeFlame isBoosting={isBoosting}/>
</Cylinder>
<Cylinder
args={[0.1, 0.5, 1, 128, 64, true]}
args={[0.1, 0, 1, 128, 64, true]}
position={[-0.3, 0.6, -1.2]}
rotation={[Math.PI / 1.5, 0, 0]}
scale={scale}
>
<FakeFlame />
<FakeFlame isBoosting={isBoosting} />
</Cylinder>
<Cylinder
args={[0.09, 0, 1, 128, 64, true]}
position={[0.18, 0.7, -0.8]}
rotation={[Math.PI / 1.5, 0, 0]}
scale={scale}
>
<FakeFlame isBoosting={isBoosting} />
</Cylinder>
<Cylinder
args={[0.09, 0, 1, 128, 64, true]}
position={[-0.18, 0.7, -0.8]}
rotation={[Math.PI / 1.5, 0, 0]}
scale={scale}
>
<FakeFlame isBoosting={isBoosting}/>
</Cylinder>
</group>
)
}

13
src/index.css
View File

@ -11,12 +11,13 @@ body {
overflow-x: none;
}
/*
body::-webkit-scrollbar {
display: none;
}
.wheel{
display: none;
position:absolute;
top:0;
@ -28,6 +29,14 @@ img{
}
.overlay{
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
pointer-events: none;
}
.logo{
position:absolute;
@ -50,4 +59,4 @@ img{
50% {
transform: scale(1.2);
}
} */
}