fix:(game) GAME IS FIXED, CAN CONTINUE DEV SAFELY
parent
83d7e6c16b
commit
be364fca25
|
@ -7,7 +7,7 @@ import { shaderMaterial } from '@react-three/drei'
|
||||||
import { extend, useFrame } from '@react-three/fiber'
|
import { extend, useFrame } from '@react-three/fiber'
|
||||||
import { Color, DoubleSide, AdditiveBlending } from 'three'
|
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(() => {
|
const FakeFlame = useMemo(() => {
|
||||||
return shaderMaterial(
|
return shaderMaterial(
|
||||||
{
|
{
|
||||||
|
@ -15,7 +15,8 @@ export default function FakeFlame({ falloff = 3, glowInternalRadius = 1.0, glowC
|
||||||
glowInternalRadius: glowInternalRadius,
|
glowInternalRadius: glowInternalRadius,
|
||||||
glowColor: new Color(glowColor),
|
glowColor: new Color(glowColor),
|
||||||
glowSharpness: glowSharpness,
|
glowSharpness: glowSharpness,
|
||||||
time: 0
|
time: 0,
|
||||||
|
isBoosting: isBoosting,
|
||||||
},
|
},
|
||||||
/*GLSL */
|
/*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);
|
float glitchStrength = sin(glitchTime) + sin(glitchTime * .05) + sin(glitchTime * .36);
|
||||||
glitchStrength /= 2.0;
|
glitchStrength /= 2.0;
|
||||||
glitchStrength = smoothstep(0.2, 0.8, glitchStrength);
|
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.5) * glitchStrength;
|
||||||
modelPosition.x += (random2D(modelNormal.xx - time) - 0.2) * 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.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 * 2.) * .6;
|
modelPosition.z += sin(smoothstep(0., vUv.x - 0.8, position.z) * 2.) * sin(time * 24.) * .6;
|
||||||
|
|
||||||
gl_Position = projectionMatrix * viewMatrix * modelPosition;
|
gl_Position = projectionMatrix * viewMatrix * modelPosition;
|
||||||
|
|
||||||
|
@ -55,6 +56,7 @@ export default function FakeFlame({ falloff = 3, glowInternalRadius = 1.0, glowC
|
||||||
uniform float glowSharpness;
|
uniform float glowSharpness;
|
||||||
uniform float glowInternalRadius;
|
uniform float glowInternalRadius;
|
||||||
uniform float time;
|
uniform float time;
|
||||||
|
uniform bool isBoosting;
|
||||||
|
|
||||||
varying vec2 vUv;
|
varying vec2 vUv;
|
||||||
|
|
||||||
|
@ -123,13 +125,18 @@ export default function FakeFlame({ falloff = 3, glowInternalRadius = 1.0, glowC
|
||||||
col = 0.85*col.yxz;
|
col = 0.85*col.yxz;
|
||||||
#endif
|
#endif
|
||||||
|
|
||||||
|
|
||||||
|
if (isBoosting) {
|
||||||
gl_FragColor = vec4(col, 1.0);
|
gl_FragColor = vec4(col, 1.0);
|
||||||
|
} else {
|
||||||
|
gl_FragColor = vec4(col, 0.0);
|
||||||
|
}
|
||||||
|
|
||||||
#include <tonemapping_fragment>
|
#include <tonemapping_fragment>
|
||||||
#include <colorspace_fragment>
|
#include <colorspace_fragment>
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
}, [falloff, glowInternalRadius, glowColor, glowSharpness])
|
}, [falloff, glowInternalRadius, glowColor, glowSharpness, isBoosting])
|
||||||
|
|
||||||
extend({ FakeFlame })
|
extend({ FakeFlame })
|
||||||
|
|
||||||
|
|
|
@ -259,9 +259,9 @@ export const PlayerController = () => {
|
||||||
onCollisionEnter={(event) => {
|
onCollisionEnter={(event) => {
|
||||||
isOnFloor.current = true
|
isOnFloor.current = true
|
||||||
}}
|
}}
|
||||||
onCollisionExit={(event) => {
|
// onCollisionExit={(event) => {
|
||||||
isOnFloor.current = false
|
// isOnFloor.current = false
|
||||||
}}
|
// }}
|
||||||
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
@ -275,6 +275,7 @@ export const PlayerController = () => {
|
||||||
<Mario
|
<Mario
|
||||||
currentSpeed={currentSpeed}
|
currentSpeed={currentSpeed}
|
||||||
steeringAngleWheels={steeringAngleWheels}
|
steeringAngleWheels={steeringAngleWheels}
|
||||||
|
isBoosting={isBoosting}
|
||||||
/>
|
/>
|
||||||
<pointLight
|
<pointLight
|
||||||
position={[0.6, 0.05, 0.5]}
|
position={[0.6, 0.05, 0.5]}
|
||||||
|
|
|
@ -9,20 +9,26 @@ import { useFrame } from '@react-three/fiber'
|
||||||
import FakeGlowMaterial from '../FakeGlow/FakeGlowMaterial'
|
import FakeGlowMaterial from '../FakeGlow/FakeGlowMaterial'
|
||||||
import FakeFlame from '../FakeFlame/FakeFlame'
|
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 { nodes, materials } = useGLTF('./models/mariokarttest.glb')
|
||||||
|
|
||||||
const frontLeftWheel = useRef()
|
const frontLeftWheel = useRef()
|
||||||
const frontRightWheel = useRef()
|
const frontRightWheel = useRef()
|
||||||
const rearWheels = useRef()
|
const rearWheels = useRef()
|
||||||
const frontWheels = useRef()
|
const frontWheels = useRef()
|
||||||
|
const [scale, setScale] = React.useState(0)
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame((_,delta) => {
|
||||||
const rotation = currentSpeed / 100
|
const rotation = currentSpeed / 100
|
||||||
frontLeftWheel.current.rotation.x += rotation
|
frontLeftWheel.current.rotation.x += rotation
|
||||||
frontRightWheel.current.rotation.x += rotation
|
frontRightWheel.current.rotation.x += rotation
|
||||||
rearWheels.current.rotation.x += rotation
|
rearWheels.current.rotation.x += rotation
|
||||||
frontWheels.current.rotation.y = steeringAngleWheels
|
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 (
|
return (
|
||||||
<group
|
<group
|
||||||
|
@ -72,26 +78,46 @@ export function Mario({ currentSpeed, steeringAngleWheels, ...props }) {
|
||||||
/>
|
/>
|
||||||
<Sphere
|
<Sphere
|
||||||
position={[0, 0.6, -1.2]}
|
position={[0, 0.6, -1.2]}
|
||||||
scale={1.2}
|
scale={scale * 1.2}
|
||||||
>
|
>
|
||||||
<FakeGlowMaterial />
|
<FakeGlowMaterial />
|
||||||
</Sphere>
|
</Sphere>
|
||||||
|
|
||||||
<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]}
|
position={[0.3, 0.6, -1.2]}
|
||||||
rotation={[Math.PI / 1.5, 0, 0]}
|
rotation={[Math.PI / 1.5, 0, 0]}
|
||||||
|
scale={scale}
|
||||||
|
|
||||||
>
|
>
|
||||||
<FakeFlame />
|
<FakeFlame isBoosting={isBoosting}/>
|
||||||
</Cylinder>
|
</Cylinder>
|
||||||
|
|
||||||
<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]}
|
position={[-0.3, 0.6, -1.2]}
|
||||||
rotation={[Math.PI / 1.5, 0, 0]}
|
rotation={[Math.PI / 1.5, 0, 0]}
|
||||||
|
scale={scale}
|
||||||
>
|
>
|
||||||
<FakeFlame />
|
<FakeFlame isBoosting={isBoosting} />
|
||||||
</Cylinder>
|
</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>
|
</group>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,12 +11,13 @@ body {
|
||||||
overflow-x: none;
|
overflow-x: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
body::-webkit-scrollbar {
|
body::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wheel{
|
.wheel{
|
||||||
|
display: none;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:0;
|
top:0;
|
||||||
|
|
||||||
|
@ -28,6 +29,14 @@ img{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overlay{
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
width:100vw;
|
||||||
|
height:100vh;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.logo{
|
.logo{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
@ -50,4 +59,4 @@ img{
|
||||||
50% {
|
50% {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
} */
|
}
|
Loading…
Reference in New Issue