44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
type DebugPanelProps = {
|
|
fullControlMode: boolean;
|
|
cameraInfo: {
|
|
cameraPosition: number[];
|
|
target: number[];
|
|
zoom: number;
|
|
};
|
|
modelInfo: {
|
|
position: number[];
|
|
rotation: number[];
|
|
scale: number;
|
|
};
|
|
};
|
|
|
|
export function DebugPanel({ fullControlMode, cameraInfo, modelInfo }: DebugPanelProps) {
|
|
return (
|
|
<div className="fixed top-4 left-4 bg-black/80 text-white p-4 rounded text-xs font-mono space-y-2 z-[100]">
|
|
<div className="font-bold text-blue-400">Controls:</div>
|
|
<div className={fullControlMode ? 'text-green-300' : 'text-yellow-300'}>
|
|
Mode: {fullControlMode ? 'FULL CONTROL' : 'ROTATION ONLY'}
|
|
</div>
|
|
<div>* Left-click/Touch + drag: Rotate</div>
|
|
{fullControlMode && (
|
|
<>
|
|
<div>* Right-click + drag: Pan</div>
|
|
<div>* Scroll: Zoom</div>
|
|
</>
|
|
)}
|
|
<div>* Ctrl+Alt+Enter: Toggle full control</div>
|
|
<div>* Ctrl+Alt+D: Toggle debug panel</div>
|
|
|
|
<div className="font-bold text-green-400 pt-2">Camera:</div>
|
|
<div>Position: [{cameraInfo.cameraPosition.map((v) => v.toFixed(2)).join(', ')}]</div>
|
|
<div>Target: [{cameraInfo.target.map((v) => v.toFixed(2)).join(', ')}]</div>
|
|
<div>Zoom: {cameraInfo.zoom.toFixed(2)}</div>
|
|
|
|
<div className="font-bold text-yellow-400 pt-2">Model:</div>
|
|
<div>Position: [{modelInfo.position.map((v) => v.toFixed(2)).join(', ')}]</div>
|
|
<div>Rotation: [{modelInfo.rotation.map((v) => v.toFixed(2)).join(', ')}]</div>
|
|
<div>Scale: {modelInfo.scale.toFixed(2)}</div>
|
|
</div>
|
|
);
|
|
}
|