add debug mode

src/components/AudioEmitter.tsx

@@ -32,6 +32,7 @@ function getCachedAudioBuffer(
 }
 
 export function AudioEmitter({ object }: { object: ConsoleObject }) {
+  const { debugMode } = useSettings();
   const fileName = getProperty(object, "fileName")?.value ?? "";
   const volume = parseFloat(getProperty(object, "volume")?.value ?? "1");
   const minDistance = parseFloat(
@@ -200,5 +201,15 @@ export function AudioEmitter({ object }: { object: ConsoleObject }) {
     }
   }, [audioEnabled]);
 
-  return null;
+  return debugMode ? (
+    <mesh position={emitterPosRef.current}>
+      <sphereGeometry args={[minDistance, 12, 12]} />
+      <meshStandardMaterial
+        color="#00ff00"
+        wireframe
+        toneMapped={false}
+        fog={false}
+      />
+    </mesh>
+  ) : null;
 }

src/components/InspectorControls.tsx

@@ -29,6 +29,8 @@ export function InspectorControls({
     setFov,
     audioEnabled,
     setAudioEnabled,
+    debugMode,
+    setDebugMode,
   } = useSettings();
 
   return (
@@ -69,6 +71,17 @@ export function InspectorControls({
         />
         <label htmlFor="audioInput">Audio?</label>
       </div>
+      <div className="CheckboxField">
+        <input
+          id="debugInput"
+          type="checkbox"
+          checked={debugMode}
+          onChange={(event) => {
+            setDebugMode(event.target.checked);
+          }}
+        />
+        <label htmlFor="debugInput">Debug?</label>
+      </div>
       <div className="Field">
         <label htmlFor="fovInput">FOV</label>
         <input

src/components/ObserverControls.tsx

@@ -134,6 +134,23 @@ const KEYBOARD_CONTROLS = [
 ];
 
 export function ObserverControls() {
+  // Don't let KeyboardControls handle stuff when metaKey is held.
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.metaKey) {
+        e.stopImmediatePropagation();
+      }
+    };
+
+    window.addEventListener("keydown", handleKey, { capture: true });
+    window.addEventListener("keyup", handleKey, { capture: true });
+
+    return () => {
+      window.removeEventListener("keydown", handleKey, { capture: true });
+      window.removeEventListener("keyup", handleKey, { capture: true });
+    };
+  }, []);
+
   return (
     <KeyboardControls map={KEYBOARD_CONTROLS}>
       <CameraMovement />

src/components/SettingsProvider.tsx

@@ -25,6 +25,7 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
   const [speedMultiplier, setSpeedMultiplier] = useState(1);
   const [fov, setFov] = useState(90);
   const [audioEnabled, setAudioEnabled] = useState(false);
+  const [debugMode, setDebugMode] = useState(false);
 
   const value = useMemo(
     () => ({
@@ -36,8 +37,10 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
       setFov,
       audioEnabled,
       setAudioEnabled,
+      debugMode,
+      setDebugMode,
     }),
-    [fogEnabled, speedMultiplier, fov, audioEnabled]
+    [fogEnabled, speedMultiplier, fov, audioEnabled, debugMode, setDebugMode]
   );
 
   // Read persisted settings from localStoarge.