diff --git a/src/components/PlayerControllerGamepad.jsx b/src/components/PlayerControllerGamepad.jsx
index 95853ca..2845f5f 100644
--- a/src/components/PlayerControllerGamepad.jsx
+++ b/src/components/PlayerControllerGamepad.jsx
@@ -88,9 +88,16 @@ export const PlayerControllerGamepad = ({
const slowDownDuration = useRef(1500);
const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
+ const skidRotation = useRef(0);
+
+ const rightWheel = useRef();
+ const leftWheel = useRef();
+ const isDrifting = useRef(false);
useEffect(() => {
- if(kart.current) {
- actions.setBody(body.current);
+ if(leftWheel.current && rightWheel.current && body.current) {
+ actions.setLeftWheel(leftWheel.current);
+ actions.setRightWheel(rightWheel.current);
+ actions.setIsDrifting(isDrifting.current);
}
}, [body.current]);
@@ -100,6 +107,7 @@ export const PlayerControllerGamepad = ({
if (player.id !== id) return;
const time = clock.getElapsedTime();
if (!body.current && !mario.current) return;
+ isDrifting.current = driftLeft.current || driftRight.current;
engineSound.current.setVolume(currentSpeed / 300 + 0.2);
engineSound.current.setPlaybackRate(currentSpeed / 10 + 0.1);
jumpSound.current.setPlaybackRate(1.5);
@@ -122,8 +130,6 @@ export const PlayerControllerGamepad = ({
actions.setGameStarted(false);
}
- // mouse steering
-
if (!driftLeft.current && !driftRight.current) {
steeringAngle = currentSteeringSpeed * -joystick[0];
targetXPosition = -camMaxOffset * -joystick[0];
@@ -475,6 +481,8 @@ export const PlayerControllerGamepad = ({
player.setState("turboColor", turboColor);
player.setState("scale", scale);
player.setState("bananas", bananas);
+
+ skidRotation.current = kartRotation + mario.current.rotation.y;
});
return player.id === id ? (
@@ -513,7 +521,7 @@ export const PlayerControllerGamepad = ({
/>
-
+
+
+
+
+
{/* */}
diff --git a/src/components/Skid.jsx b/src/components/Skid.jsx
index 8e9855e..bc9f9e4 100644
--- a/src/components/Skid.jsx
+++ b/src/components/Skid.jsx
@@ -14,13 +14,17 @@ const v = new Vector3()
-export function Skid({ count = 500, opacity = 1, size = 2 }) {
+export function Skid({ count = 500, opacity = 0.5, size = 0.3 }) {
const ref = useRef(null);
- const { body } = useStore();
+ const { leftWheel, rightWheel } = useStore();
let index = 0
useFrame(() => {
- if (body && ref.current) {
- setItemAt(ref.current, e, body, index++)
+ const isDrifting = useStore.getState()
+ console.log(isDrifting)
+ if (leftWheel && rightWheel && ref.current && isDrifting) {
+ setItemAt(ref.current, leftWheel.rotation, leftWheel, index++);
+ setItemAt(ref.current, rightWheel.rotation, rightWheel, index++);
+
if (index === count) index = 0
}
})
@@ -35,15 +39,15 @@ export function Skid({ count = 500, opacity = 1, size = 2 }) {
})
return (
-
-
-
+
+
+
)
}
function setItemAt(instances, rotation, body, index) {
- o.position.copy(vec3(body.translation()))
+ o.position.copy(body.getWorldPosition(v));
o.rotation.copy(rotation)
o.scale.setScalar(1)
o.updateMatrix()
diff --git a/src/components/store.jsx b/src/components/store.jsx
index 114c0ba..6be91ad 100644
--- a/src/components/store.jsx
+++ b/src/components/store.jsx
@@ -17,8 +17,9 @@ export const useStore = create((set, get) => ({
controls: "gamepad",
particles1: [],
particles2: [],
- bodyPosition: [0, 0, 0],
- bodyRotation: [0, 0, 0],
+ leftWheel: null,
+ rightWheel: null,
+ bodyRotation: null,
pastPositions: [],
shouldSlowdown: false,
bananas: [],
@@ -34,6 +35,7 @@ export const useStore = create((set, get) => ({
driftButton: false,
itemButton: false,
menuButton: false,
+ isDrifting: false,
addPastPosition: (position) => {
set((state) => ({
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
@@ -64,7 +66,7 @@ export const useStore = create((set, get) => ({
set({ bodyPosition: position });
},
setBodyRotation: (rotation) => {
- set({ bodyRotation: rotation });
+ set({ rotation });
},
getBodyPosition: () => {
return get().bodyPosition;
@@ -168,6 +170,18 @@ export const useStore = create((set, get) => ({
setBody: (body) => {
set({ body });
},
+ setLeftWheel: (leftWheel) => {
+ set({ leftWheel });
+ },
+ setRightWheel: (rightWheel) => {
+ set({ rightWheel });
+ },
+ setIsDrifting: (isDrifting) => {
+ set({ isDrifting });
+ },
+ getIsDrifting: () => {
+ return get().isDrifting;
+ },
},
}));