remove as many transforms as possible, render Z-up axes

This commit is contained in:
Brian Beck 2025-11-25 16:56:54 -08:00
parent b2404a90af
commit 60a46e708b
424 changed files with 383 additions and 256882 deletions

View file

@ -1,12 +1,46 @@
import { Stats } from "@react-three/drei";
import { Stats, Html } from "@react-three/drei";
import { useSettings } from "./SettingsProvider";
import { useEffect, useRef } from "react";
import { AxesHelper } from "three";
export function DebugElements() {
const { debugMode } = useSettings();
const axesRef = useRef<AxesHelper>(null);
useEffect(() => {
const axes = axesRef.current;
if (!axes) {
return;
}
axes.setColors("rgb(153, 255, 0)", "rgb(0, 153, 255)", "rgb(255, 153, 0)");
});
return debugMode ? (
<>
<Stats className="StatsPanel" />
<axesHelper ref={axesRef} args={[70]} renderOrder={999}>
<lineBasicMaterial
depthTest={false}
depthWrite={false}
fog={false}
vertexColors
/>
</axesHelper>
<Html position={[80, 0, 0]} center>
<span className="AxisLabel" data-axis="y">
Y
</span>
</Html>
<Html position={[0, 80, 0]} center>
<span className="AxisLabel" data-axis="z">
Z
</span>
</Html>
<Html position={[0, 0, 80]} center>
<span className="AxisLabel" data-axis="x">
X
</span>
</Html>
</>
) : null;
}