math-pixel/La-Fabrik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

working move kikle

Browse Source
This commit is contained in:
math-pixel
2026-05-19 16:34:48 +02:00
parent 1ead7ab3a7
commit 5893afe42a
2 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ebike/Ebike.tsx
+19 -11
View File
@@ -1,11 +1,11 @@
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import * as THREE from "three"; import * as THREE from "three";
import { useFrame } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { InteractableObject } from "@/components/three/interaction/InteractableObject"; import { InteractableObject } from "@/components/three/interaction/InteractableObject";
import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF"; import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
import { useClonedObject } from "@/hooks/three/useClonedObject"; import { useClonedObject } from "@/hooks/three/useClonedObject";
import { useDebugFolder } from "@/hooks/debug/useDebugFolder"; import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
import { animateCameraTransition, animateCameraTransformTransition } from "@/world/GameCinematics"; import { animateCameraTransformTransition } from "@/world/GameCinematics";
import { useGameStore } from "@/managers/stores/useGameStore"; import { useGameStore } from "@/managers/stores/useGameStore";
import { PLAYER_EYE_HEIGHT } from "@/data/player/playerConfig"; import { PLAYER_EYE_HEIGHT } from "@/data/player/playerConfig";
import type { Vector3Tuple } from "@/types/three/three"; import type { Vector3Tuple } from "@/types/three/three";
@@ -23,7 +23,7 @@ export const EBIKE_CAMERA_TRANSFORM: CameraTransform = {
}; };
const EBIKE_DROP_PLAYER_TRANSFORM: CameraTransform = { const EBIKE_DROP_PLAYER_TRANSFORM: CameraTransform = {
position: [3, 1.5, 0], position: [0, 1.5, 3],
rotation: [0, 0, 0], rotation: [0, 0, 0],
}; };
@@ -39,8 +39,13 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
}); });
const model = useClonedObject(scene); const model = useClonedObject(scene);
const movementMode = useGameStore((state) => state.player.movementMode); const movementMode = useGameStore((state) => state.player.movementMode);
const camera = useThree((state) => state.camera);
const restingPosition = useRef<Vector3Tuple>(position); const restingPosition = useRef<Vector3Tuple>([
position[0],
position[1] - PLAYER_EYE_HEIGHT,
position[2],
]);
const restingRotation = useRef<number>(0); const restingRotation = useRef<number>(0);
useEffect(() => { useEffect(() => {
@@ -116,13 +121,16 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
currentPos.y + EBIKE_DROP_PLAYER_TRANSFORM.position[1], currentPos.y + EBIKE_DROP_PLAYER_TRANSFORM.position[1],
currentPos.z + EBIKE_DROP_PLAYER_TRANSFORM.position[2], currentPos.z + EBIKE_DROP_PLAYER_TRANSFORM.position[2],
]; ];
const targetLookAt: Vector3Tuple = [
currentPos.x, // Get camera's current rotation in degrees so we keep the exact orientation during dismount
currentPos.y + 1, const currentEuler = new THREE.Euler().setFromQuaternion(camera.quaternion, "YXZ");
currentPos.z, const targetRotation: Vector3Tuple = [
THREE.MathUtils.radToDeg(currentEuler.x),
THREE.MathUtils.radToDeg(currentEuler.y),
THREE.MathUtils.radToDeg(currentEuler.z),
]; ];
animateCameraTransition(targetCamPos, targetLookAt, 1, () => { animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => {
useGameStore.getState().setPlayerMovementMode("walk"); useGameStore.getState().setPlayerMovementMode("walk");
}); });
} }
@@ -165,8 +173,8 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
onPress={handleInteract} onPress={handleInteract}
> >
<mesh> <mesh>
<boxGeometry args={[1.5, 1.5, 1.5]} /> <boxGeometry args={[10, 13, 2]} />
<meshStandardMaterial color="red" opacity={0.5} transparent /> <meshBasicMaterial colorWrite={false} depthWrite={false} />
</mesh> </mesh>
</InteractableObject> </InteractableObject>
</group> </group>
src/world/player/PlayerController.tsx
+10 -3
View File
@@ -120,15 +120,22 @@ export function PlayerController({
useEffect(() => { useEffect(() => {
if (movementMode === "ebike") { if (movementMode === "ebike") {
// Teleport player capsule to the bike's current parked position // Teleport player capsule to the bike's current parked position
const targetPos: Vector3Tuple = (window as any).ebikeParkedPosition || [0, 10, 0]; const targetPos: Vector3Tuple = (window as any).ebikeParkedPosition || [0, 8.2, 0];
const targetRot: number = (window as any).ebikeParkedRotation || 0; const targetRot: number = (window as any).ebikeParkedRotation || 0;
const headY = targetPos[1] + PLAYER_EYE_HEIGHT;
const bottomY = targetPos[1] + PLAYER_CAPSULE_RADIUS;
capsule.current.start.set( capsule.current.start.set(
targetPos[0], targetPos[0],
targetPos[1] - PLAYER_EYE_HEIGHT + PLAYER_CAPSULE_RADIUS, bottomY,
targetPos[2],
);
capsule.current.end.set(
targetPos[0],
headY,
targetPos[2], targetPos[2],
); );
capsule.current.end.set(...targetPos);
velocity.current.set(0, 0, 0); velocity.current.set(0, 0, 0);
onFloor.current = false; onFloor.current = false;
wantsJump.current = false; wantsJump.current = false;