70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { Html } from "@react-three/drei";
|
|
import { useFrame } from "@react-three/fiber";
|
|
import { useRef } from "react";
|
|
import * as THREE from "three";
|
|
import type { RuntimeObjectInstance } from "../types";
|
|
import { debugLabelsStore } from "../state/debugLabelsStore";
|
|
import { state } from "../state";
|
|
import { observer } from "mobx-react-lite";
|
|
import { formatV3 } from "../utils";
|
|
|
|
export const DebugLabel = observer(function ({ obj }: { obj: RuntimeObjectInstance; }) {
|
|
const groupRef = useRef<THREE.Group>(null);
|
|
|
|
const rb = obj.rb();
|
|
const texts = [
|
|
`${state.world.getObjectTypeById(obj.typeId)?.name} ${obj.id}`,
|
|
`position: ${formatV3(obj.position)}`,
|
|
`rotation: ${formatV3(obj.rotation)}`,
|
|
...Object.entries(debugLabelsStore.getAll(obj.id))
|
|
.map(([k, v]) => `${k}: ${v}`),
|
|
];
|
|
|
|
if (rb) {
|
|
try {
|
|
const t = rb.translation();
|
|
texts.push(...[
|
|
`rb position: ${[t.x, t.y, t.z]}`,
|
|
]);
|
|
} catch {
|
|
texts.push('rb: stale handle');
|
|
}
|
|
}
|
|
|
|
useFrame(() => {
|
|
if (!groupRef.current)
|
|
return;
|
|
|
|
const [px, py, pz] = obj.position;
|
|
// const bb = obj.cache.boundingBox;
|
|
// const halfHeight = bb ? (bb.max[1] - bb.min[1]) / 2 : 1;
|
|
// groupRef.current.position.set(px, py + halfHeight + 0.5, pz);
|
|
groupRef.current.position.set(px, py, pz);
|
|
});
|
|
|
|
const text = texts.join('\n');
|
|
if (!text)
|
|
return null;
|
|
|
|
return (
|
|
<group ref={groupRef}>
|
|
<Html center sprite>
|
|
<div style={{
|
|
background: 'rgba(0,0,0,0.65)',
|
|
color: '#fff',
|
|
padding: 10,
|
|
borderRadius: 10,
|
|
fontSize: 10,
|
|
fontFamily: 'monospace',
|
|
whiteSpace: 'pre',
|
|
pointerEvents: 'none',
|
|
userSelect: 'none',
|
|
opacity: 0.3,
|
|
}}>
|
|
{text}
|
|
</div>
|
|
</Html>
|
|
</group>
|
|
);
|
|
});
|