feat: add door knocks

src/app/fear/scene-components/hallway.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { FEAR_SETTINGS, fearState } from "../state";
-import { useTexture } from "@react-three/drei";
+import { useTexture, PositionalAudio } from "@react-three/drei";
 
 import * as THREE from "three";
 import { useFrame } from "@react-three/fiber";
@@ -10,6 +10,27 @@ interface DoorProps {
     rotation: [number, number, number];
 }
 function Door({ position, rotation }: DoorProps) {
+    const [soundUrl, setSoundUrl] = useState<string | null>(null);
+    const currentSound = useRef<string | null>(null);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (Math.random() < 0.02) {
+                const chosenSound = Math.random() < 0.5 ? "fear/snd/knock1.mp3" : "fear/snd/knock2.mp3";
+
+                setSoundUrl(chosenSound);
+                currentSound.current = chosenSound;
+            }
+        }, 5000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const handleAudioEnded = () => {
+        setSoundUrl(null);
+        currentSound.current = null;
+    };
+
     return (
         <group position={position} rotation={rotation}>
             <mesh position={[0, 2, -0.14]}>
@@ -26,6 +47,16 @@ function Door({ position, rotation }: DoorProps) {
                 <boxGeometry args={[0.08, 0.08, 0.15]} />
                 <meshStandardMaterial color="#4e4b4b" roughness={0.4} metalness={0.2} />
             </mesh>
+
+            {soundUrl && (
+                <PositionalAudio
+                    url={soundUrl}
+                    distance={25}
+                    loop={false}
+                    autoplay={true}
+                    onEnded={handleAudioEnded}
+                />
+            )}
         </group>
     );
 }