to fix(VFX): Skids in game
parent
8b08815d5c
commit
7665cd70fa
|
@ -38,7 +38,7 @@ function App() {
|
||||||
|
|
||||||
const { actions } = useStore();
|
const { actions } = useStore();
|
||||||
const start = async () => {
|
const start = async () => {
|
||||||
await insertCoin();
|
await insertCoin({ skipLobby: true});
|
||||||
|
|
||||||
onPlayerJoin((state) => {
|
onPlayerJoin((state) => {
|
||||||
actions.addPlayer(state);
|
actions.addPlayer(state);
|
||||||
|
|
|
@ -42,6 +42,7 @@ import { useFrame, useLoader } from "@react-three/fiber";
|
||||||
import { LUTPass, LUTCubeLoader } from "three-stdlib";
|
import { LUTPass, LUTCubeLoader } from "three-stdlib";
|
||||||
import { useCurvedPathPoints } from "./useCurvedPath";
|
import { useCurvedPathPoints } from "./useCurvedPath";
|
||||||
import { ParisBis } from "./models/tracks/Paris-bis";
|
import { ParisBis } from "./models/tracks/Paris-bis";
|
||||||
|
import { Skid } from "./Skid";
|
||||||
|
|
||||||
export const Experience = () => {
|
export const Experience = () => {
|
||||||
const onCollide = (event) => {};
|
const onCollide = (event) => {};
|
||||||
|
@ -154,7 +155,7 @@ export const Experience = () => {
|
||||||
|
|
||||||
<Ground position={[0, 0, 0]} />
|
<Ground position={[0, 0, 0]} />
|
||||||
<Environment resolution={256} preset="lobby" />
|
<Environment resolution={256} preset="lobby" />
|
||||||
|
<Skid />
|
||||||
{networkBananas.map((banana) => (
|
{networkBananas.map((banana) => (
|
||||||
<Banana
|
<Banana
|
||||||
key={banana.id}
|
key={banana.id}
|
||||||
|
|
|
@ -88,6 +88,14 @@ export const PlayerControllerGamepad = ({
|
||||||
const slowDownDuration = useRef(1500);
|
const slowDownDuration = useRef(1500);
|
||||||
const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
|
const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(kart.current) {
|
||||||
|
actions.setBody(body.current);
|
||||||
|
}
|
||||||
|
}, [body.current]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useFrame(({ pointer, clock }, delta) => {
|
useFrame(({ pointer, clock }, delta) => {
|
||||||
if (player.id !== id) return;
|
if (player.id !== id) return;
|
||||||
const time = clock.getElapsedTime();
|
const time = clock.getElapsedTime();
|
||||||
|
@ -459,6 +467,7 @@ export const PlayerControllerGamepad = ({
|
||||||
actions.useItem();
|
actions.useItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
player.setState("position", body.current.translation());
|
player.setState("position", body.current.translation());
|
||||||
player.setState("rotation", kartRotation + mario.current.rotation.y);
|
player.setState("rotation", kartRotation + mario.current.rotation.y);
|
||||||
player.setState("isBoosting", isBoosting);
|
player.setState("isBoosting", isBoosting);
|
||||||
|
|
|
@ -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 (
|
||||||
|
<instancedMesh ref={ref} args={[undefined, undefined, count]}>
|
||||||
|
<planeGeometry args={[size, size * 2]} />
|
||||||
|
<meshBasicMaterial color="black" side={DoubleSide} />
|
||||||
|
</instancedMesh>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
|
@ -13,8 +13,8 @@ export const items = [
|
||||||
]
|
]
|
||||||
|
|
||||||
export const useStore = create((set, get) => ({
|
export const useStore = create((set, get) => ({
|
||||||
gameStarted: false,
|
gameStarted: true,
|
||||||
controls: "",
|
controls: "gamepad",
|
||||||
particles1: [],
|
particles1: [],
|
||||||
particles2: [],
|
particles2: [],
|
||||||
bodyPosition: [0, 0, 0],
|
bodyPosition: [0, 0, 0],
|
||||||
|
@ -28,6 +28,7 @@ export const useStore = create((set, get) => ({
|
||||||
skids: [],
|
skids: [],
|
||||||
coins : 0,
|
coins : 0,
|
||||||
players : [],
|
players : [],
|
||||||
|
body: null,
|
||||||
id : "",
|
id : "",
|
||||||
joystickX: 0,
|
joystickX: 0,
|
||||||
driftButton: false,
|
driftButton: false,
|
||||||
|
@ -164,6 +165,9 @@ export const useStore = create((set, get) => ({
|
||||||
setMenuButton: (menuButton) => {
|
setMenuButton: (menuButton) => {
|
||||||
set({ menuButton });
|
set({ menuButton });
|
||||||
},
|
},
|
||||||
|
setBody: (body) => {
|
||||||
|
set({ body });
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
}));
|
}));
|
||||||
|
|
Loading…
Reference in New Issue