diff --git a/src/components/EndScene/EndCylinder.tsx b/src/components/EndScene/EndCylinder.tsx index b4733eb..d737cb1 100644 --- a/src/components/EndScene/EndCylinder.tsx +++ b/src/components/EndScene/EndCylinder.tsx @@ -1,9 +1,9 @@ -import React from "react"; +import React, { memo } from "react"; import * as THREE from "three"; import { useLoader } from "react-three-fiber"; import mainCylinder from "../../static/sprites/end/end_cylinder_1.png"; -const EndCylinder = () => { +const EndCylinder = memo(() => { const mainCylinderTex = useLoader(THREE.TextureLoader, mainCylinder); return ( @@ -54,6 +54,6 @@ const EndCylinder = () => { ); -}; +}); export default EndCylinder; diff --git a/src/components/EndScene/EndSphere.tsx b/src/components/EndScene/EndSphere.tsx index 985e6c4..5d89972 100644 --- a/src/components/EndScene/EndSphere.tsx +++ b/src/components/EndScene/EndSphere.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from "react"; +import React, { useRef, memo } from "react"; import * as THREE from "three"; import { useFrame, useLoader } from "react-three-fiber"; import secondCylinder from "../../static/sprites/end/end_cylinder_2.png"; @@ -8,7 +8,7 @@ type EndSphereProps = { outroAnim: boolean; }; -const EndSphere = (props: EndSphereProps) => { +const EndSphere = memo((props: EndSphereProps) => { const secondCylinderTex = useLoader(THREE.TextureLoader, secondCylinder); const meshRef = useRef(); @@ -46,6 +46,6 @@ const EndSphere = (props: EndSphereProps) => { /> ); -}; +}); export default EndSphere; diff --git a/src/components/LainSpeak.tsx b/src/components/LainSpeak.tsx index f9fb687..ba96f9a 100644 --- a/src/components/LainSpeak.tsx +++ b/src/components/LainSpeak.tsx @@ -44,14 +44,22 @@ const LainSpeak = (props: LainTaKProps) => { useFrame(() => { if (audioAnalyser) { - const freq = audioAnalyser.getAverageFrequency() * 1.2; + const buffer = new Uint8Array(audioAnalyser.analyser.fftSize / 2); + audioAnalyser.analyser.getByteTimeDomainData(buffer); + + let rms = 0; + for (let i = 0; i < buffer.length; i++) { + rms += buffer[i] * buffer[i]; + } + + rms = Math.sqrt(rms / buffer.length); if (mouthRef.current) { - if (freq >= 50) { + if (rms >= 130) { mouthRef.current.map = mouth4Tex; - } else if (freq >= 40 && freq <= 50) { + } else if (rms >= 129 && rms <= 130) { mouthRef.current.map = mouth3Tex; - } else if (freq >= 30 && freq <= 40) { + } else if (rms > 128 && rms <= 129) { mouthRef.current.map = mouth2Tex; } else { mouthRef.current.map = mouth1Tex; diff --git a/src/components/MediaPlayer.tsx b/src/components/MediaPlayer.tsx index d8eb50c..8e53493 100644 --- a/src/components/MediaPlayer.tsx +++ b/src/components/MediaPlayer.tsx @@ -67,7 +67,7 @@ const MediaPlayer = () => { return ( <> -