diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index b56cd78..93b063e 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -18,7 +18,6 @@ import { ChromaticAberration, Vignette, } from "@react-three/postprocessing"; -import { Skid } from "./Skid"; import { Banana } from "./models/items/Banana_peel_mario_kart"; import { ItemBox } from "./models/misc/Mario_kart_item_box"; import { useStore } from "./store"; @@ -28,7 +27,7 @@ export const Experience = () => { const onCollide = (event) => { console.log(event); }; - const { bananas, shells } = useStore(); + const { bananas, shells} = useStore(); return ( <> @@ -37,10 +36,11 @@ export const Experience = () => { {/* */} - {/* */} + + {bananas.map((banana) => ( { const raycaster = new THREE.Raycaster(); const downDirection = new THREE.Vector3(0, -1, 0); const [shouldLaunch, setShouldLaunch] = useState(false); + const effectiveBoost = useRef(0); const { actions, shouldSlowDown, item, bananas} = useStore(); @@ -88,6 +89,8 @@ export const PlayerController = () => { useFrame(({ pointer, clock }, delta) => { const time = clock.getElapsedTime(); if (!body.current && !mario.current) return; + actions.setBodyPosition(vec3(body.current.translation())); + actions.setBodyRotation(body.current.rotation());1 engineSound.current.setVolume(currentSpeed / 300 + 0.2); engineSound.current.setPlaybackRate(currentSpeed / 10 + 0.1); jumpSound.current.setPlaybackRate(1.5); @@ -142,7 +145,7 @@ export const PlayerController = () => { } else if ( upPressed && currentSpeed > maxSpeed && - boostDuration.current > 0 + effectiveBoost.current > 0 ) { setCurrentSpeed( Math.max(currentSpeed - decceleration * delta * 144, maxSpeed) @@ -337,21 +340,23 @@ export const PlayerController = () => { if (boostDuration.current > 1 && !jumpIsHeld.current) { setIsBoosting(true); - } else if (boostDuration.current <= 1) { + effectiveBoost.current = boostDuration.current; + boostDuration.current = 0; + } else if (effectiveBoost.current <= 1) { targetZPosition = 8; setIsBoosting(false); } - if (isBoosting && boostDuration.current > 1) { + if (isBoosting && effectiveBoost.current > 1) { setCurrentSpeed(boostSpeed); - boostDuration.current -= 1 * delta * 144; + effectiveBoost.current -= 1 * delta * 144; targetZPosition = 10; turboSound.current.play(); driftTwoSound.current.play(); driftBlueSound.current.stop(); driftOrangeSound.current.stop(); driftPurpleSound.current.stop(); - } else if (boostDuration.current <= 1) { + } else if (effectiveBoost.current <= 1) { setIsBoosting(false); targetZPosition = 8; turboSound.current.stop(); @@ -391,6 +396,7 @@ export const PlayerController = () => { // ITEMS + if(shootPressed && item === "banana") { const distanceBehind = 2; // Adjust this value as needed const scaledBackwardDirection = forwardDirection.multiplyScalar(distanceBehind); @@ -434,9 +440,17 @@ export const PlayerController = () => { } + if(shootPressed && item === "mushroom") { + setIsBoosting(true); + boostDuration.current = 300; + actions.useItem(); + } + if(item) console.log(item) // console.lowg(body.current.translation()) + + }); return ( diff --git a/src/components/Skid.jsx b/src/components/Skid.jsx index 4ff2fa0..e69de29 100644 --- a/src/components/Skid.jsx +++ b/src/components/Skid.jsx @@ -1,67 +0,0 @@ -import { Euler, Object3D, BackSide, Vector3 } from "three"; -import { useRef, useLayoutEffect } from "react"; -import { useFrame } from "@react-three/fiber"; -import { useStore } from "./store"; - -const o = new Object3D(); - -export function Skid({ count = 500, opacity = 1, size = 0.4 }) { - const ref = useRef(null); - const [bodyPosition, bodyRotation] = useStore((state) => [ - state.bodyPosition, - state.bodyRotation, - ]); - - let index = 0; - useFrame(() => { - // console.log(bodyPosition, bodyRotation); - if (ref.current && bodyPosition && bodyRotation !== undefined) { - setItemAt(ref.current, bodyPosition, bodyRotation, index++); - if (index === count) index = 0; - } - }); - - useLayoutEffect(() => { - if (ref.current) { - ref.current.geometry.rotateX(-Math.PI / 2); - return () => { - ref.current.geometry.rotateX(Math.PI / 2); - }; - } - }); - - return ( - - - - - ); -} - -function setItemAt(instances, bodyPosition, bodyRotation, index) { - // Calculate the backward offset - const backwardOffset = 0.5; // Adjust this value as needed - const forwardDirection = new Vector3( - -Math.sin(bodyRotation), - 0, - -Math.cos(bodyRotation) - ); - const backwardPosition = forwardDirection - .multiplyScalar(-backwardOffset) - .add(bodyPosition); - - // Apply the offset to position the skid marks behind the body - o.position.copy(bodyPosition.x, bodyPosition.y + 2, bodyPosition.z); - - o.rotation.set(0, bodyRotation, 0); - o.scale.setScalar(1); - o.updateMatrix(); - instances.setMatrixAt(index, o.matrix); - instances.instanceMatrix.needsUpdate = true; -} diff --git a/src/components/store.jsx b/src/components/store.jsx index 2fea8c1..5204548 100644 --- a/src/components/store.jsx +++ b/src/components/store.jsx @@ -20,9 +20,10 @@ export const useStore = create((set, get) => ({ pastPositions: [], shouldSlowdown: false, bananas: [], - items: ["banana", "shell"], + items: ["banana", "shell", "mushroom"], item: "", shells: [], + skids: [], addPastPosition: (position) => { set((state) => ({ pastPositions: [position, ...state.pastPositions.slice(0, 499)], @@ -99,7 +100,12 @@ export const useStore = create((set, get) => ({ set((state) => ({ shells: state.shells.filter((s) => s.id !== shell.id), })); - } + }, + addSkid: (skid) => { + set((state) => ({ + skids: [...state.skids, skid], + })); + }, }, }));