feat: it speaks

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

@@ -1,4 +1,4 @@
-import { useTexture } from "@react-three/drei";
+import { useTexture, PositionalAudio } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useEffect, useRef, useState } from "react";
 
@@ -8,6 +8,7 @@ import { fearState } from "../state";
 export default function TheCreature() {
     const texture = useTexture('fear/img/creature.png');
     const meshRef = useRef<THREE.Mesh>(null);
+    const audioRef = useRef<THREE.PositionalAudio>(null);
     const { camera } = useThree();
 
     const [hasTriggered, setHasTriggered] = useState(false);
@@ -17,6 +18,8 @@ export default function TheCreature() {
     const globalDistance = useRef<number>(32);
     const [currentLoop, setCurrentLoop] = useState(fearState.loopCount);
 
+    const audioPlaying = useRef<boolean>(false);
+
     useEffect(() => {
         const unsubscribe = fearState.subscribe(() => {
             setCurrentLoop(fearState.loopCount);
@@ -25,6 +28,11 @@ export default function TheCreature() {
                 setIsSpawned(false);
                 setHasTriggered(false);
                 globalDistance.current = 32;
+                audioPlaying.current = false;
+
+                if (audioRef.current && audioRef.current.isPlaying) {
+                    audioRef.current.stop();
+                }
             }
         });
         return () => unsubscribe();
@@ -41,12 +49,22 @@ export default function TheCreature() {
             globalDistance.current = 32;
         }
 
-        if (!hasTriggered)
-            if (globalDistance.current < 40) setHasTriggered(true);
+        if (!hasTriggered) {
+            if (globalDistance.current < 40) {
+                setHasTriggered(true);
+            }
+        }
 
         if (hasTriggered) {
             globalDistance.current -= speed * delta;
 
+            if (audioRef.current && !audioPlaying.current) {
+                audioPlaying.current = true;
+                if (audioRef.current.context.state === 'suspended')
+                    audioRef.current.context.resume();
+                audioRef.current.play();
+            }
+
             const shakeIntensity = Math.max(0, 1 - (globalDistance.current / 32)) * 0.22;
             camera.position.x += (Math.random() - 0.5) * shakeIntensity;
             camera.position.y += (Math.random() - 0.5) * shakeIntensity;
@@ -80,6 +98,16 @@ export default function TheCreature() {
                 depthWrite={false}
                 side={THREE.DoubleSide}
             />
+
+            {currentLoop >= 4 && (
+                <PositionalAudio
+                    url="fear/snd/riser.mp3"
+                    ref={audioRef}
+                    distance={25}
+                    loop={false}
+                    autoplay={false}
+                />
+            )}
         </mesh>
     );
-}
+}