mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
prettied hud a bit
This commit is contained in:
ad044
parent
9b6e2775cc
commit
d6174a082f
2 changed files with 80 additions and 83 deletions
|
|
@ -45,6 +45,18 @@ const HUD = memo(() => {
|
|||
const scene = useStore((state) => state.currentScene);
|
||||
const prevData = usePrevious({ siteRotY, activeLevel, subscene, scene });
|
||||
|
||||
const lerpObject = (
|
||||
obj: THREE.Object3D,
|
||||
posX: number,
|
||||
initialPosX: number
|
||||
) => {
|
||||
obj.position.x = lerp(
|
||||
obj.position.x,
|
||||
activeRef.current ? posX : initialPosX,
|
||||
0.12
|
||||
);
|
||||
};
|
||||
|
||||
// this part is imperative because it performs a lot better than having a toggleable spring.
|
||||
useFrame(() => {
|
||||
if (
|
||||
|
|
@ -53,36 +65,26 @@ const HUD = memo(() => {
|
|||
boringHudRef.current &&
|
||||
greenTextRef.current
|
||||
) {
|
||||
longHudRef.current.position.x = lerp(
|
||||
longHudRef.current.position.x,
|
||||
!activeRef.current
|
||||
? currentHudRef.current.long.initial_position[0]
|
||||
: currentHudRef.current.long.position[0],
|
||||
0.12
|
||||
const hud = currentHudRef.current;
|
||||
lerpObject(
|
||||
longHudRef.current,
|
||||
hud.long.position[0],
|
||||
hud.long.initial_position[0]
|
||||
);
|
||||
|
||||
boringHudRef.current.position.x = lerp(
|
||||
boringHudRef.current.position.x,
|
||||
!activeRef.current
|
||||
? currentHudRef.current.boring.initial_position[0]
|
||||
: currentHudRef.current.boring.position[0],
|
||||
0.12
|
||||
lerpObject(
|
||||
boringHudRef.current,
|
||||
hud.boring.position[0],
|
||||
hud.boring.initial_position[0]
|
||||
);
|
||||
|
||||
bigHudRef.current.position.x = lerp(
|
||||
bigHudRef.current.position.x,
|
||||
!activeRef.current
|
||||
? currentHudRef.current.big.initial_position[0]
|
||||
: currentHudRef.current.big.position[0],
|
||||
0.12
|
||||
lerpObject(
|
||||
bigHudRef.current,
|
||||
hud.big.position[0],
|
||||
hud.big.initial_position[0]
|
||||
);
|
||||
|
||||
greenTextRef.current.position.x = lerp(
|
||||
greenTextRef.current.position.x,
|
||||
!activeRef.current
|
||||
? currentHudRef.current.medium_text.initial_position[0]
|
||||
: currentHudRef.current.medium_text.position[0],
|
||||
0.12
|
||||
lerpObject(
|
||||
greenTextRef.current,
|
||||
hud.medium_text.position[0],
|
||||
hud.medium_text.initial_position[0]
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -100,26 +102,38 @@ const HUD = memo(() => {
|
|||
bigHudRef.current!.scale.x = Math.abs(bigHudRef.current!.scale.x);
|
||||
};
|
||||
|
||||
const setPos = (hud: HUDType, pos: string) => {
|
||||
longHudRef.current!.position.set(
|
||||
...(hud.long[pos as keyof typeof hud.long] as [number, number, number])
|
||||
);
|
||||
boringHudRef.current!.position.set(
|
||||
...(hud.boring[pos as keyof typeof hud.boring] as [
|
||||
number,
|
||||
number,
|
||||
number
|
||||
])
|
||||
);
|
||||
bigHudRef.current!.position.set(
|
||||
...(hud.big[pos as keyof typeof hud.big] as [number, number, number])
|
||||
);
|
||||
greenTextRef.current!.position.set(
|
||||
...(hud.medium_text[pos as keyof typeof hud.medium_text] as [
|
||||
number,
|
||||
number,
|
||||
number
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
if (activeRef.current !== undefined) {
|
||||
const hud = getNodeHud(activeNodeMatrixIndices!);
|
||||
if (
|
||||
(!(scene === "main" && prevData?.scene === "main") ||
|
||||
(subscene === "site" && prevData?.subscene === "pause") ||
|
||||
subscene === "pause") &&
|
||||
longHudRef.current &&
|
||||
bigHudRef.current &&
|
||||
boringHudRef.current &&
|
||||
greenTextRef.current
|
||||
!(scene === "main" && prevData?.scene === "main") ||
|
||||
(subscene === "site" && prevData?.subscene === "pause") ||
|
||||
subscene === "pause"
|
||||
) {
|
||||
longHudRef.current.position.y = hud.long.position[1];
|
||||
boringHudRef.current.position.y = hud.boring.position[1];
|
||||
bigHudRef.current.position.y = hud.big.position[1];
|
||||
greenTextRef.current.position.y = hud.medium_text.position[1];
|
||||
|
||||
longHudRef.current.position.x = hud.long.position[0];
|
||||
boringHudRef.current.position.x = hud.boring.position[0];
|
||||
bigHudRef.current.position.x = hud.big.position[0];
|
||||
greenTextRef.current.position.x = hud.medium_text.position[0];
|
||||
// set to final pos instantly
|
||||
setPos(hud, "position");
|
||||
} else {
|
||||
if (
|
||||
prevData?.siteRotY !== siteRotY ||
|
||||
|
|
@ -132,32 +146,15 @@ const HUD = memo(() => {
|
|||
activeRef.current = false;
|
||||
setTimeout(
|
||||
() => {
|
||||
if (
|
||||
longHudRef.current &&
|
||||
bigHudRef.current &&
|
||||
boringHudRef.current &&
|
||||
greenTextRef.current
|
||||
) {
|
||||
longHudRef.current.position.y = hud.long.position[1];
|
||||
boringHudRef.current.position.y = hud.boring.position[1];
|
||||
bigHudRef.current.position.y = hud.big.position[1];
|
||||
greenTextRef.current.position.y = hud.medium_text.position[1];
|
||||
|
||||
longHudRef.current.position.x = hud.long.initial_position[0];
|
||||
boringHudRef.current.position.x =
|
||||
hud.boring.initial_position[0];
|
||||
bigHudRef.current.position.x = hud.big.initial_position[0];
|
||||
greenTextRef.current.position.x =
|
||||
hud.medium_text.initial_position[0];
|
||||
|
||||
if (hud.mirrored) {
|
||||
mirror();
|
||||
} else {
|
||||
unMirror();
|
||||
}
|
||||
currentHudRef.current = hud;
|
||||
activeRef.current = true;
|
||||
// set to initial pos instantly while its hidden
|
||||
setPos(hud, "initial_position");
|
||||
if (hud.mirrored) {
|
||||
mirror();
|
||||
} else {
|
||||
unMirror();
|
||||
}
|
||||
currentHudRef.current = hud;
|
||||
activeRef.current = true;
|
||||
},
|
||||
wasHidden ? 0 : 500
|
||||
);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
"mirrored": 0,
|
||||
"long": {
|
||||
"position": [-0.45, -0.32, -8.6],
|
||||
"initial_position": [-1.43, -0.3, -8.6]
|
||||
"initial_position": [-1.43, -0.32, -8.6]
|
||||
},
|
||||
"boring": {
|
||||
"position": [0.51, -0.3, -8.6],
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
},
|
||||
"big": {
|
||||
"position": [0.3, -0.28, -8.6],
|
||||
"initial_position": [1.3, -0.12, -8.6]
|
||||
"initial_position": [1.3, -0.28, -8.6]
|
||||
},
|
||||
"big_text": [-0.35, -0.32, -8.7],
|
||||
"medium_text": {
|
||||
|
|
@ -123,15 +123,15 @@
|
|||
"mirrored": 0,
|
||||
"long": {
|
||||
"position": [-0.3, 0.04, -8.6],
|
||||
"initial_position": [-1.3, 0.02, -8.6]
|
||||
"initial_position": [-1.3, 0.04, -8.6]
|
||||
},
|
||||
"boring": {
|
||||
"position": [0.6, 0.06, -8.6],
|
||||
"initial_position": [1.6, 0.038, -8.6]
|
||||
"initial_position": [1.6, 0.06, -8.6]
|
||||
},
|
||||
"big": {
|
||||
"position": [0.3, 0.015, -8.6],
|
||||
"initial_position": [1.3, 0, -8.6]
|
||||
"initial_position": [1.3, 0.015, -8.6]
|
||||
},
|
||||
"big_text": [-0.15, 0.1, -8.7],
|
||||
"medium_text": {
|
||||
|
|
@ -143,15 +143,15 @@
|
|||
"mirrored": 0,
|
||||
"long": {
|
||||
"position": [-0.3, -0.07, -8.6],
|
||||
"initial_position": [-1.35, -0.09, -8.6]
|
||||
"initial_position": [-1.35, -0.07, -8.6]
|
||||
},
|
||||
"boring": {
|
||||
"position": [0.6, -0.05, -8.6],
|
||||
"initial_position": [1.6, -0.07, -8.6]
|
||||
"initial_position": [1.6, -0.05, -8.6]
|
||||
},
|
||||
"big": {
|
||||
"position": [0.3, -0.1, -8.6],
|
||||
"initial_position": [1.35, -0.12, -8.6]
|
||||
"initial_position": [1.35, -0.1, -8.6]
|
||||
},
|
||||
"big_text": [-0.15, -0.03, -8.7],
|
||||
"medium_text": {
|
||||
|
|
@ -203,15 +203,15 @@
|
|||
"mirrored": 1,
|
||||
"long": {
|
||||
"position": [0.65, -0.07, -8.6],
|
||||
"initial_position": [1.65, -0.09, -8.6]
|
||||
"initial_position": [1.65, -0.07, -8.6]
|
||||
},
|
||||
"boring": {
|
||||
"position": [-0.3, -0.05, -8.6],
|
||||
"initial_position": [-1.3, -0.07, -8.6]
|
||||
"initial_position": [-1.3, -0.05, -8.6]
|
||||
},
|
||||
"big": {
|
||||
"position": [-0.35, -0.1, -8.6],
|
||||
"initial_position": [-1.35, -0.12, -8.6]
|
||||
"initial_position": [-1.35, -0.1, -8.6]
|
||||
},
|
||||
"big_text": [0.2, -0.03, -8.7],
|
||||
"medium_text": {
|
||||
|
|
@ -223,20 +223,20 @@
|
|||
"mirrored": 1,
|
||||
"long": {
|
||||
"position": [0.63, -0.19, -8.6],
|
||||
"initial_position": [1.63, -0.2, -8.6]
|
||||
"initial_position": [1.63, -0.19, -8.6]
|
||||
},
|
||||
"boring": {
|
||||
"position": [-0.29, -0.17, -8.6],
|
||||
"initial_position": [-1.29, -0.18, -8.6]
|
||||
"initial_position": [-1.29, -0.17, -8.6]
|
||||
},
|
||||
"big": {
|
||||
"position": [-0.25, -0.22, -8.6],
|
||||
"initial_position": [-1.25, -0.18, -8.6]
|
||||
"initial_position": [-1.25, -0.22, -8.6]
|
||||
},
|
||||
"big_text": [0.2, -0.17, -8.7],
|
||||
"medium_text": {
|
||||
"position": [-0.53, -0.25, -8.7],
|
||||
"initial_position": [-1.53, -0.2, -8.7]
|
||||
"initial_position": [-1.53, -0.25, -8.7]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue