to fix(VFX): Skids in game
parent
8b08815d5c
commit
7665cd70fa
|
@ -38,7 +38,7 @@ function App() {
|
|||
|
||||
const { actions } = useStore();
|
||||
const start = async () => {
|
||||
await insertCoin();
|
||||
await insertCoin({ skipLobby: true});
|
||||
|
||||
onPlayerJoin((state) => {
|
||||
actions.addPlayer(state);
|
||||
|
|
|
@ -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 = () => {
|
|||
|
||||
<Ground position={[0, 0, 0]} />
|
||||
<Environment resolution={256} preset="lobby" />
|
||||
|
||||
<Skid />
|
||||
{networkBananas.map((banana) => (
|
||||
<Banana
|
||||
key={banana.id}
|
||||
|
|
|
@ -88,6 +88,14 @@ export const PlayerControllerGamepad = ({
|
|||
const slowDownDuration = useRef(1500);
|
||||
const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
|
||||
|
||||
useEffect(() => {
|
||||
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);
|
||||
|
|
|
@ -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) => ({
|
||||
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 });
|
||||
},
|
||||
},
|
||||
|
||||
}));
|
||||
|
|
Loading…
Reference in New Issue