framerate cap test implementation

src/components/BootScene/BootAnimation.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useRef, useState} from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import bootLof from "../../static/sprites/boot/boot_lof.png";
 import bootBottomBarLeft from "../../static/sprites/boot/boot_bottom_bar_left.png";
 import bootBottomBarRight from "../../static/sprites/boot/boot_bottom_bar_right.png";
@@ -11,8 +11,8 @@ import bootStatusTexts from "../../static/sprites/boot/boot_status_texts.png";
 import bootBackgroundText from "../../static/sprites/boot/boot_background_text.png";
 import bootBackgroundDistortedTex from "../../static/sprites/boot/distorted_text.png";
 
-import {useFrame, useLoader} from "react-three-fiber";
-import {a, useSpring} from "@react-spring/three";
+import { useFrame, useLoader } from "react-three-fiber";
+import { a, useSpring } from "@react-spring/three";
 import * as THREE from "three";
 import sleep from "../../utils/sleep";
 
@@ -55,52 +55,58 @@ const BootAnimation = (props: BootAnimationProps) => {
   const graySquareRef = useRef<THREE.SpriteMaterial>();
   const arrowRef = useRef<THREE.Object3D>();
 
-  useFrame(() => {
-    if (graySquareRef.current) {
-      graySquareRef.current.rotation -= 0.1;
-    }
-    if (arrowRef.current && Date.now() % 5 === 0) {
-      arrowRef.current.position.y =
-        arrowRef.current.position.y === -1.04 ? -0.96 : -1.04;
-    }
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
 
-    if (
-      backgroundFloatingTextShown &&
-      firstBackgroundTextRef.current &&
-      sndBackgroundTextRef.current &&
-      firstDistortedBackgroundTextRef.current &&
-      sndDistortedBackgroundTextRef.current
-    ) {
-      if (firstBackgroundTextRef.current.position.y > 3.5) {
-        firstBackgroundTextRef.current.position.y = -3.5;
-        firstBackgroundTextRef.current.position.x = -0.85;
-      } else {
-        firstBackgroundTextRef.current.position.y += 0.01;
-        firstBackgroundTextRef.current.position.x += 0.001;
+    if (deltaRef.current > 0.016) {
+      if (graySquareRef.current) {
+        graySquareRef.current.rotation -= 0.1;
       }
-      if (sndBackgroundTextRef.current.position.y > 3.5) {
-        sndBackgroundTextRef.current.position.y = -3.5;
-        sndBackgroundTextRef.current.position.x = -0.85;
-      } else {
-        sndBackgroundTextRef.current.position.y += 0.01;
-        sndBackgroundTextRef.current.position.x += 0.001;
+      if (arrowRef.current && Date.now() % 5 === 0) {
+        arrowRef.current.position.y =
+          arrowRef.current.position.y === -1.04 ? -0.96 : -1.04;
       }
 
-      if (firstDistortedBackgroundTextRef.current.position.y > 2.8) {
-        firstDistortedBackgroundTextRef.current.position.y = -3;
-        firstDistortedBackgroundTextRef.current.position.x = 0;
-      } else {
-        firstDistortedBackgroundTextRef.current.position.y += 0.025;
-        firstDistortedBackgroundTextRef.current.position.x -= 0.013;
-      }
+      if (
+        backgroundFloatingTextShown &&
+        firstBackgroundTextRef.current &&
+        sndBackgroundTextRef.current &&
+        firstDistortedBackgroundTextRef.current &&
+        sndDistortedBackgroundTextRef.current
+      ) {
+        if (firstBackgroundTextRef.current.position.y > 3.5) {
+          firstBackgroundTextRef.current.position.y = -3.5;
+          firstBackgroundTextRef.current.position.x = -0.85;
+        } else {
+          firstBackgroundTextRef.current.position.y += 0.01;
+          firstBackgroundTextRef.current.position.x += 0.001;
+        }
+        if (sndBackgroundTextRef.current.position.y > 3.5) {
+          sndBackgroundTextRef.current.position.y = -3.5;
+          sndBackgroundTextRef.current.position.x = -0.85;
+        } else {
+          sndBackgroundTextRef.current.position.y += 0.01;
+          sndBackgroundTextRef.current.position.x += 0.001;
+        }
 
-      if (sndDistortedBackgroundTextRef.current.position.y > 2.8) {
-        sndDistortedBackgroundTextRef.current.position.y = -3;
-        sndDistortedBackgroundTextRef.current.position.x = 0;
-      } else {
-        sndDistortedBackgroundTextRef.current.position.y += 0.025;
-        sndDistortedBackgroundTextRef.current.position.x -= 0.013;
+        if (firstDistortedBackgroundTextRef.current.position.y > 2.8) {
+          firstDistortedBackgroundTextRef.current.position.y = -3;
+          firstDistortedBackgroundTextRef.current.position.x = 0;
+        } else {
+          firstDistortedBackgroundTextRef.current.position.y += 0.025;
+          firstDistortedBackgroundTextRef.current.position.x -= 0.013;
+        }
+
+        if (sndDistortedBackgroundTextRef.current.position.y > 2.8) {
+          sndDistortedBackgroundTextRef.current.position.y = -3;
+          sndDistortedBackgroundTextRef.current.position.x = 0;
+        } else {
+          sndDistortedBackgroundTextRef.current.position.y += 0.025;
+          sndDistortedBackgroundTextRef.current.position.x -= 0.013;
+        }
       }
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/components/EndScene/EndSelectionScreen.tsx

@@ -46,11 +46,11 @@ const EndSelectionScreen = memo((props: EndSelectionScreenProps) => {
   const lastTime = useRef(0);
 
   const middleBoxRef = useRef<THREE.Object3D>();
-  useFrame(() => {
+  useFrame((state, delta) => {
     middleSpritesheetAnimator.animate();
     circleSpritesheetAnimator.animate();
     if (middleBoxRef.current) {
-      middleBoxRef.current.rotation.z -= 0.005;
+      middleBoxRef.current.rotation.z -= delta / 5;
     }
     const now = Date.now();
     if (now > lastTime.current + 15000) {

src/components/EndScene/EndSphere.tsx

@@ -12,8 +12,12 @@ const EndSphere = memo((props: EndSphereProps) => {
   const secondCylinderTex = useLoader(THREE.TextureLoader, secondCylinder);
 
   const meshRef = useRef<THREE.Object3D>();
-  useFrame(() => {
-    if (meshRef.current) {
+  const deltaRef = useRef(0);
+
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
+
+    if (deltaRef.current > 0.016 && meshRef.current) {
       meshRef.current.rotation.y += 0.005;
       if (
         props.outroAnim &&
@@ -25,6 +29,7 @@ const EndSphere = memo((props: EndSphereProps) => {
         meshRef.current.scale.y -= 0.025;
         meshRef.current.scale.z -= 0.025;
       }
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/components/GateScene/GateMiddleObject/Mirror.tsx

@@ -31,12 +31,19 @@ const Mirror = (props: MirrorProps) => {
     return mirrorTex;
   }, [mirrorTex]);
 
-  useFrame(() => {
-    if (mirrorGroupRef.current) {
-      mirrorGroupRef.current.rotation.y -= 0.03;
-    }
-    if (materialRef.current) {
-      tex.offset.x -= 0.0025;
+  const deltaRef = useRef(0);
+
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
+    if (deltaRef.current > 0.016) {
+      if (mirrorGroupRef.current) {
+        mirrorGroupRef.current.rotation.y -= 0.03;
+      }
+      if (materialRef.current) {
+        tex.offset.x -= 0.0025;
+      }
+
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/components/MainScene/GrayPlanes/GrayPlane.tsx

@@ -9,9 +9,9 @@ type GrayPlaneProps = {
 const GrayPlane = (props: GrayPlaneProps) => {
   const meshRef = useRef<THREE.Object3D>();
 
-  useFrame(() => {
+  useFrame((state, delta) => {
     if (meshRef.current) {
-      meshRef.current.rotation.y += 0.03;
+      meshRef.current.rotation.y += delta / 4;
     }
   });
 

src/components/MainScene/GrayPlanes/GrayPlanes.tsx

@@ -19,8 +19,8 @@ const GrayPlanes = memo(() => {
     []
   );
 
-  useFrame(() => {
-    grayPlaneGroupRef.current!.rotation.y -= 0.01;
+  useFrame((state, delta) => {
+    grayPlaneGroupRef.current!.rotation.y -= delta / 1.5;
   });
 
   return (

src/components/MainScene/HUD.tsx

@@ -46,27 +46,36 @@ const HUD = memo(() => {
     useRef<THREE.Object3D>(),
   ]);
 
-  useFrame(() => {
-    if (longHudRef.current && bigHudRef.current && boringHudRef.current) {
-      const hud = currentHudRef.current;
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
 
-      longHudRef.current.position.x = lerp(
-        longHudRef.current.position.x,
-        activeRef.current ? hud.long.position[0] : hud.long.initial_position[0],
-        0.12
-      );
-      boringHudRef.current.position.x = lerp(
-        boringHudRef.current.position.x,
-        activeRef.current
-          ? hud.boring.position[0]
-          : hud.boring.initial_position[0],
-        0.12
-      );
-      bigHudRef.current.position.x = lerp(
-        bigHudRef.current.position.x,
-        activeRef.current ? hud.big.position[0] : hud.big.initial_position[0],
-        0.12
-      );
+    if (deltaRef.current > 0.016) {
+      if (longHudRef.current && bigHudRef.current && boringHudRef.current) {
+        const hud = currentHudRef.current;
+
+        longHudRef.current.position.x = lerp(
+          longHudRef.current.position.x,
+          activeRef.current
+            ? hud.long.position[0]
+            : hud.long.initial_position[0],
+          0.12
+        );
+        boringHudRef.current.position.x = lerp(
+          boringHudRef.current.position.x,
+          activeRef.current
+            ? hud.boring.position[0]
+            : hud.boring.initial_position[0],
+          0.12
+        );
+        bigHudRef.current.position.x = lerp(
+          bigHudRef.current.position.x,
+          activeRef.current ? hud.big.position[0] : hud.big.initial_position[0],
+          0.12
+        );
+      }
+
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/components/MainScene/Lain.tsx

@@ -416,9 +416,15 @@ const Lain = (props: LainProps) => {
     }
   }, [glowColor, wordSelected]);
 
-  useFrame(() => {
-    if (lainRef.current)
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
+
+    if (deltaRef.current > 0.016 && lainRef.current) {
       lainRef.current.material.color.lerp(regularColor, 0.07);
+
+      deltaRef.current = deltaRef.current % 0.016;
+    }
   });
 
   const subscene = useStore((state) => state.mainSubscene);

src/components/MainScene/MiddleRing/MiddleRing.tsx

@@ -168,24 +168,31 @@ const MiddleRing = () => {
   const middleRingRef = useRef<THREE.Object3D>();
   const middleRingPartRef = useRef<THREE.Object3D>();
 
-  useFrame(() => {
-    if (middleRingMaterialRef.current) {
-      middleRingMaterialRef.current.uniforms.uTime.value = clock.getElapsedTime();
-      wobbleAmpRef.current = lerp(wobbleAmpRef.current, wobbleAmp, 0.1);
-      noiseAmpRef.current = lerp(noiseAmpRef.current, noiseAmp, 0.1);
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
 
-      middleRingMaterialRef.current.uniforms.wobbleStrength.value =
-        wobbleAmpRef.current;
-      middleRingMaterialRef.current.uniforms.noiseAmp.value =
-        noiseAmpRef.current;
+    if (deltaRef.current > 0.016) {
+      if (middleRingMaterialRef.current) {
+        middleRingMaterialRef.current.uniforms.uTime.value = clock.getElapsedTime();
+        wobbleAmpRef.current = lerp(wobbleAmpRef.current, wobbleAmp, 0.1);
+        noiseAmpRef.current = lerp(noiseAmpRef.current, noiseAmp, 0.1);
 
-      middleRingMaterialRef.current.needsUpdate = true;
-    }
-    if (rotating && middleRingRef.current) {
-      middleRingRef.current!.rotation.y += 0.05;
-    }
-    if (rotating && middleRingPartRef.current) {
-      middleRingPartRef.current!.rotation.y += 0.05;
+        middleRingMaterialRef.current.uniforms.wobbleStrength.value =
+          wobbleAmpRef.current;
+        middleRingMaterialRef.current.uniforms.noiseAmp.value =
+          noiseAmpRef.current;
+
+        middleRingMaterialRef.current.needsUpdate = true;
+      }
+      if (rotating && middleRingRef.current) {
+        middleRingRef.current!.rotation.y += 0.05;
+      }
+      if (rotating && middleRingPartRef.current) {
+        middleRingPartRef.current!.rotation.y += 0.05;
+      }
+
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/components/MainScene/Popups/About.tsx

@@ -12,9 +12,9 @@ const About = () => {
 
   const bgRef = useRef<THREE.Sprite>();
 
-  useFrame(() => {
+  useFrame((state, delta) => {
     if (bgRef.current) {
-      bgRef.current.position.y += 0.01;
+      bgRef.current.position.y += delta;
       if (Math.round(bgRef.current.position.y) === 14) {
         setShowingAbout(false);
       }

src/components/MainScene/Site/NodeAnimations/NodeExplosion/GoldNode.tsx

@@ -68,23 +68,23 @@ const GoldNode = (props: GoldNodeProps) => {
     }
   }, [activeNodeName]);
 
-  const r = useRef<THREE.Object3D>();
+  const goldNodeRef = useRef<THREE.Object3D>();
 
   const regularTex = useLoader(THREE.TextureLoader, tex![0]);
   const goldTex = useLoader(THREE.TextureLoader, tex![1]);
 
   useEffect(() => {
-    if (r.current && !props.visible) {
-      r.current.rotation.x = Math.PI / 2;
-      r.current.rotation.y = 0;
-      r.current.rotation.z = Math.PI / 2 - 0.3;
+    if (goldNodeRef.current && !props.visible) {
+      goldNodeRef.current.rotation.x = Math.PI / 2;
+      goldNodeRef.current.rotation.y = 0;
+      goldNodeRef.current.rotation.z = Math.PI / 2 - 0.3;
     }
   }, [props.visible]);
 
-  useFrame(() => {
-    if (r.current && props.visible) {
-      r.current.rotation.y -= 0.03;
-      r.current.rotation.z += 0.03;
+  useFrame((state, delta) => {
+    if (goldNodeRef.current && props.visible) {
+      goldNodeRef.current.rotation.y -= delta * 2;
+      goldNodeRef.current.rotation.z += delta * 2;
     }
   });
 
@@ -94,7 +94,7 @@ const GoldNode = (props: GoldNodeProps) => {
       position={[-0.155, -0.45, 0]}
       rotation={[Math.PI / 2, 0, Math.PI / 2 - 0.3]}
       scale={[-0.1 / 1.15, 0.2 / 1.35, 0.1 / 1.15]}
-      ref={r}
+      ref={goldNodeRef}
     >
       <meshBasicMaterial
         attach="material"

src/components/MainScene/Site/NodeAnimations/NodeRip/TriangleNode.tsx

@@ -14,9 +14,9 @@ const TriangleNode = (props: TriangleNodeProps) => {
 
   const triangleNodeRef = useRef<THREE.Object3D>();
 
-  useFrame(() => {
+  useFrame((state, delta) => {
     if (triangleNodeRef.current && props.shouldAnimate) {
-      triangleNodeRef.current.position.z += 0.05;
+      triangleNodeRef.current.position.z += delta * 2.8;
     }
   });
 

src/components/MainScene/Site/PurpleRing.tsx

@@ -215,8 +215,9 @@ const PurpleRing = memo((props: PurpleRingProps) => {
     `;
 
   const matRef = useRef<THREE.ShaderMaterial>();
-  useFrame(() => {
-    purpleRingRef.current!.rotation.y += 0.005;
+
+  useFrame((state, delta) => {
+    purpleRingRef.current!.rotation.y += delta / 3;
   });
 
   useEffect(() => {

src/components/MainScene/Starfield/IntroStar.tsx

@@ -49,10 +49,19 @@ const IntroStar = (props: IntroStarProps) => {
 
   const amp = useRef(Math.random() / 10);
 
-  useFrame(() => {
-    if (starRef.current && starRef.current.visible) {
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
+
+    if (
+      deltaRef.current > 0.016 &&
+      starRef.current &&
+      starRef.current.visible
+    ) {
       starRef.current.position.y += 0.25 + amp.current;
       if (starRef.current.position.y > 40) starRef.current.visible = false;
+
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/components/MainScene/Starfield/Star.tsx

@@ -53,13 +53,18 @@ const Star = (props: StarProps) => {
 
   const introAmpRef = useRef(props.shouldIntro ? 1 : 0);
 
-  useFrame(() => {
-    if (starRef.current) {
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
+
+    if (deltaRef.current > 0.016 && starRef.current) {
       if (starRef.current.position.y > 4) {
         starRef.current.position.y = props.position[1];
       }
       starRef.current.position.y += 0.01 + amp.current + introAmpRef.current;
       introAmpRef.current = lerp(introAmpRef.current, 0, 0.01);
+
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/components/MainScene/YellowOrb.tsx

@@ -43,8 +43,10 @@ const YellowOrb = memo((props: YellowOrbProps) => {
 
   const bigOrbScale = useMemo(() => new THREE.Vector3(2, 2, 2), []);
 
-  useFrame(() => {
-    if (props.visible) {
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
+    if (deltaRef.current > 0.016 && props.visible) {
       const orbPosFirst = curves[0].getPoint(idxRef.current / 250);
       const orbPosSecond = curves[1].getPoint(idxRef.current / 250);
 
@@ -110,6 +112,7 @@ const YellowOrb = memo((props: YellowOrbProps) => {
           orbRef.current.position.y = orbPosSecond.y;
         }
       }
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/components/MediaScene/Selectables/LeftSide/Cube.tsx

@@ -11,9 +11,9 @@ const Cube = memo((props: ShapeProps) => {
 
   const cubeRef = useRef<THREE.Object3D>();
 
-  useFrame(() => {
+  useFrame((state, delta) => {
     if (props.selectable && props.active) {
-      cubeRef.current!.rotation.y -= 0.015;
+      cubeRef.current!.rotation.y -= delta;
     } else {
       cubeRef.current!.rotation.y = 0;
     }

src/components/MediaScene/Selectables/LeftSide/TriangularPrism.tsx

@@ -23,9 +23,9 @@ const TriangularPrism = memo((props: ShapeProps) => {
 
   const prismRef = useRef<THREE.Object3D>();
 
-  useFrame(() => {
+  useFrame((state, delta) => {
     if (props.selectable && props.active) {
-      prismRef.current!.rotation.y -= 0.015;
+      prismRef.current!.rotation.y -= delta;
     } else {
       prismRef.current!.rotation.y = 0;
     }

src/components/SsknScene/SsknIcon.tsx

@@ -8,10 +8,10 @@ const SsknIcon = memo(() => {
   const ssknIconRef = useRef<THREE.Object3D>();
   const ssknIconShadowRef = useRef<THREE.Object3D>();
 
-  useFrame(() => {
+  useFrame((state, delta) => {
     if (ssknIconRef.current && ssknIconShadowRef.current) {
-      ssknIconRef.current.rotation.y += 0.03;
-      ssknIconShadowRef.current.rotation.y += 0.03;
+      ssknIconRef.current.rotation.y += delta * 2;
+      ssknIconShadowRef.current.rotation.y += delta * 2;
     }
   });
   return (

src/dom-components/Game.tsx

@@ -20,7 +20,6 @@ import { Canvas } from "react-three-fiber";
 import Preloader from "../components/Preloader";
 import InputHandler from "../components/InputHandler";
 import MediaPlayer from "../components/MediaPlayer";
-import Header from "./Header";
 
 const Game = () => {
   const currentScene = useStore((state) => state.currentScene);
@@ -89,7 +88,7 @@ const Game = () => {
         className="main-canvas"
       >
         <Suspense fallback={null}>
-          <Preloader />
+          {/* <Preloader /> */}
           {dispatchScene[currentScene as keyof typeof dispatchScene]}
           <InputHandler />
         </Suspense>

src/scenes/EndScene.tsx

@@ -21,8 +21,11 @@ const EndScene = () => {
   const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
   const audioAnalyser = useStore((state) => state.audioAnalyser);
 
-  useFrame(() => {
-    if (mainCylinderRef.current) {
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
+
+    if (deltaRef.current > 0.016 && mainCylinderRef.current) {
       mainCylinderRef.current.rotation.y -= 0.01;
       if (sceneOutro) {
         mainCylinderRef.current.position.z -= 0.25;
@@ -31,6 +34,8 @@ const EndScene = () => {
           mainCylinderRef.current.scale.y -= 0.01;
         }
       }
+
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/scenes/MainScene.tsx

@@ -79,42 +79,50 @@ const MainScene = () => {
   const [introFinished, setIntroFinished] = useState(false);
   const introFinishedRef = useRef(false);
 
-  useFrame(() => {
-    if (!introFinished && intro && introWrapperRef.current) {
-      if (introWrapperRef.current.position.z === -10) playAudio(audio.sound32);
-      if (
-        Math.round(introWrapperRef.current.position.z) === -3 &&
-        !starfieldIntroRef.current
-      ) {
-        setStarfieldIntro(true);
-        starfieldIntroRef.current = true;
-      }
-      if (
-        Math.round(introWrapperRef.current.position.z) === -1 &&
-        !lainIntroRef.current
-      ) {
-        setLainIntroAnim(true);
-        lainIntroRef.current = true;
+  const deltaRef = useRef(0);
+  useFrame((state, delta) => {
+    deltaRef.current += delta;
+
+    if (deltaRef.current > 0.016) {
+      if (!introFinished && intro && introWrapperRef.current) {
+        if (introWrapperRef.current.position.z === -10)
+          playAudio(audio.sound32);
+        if (
+          Math.round(introWrapperRef.current.position.z) === -3 &&
+          !starfieldIntroRef.current
+        ) {
+          setStarfieldIntro(true);
+          starfieldIntroRef.current = true;
+        }
+        if (
+          Math.round(introWrapperRef.current.position.z) === -1 &&
+          !lainIntroRef.current
+        ) {
+          setLainIntroAnim(true);
+          lainIntroRef.current = true;
+        }
+
+        if (introWrapperRef.current.position.z < 0) {
+          introWrapperRef.current.position.z += 0.05;
+        }
+        if (introWrapperRef.current.rotation.x > 0) {
+          introWrapperRef.current.rotation.x -= 0.008;
+        }
+
+        if (
+          !introFinishedRef.current &&
+          !(
+            introWrapperRef.current.rotation.x > 0 &&
+            introWrapperRef.current.position.z < 0
+          )
+        ) {
+          setIntroFinished(true);
+          introFinishedRef.current = true;
+          setInputCooldown(0);
+        }
       }
 
-      if (introWrapperRef.current.position.z < 0) {
-        introWrapperRef.current.position.z += 0.05;
-      }
-      if (introWrapperRef.current.rotation.x > 0) {
-        introWrapperRef.current.rotation.x -= 0.008;
-      }
-
-      if (
-        !introFinishedRef.current &&
-        !(
-          introWrapperRef.current.rotation.x > 0 &&
-          introWrapperRef.current.position.z < 0
-        )
-      ) {
-        setIntroFinished(true);
-        introFinishedRef.current = true;
-        setInputCooldown(0);
-      }
+      deltaRef.current = deltaRef.current % 0.016;
     }
   });
 

src/utils/CustomTextureLoader.ts

@@ -0,0 +1,57 @@
+import {
+  Loader,
+  RGBAFormat,
+  RGBFormat,
+  ImageLoader,
+  Texture,
+  LinearFilter,
+  NearestFilter,
+  ClampToEdgeWrapping,
+} from "three";
+
+/*
+
+custom implementation of TextureLoader that automatically sets minFilter to NearestFilter for proper WebGL1 support.
+
+*/
+export class CustomTextureLoader extends Loader {
+  load = (
+    url: string,
+    onLoad?: (texture: Texture) => void,
+    onProgress?: (event: ProgressEvent) => void,
+    onError?: (event: ErrorEvent) => void
+  ): Texture => {
+    const texture = new Texture();
+
+    texture.generateMipmaps = false;
+    texture.wrapS = texture.wrapT = ClampToEdgeWrapping;
+    texture.minFilter = LinearFilter;
+
+    const loader = new ImageLoader(this.manager);
+    loader.setCrossOrigin(this.crossOrigin);
+    loader.setPath(this.path);
+
+    loader.load(
+      url,
+      function (image: HTMLImageElement) {
+        texture.image = image;
+
+        const isJPEG =
+          url.search(/\.jpe?g($|\?)/i) > 0 ||
+          url.search(/^data:image\/jpeg/) === 0;
+
+        texture.format = isJPEG ? RGBFormat : RGBAFormat;
+        texture.needsUpdate = true;
+
+        if (onLoad !== undefined) {
+          onLoad(texture);
+        }
+      },
+      onProgress,
+      onError
+    );
+    return texture;
+  };
+}
+
+export default CustomTextureLoader;