diff --git a/src/App.jsx b/src/App.jsx
index 6a7b1a5..3201e8a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -38,7 +38,7 @@ function App() {
const { actions } = useStore();
const start = async () => {
- await insertCoin();
+ await insertCoin({ skipLobby: true});
onPlayerJoin((state) => {
actions.addPlayer(state);
diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx
index 511e0cc..33a44fa 100644
--- a/src/components/Experience.jsx
+++ b/src/components/Experience.jsx
@@ -42,6 +42,7 @@ import { useFrame, useLoader } from "@react-three/fiber";
import { LUTPass, LUTCubeLoader } from "three-stdlib";
import { useCurvedPathPoints } from "./useCurvedPath";
import { ParisBis } from "./models/tracks/Paris-bis";
+import { Skid } from "./Skid";
export const Experience = () => {
const onCollide = (event) => {};
@@ -154,7 +155,7 @@ export const Experience = () => {
-
+
{networkBananas.map((banana) => (
{
+ if(kart.current) {
+ actions.setBody(body.current);
+ }
+ }, [body.current]);
+
+
+
useFrame(({ pointer, clock }, delta) => {
if (player.id !== id) return;
const time = clock.getElapsedTime();
@@ -459,6 +467,7 @@ export const PlayerControllerGamepad = ({
actions.useItem();
}
+
player.setState("position", body.current.translation());
player.setState("rotation", kartRotation + mario.current.rotation.y);
player.setState("isBoosting", isBoosting);
diff --git a/src/components/Skid.jsx b/src/components/Skid.jsx
index e69de29..8e9855e 100644
--- a/src/components/Skid.jsx
+++ b/src/components/Skid.jsx
@@ -0,0 +1,52 @@
+import { Euler, Object3D, Vector3, Matrix4, DoubleSide } from 'three'
+import { useRef, useLayoutEffect } from 'react'
+import { useFrame } from '@react-three/fiber'
+import { vec3 } from '@react-three/rapier'
+
+
+import { useStore } from './store'
+
+
+const e = new Euler()
+const m = new Matrix4()
+const o = new Object3D()
+const v = new Vector3()
+
+
+
+export function Skid({ count = 500, opacity = 1, size = 2 }) {
+ const ref = useRef(null);
+ const { body } = useStore();
+ let index = 0
+ useFrame(() => {
+ if (body && ref.current) {
+ setItemAt(ref.current, e, body, 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, rotation, body, index) {
+ o.position.copy(vec3(body.translation()))
+ o.rotation.copy(rotation)
+ 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 dd0d05f..114c0ba 100644
--- a/src/components/store.jsx
+++ b/src/components/store.jsx
@@ -13,8 +13,8 @@ export const items = [
]
export const useStore = create((set, get) => ({
- gameStarted: false,
- controls: "",
+ gameStarted: true,
+ controls: "gamepad",
particles1: [],
particles2: [],
bodyPosition: [0, 0, 0],
@@ -28,6 +28,7 @@ export const useStore = create((set, get) => ({
skids: [],
coins : 0,
players : [],
+ body: null,
id : "",
joystickX: 0,
driftButton: false,
@@ -164,6 +165,9 @@ export const useStore = create((set, get) => ({
setMenuButton: (menuButton) => {
set({ menuButton });
},
+ setBody: (body) => {
+ set({ body });
+ },
},
}));