Tribes2/t2-mapper
1
0
Fork 0
mirror of https://github.com/exogen/t2-mapper.git synced 2026-04-27 07:15:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

migrate to CSS Modules

Browse source
This commit is contained in:
Brian Beck 2026-03-01 09:40:17 -08:00
parent c5b43f2e55
commit d9be5c1eba
51 changed files with 1684 additions and 1630 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/FloatingLabel.tsx
View file

@ -2,6 +2,7 @@ import { memo, ReactNode, useRef, useState } from "react";
import { Object3D, Vector3 } from "three";
import { useFrame } from "@react-three/fiber";
import { Html } from "@react-three/drei";
import styles from "./FloatingLabel.module.css";
const DEFAULT_POSITION = [0, 0, 0] as [x: number, y: number, z: number];
const _worldPos = new Vector3();
@ -15,7 +16,9 @@ function isBehindCamera(
): boolean {
const e = camera.matrixWorld.elements;
// Dot product of (objectPos - cameraPos) with camera forward (-Z column).
return (wx - e[12]) * -e[8] + (wy - e[13]) * -e[9] + (wz - e[14]) * -e[10] < 0;
return (
(wx - e[12]) * -e[8] + (wy - e[13]) * -e[9] + (wz - e[14]) * -e[10] < 0
);
}
export const FloatingLabel = memo(function FloatingLabel({
@ -39,10 +42,17 @@ export const FloatingLabel = memo(function FloatingLabel({
if (!group) return;
group.getWorldPosition(_worldPos);
const behind = isBehindCamera(camera, _worldPos.x, _worldPos.y, _worldPos.z);
const behind = isBehindCamera(
camera,
_worldPos.x,
_worldPos.y,
_worldPos.z,
);
if (fadeWithDistance) {
const distance = behind ? Infinity : camera.position.distanceTo(_worldPos);
const distance = behind
? Infinity
: camera.position.distanceTo(_worldPos);
const shouldBeVisible = distance < 200;
if (isVisible !== shouldBeVisible) {
@ -69,7 +79,7 @@ export const FloatingLabel = memo(function FloatingLabel({
<group ref={groupRef}>
{isVisible ? (
<Html position={position} center>
<div ref={labelRef} className="StaticShapeLabel" style={{ color }}>
<div ref={labelRef} className={styles.Label} style={{ color }}>
{children}
</div>
</Html>