diff --git a/src/components/BootScene/BootAnimation.tsx b/src/components/BootScene/BootAnimation.tsx index b26e98f..07cbd05 100644 --- a/src/components/BootScene/BootAnimation.tsx +++ b/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(); const arrowRef = useRef(); - 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; } }); diff --git a/src/components/EndScene/EndSelectionScreen.tsx b/src/components/EndScene/EndSelectionScreen.tsx index 1053530..1456579 100644 --- a/src/components/EndScene/EndSelectionScreen.tsx +++ b/src/components/EndScene/EndSelectionScreen.tsx @@ -46,11 +46,11 @@ const EndSelectionScreen = memo((props: EndSelectionScreenProps) => { const lastTime = useRef(0); const middleBoxRef = useRef(); - 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) { diff --git a/src/components/EndScene/EndSphere.tsx b/src/components/EndScene/EndSphere.tsx index 5d89972..b19b36c 100644 --- a/src/components/EndScene/EndSphere.tsx +++ b/src/components/EndScene/EndSphere.tsx @@ -12,8 +12,12 @@ const EndSphere = memo((props: EndSphereProps) => { const secondCylinderTex = useLoader(THREE.TextureLoader, secondCylinder); const meshRef = useRef(); - 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; } }); diff --git a/src/components/GateScene/GateMiddleObject/Mirror.tsx b/src/components/GateScene/GateMiddleObject/Mirror.tsx index 3139dab..d816d23 100644 --- a/src/components/GateScene/GateMiddleObject/Mirror.tsx +++ b/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; } }); diff --git a/src/components/MainScene/GrayPlanes/GrayPlane.tsx b/src/components/MainScene/GrayPlanes/GrayPlane.tsx index f389cbf..7c368fc 100644 --- a/src/components/MainScene/GrayPlanes/GrayPlane.tsx +++ b/src/components/MainScene/GrayPlanes/GrayPlane.tsx @@ -9,9 +9,9 @@ type GrayPlaneProps = { const GrayPlane = (props: GrayPlaneProps) => { const meshRef = useRef(); - useFrame(() => { + useFrame((state, delta) => { if (meshRef.current) { - meshRef.current.rotation.y += 0.03; + meshRef.current.rotation.y += delta / 4; } }); diff --git a/src/components/MainScene/GrayPlanes/GrayPlanes.tsx b/src/components/MainScene/GrayPlanes/GrayPlanes.tsx index 9b94166..1606f68 100644 --- a/src/components/MainScene/GrayPlanes/GrayPlanes.tsx +++ b/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 ( diff --git a/src/components/MainScene/HUD.tsx b/src/components/MainScene/HUD.tsx index 0b66675..523412d 100644 --- a/src/components/MainScene/HUD.tsx +++ b/src/components/MainScene/HUD.tsx @@ -46,27 +46,36 @@ const HUD = memo(() => { useRef(), ]); - 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; } }); diff --git a/src/components/MainScene/Lain.tsx b/src/components/MainScene/Lain.tsx index b7ff65a..dcf7d21 100644 --- a/src/components/MainScene/Lain.tsx +++ b/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); diff --git a/src/components/MainScene/MiddleRing/MiddleRing.tsx b/src/components/MainScene/MiddleRing/MiddleRing.tsx index 1c8ddaf..b2a9667 100644 --- a/src/components/MainScene/MiddleRing/MiddleRing.tsx +++ b/src/components/MainScene/MiddleRing/MiddleRing.tsx @@ -168,24 +168,31 @@ const MiddleRing = () => { const middleRingRef = useRef(); const middleRingPartRef = useRef(); - 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; } }); diff --git a/src/components/MainScene/Popups/About.tsx b/src/components/MainScene/Popups/About.tsx index 42ba88a..93a1128 100644 --- a/src/components/MainScene/Popups/About.tsx +++ b/src/components/MainScene/Popups/About.tsx @@ -12,9 +12,9 @@ const About = () => { const bgRef = useRef(); - 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); } diff --git a/src/components/MainScene/Site/NodeAnimations/NodeExplosion/GoldNode.tsx b/src/components/MainScene/Site/NodeAnimations/NodeExplosion/GoldNode.tsx index 125e3ca..1b6bbf5 100644 --- a/src/components/MainScene/Site/NodeAnimations/NodeExplosion/GoldNode.tsx +++ b/src/components/MainScene/Site/NodeAnimations/NodeExplosion/GoldNode.tsx @@ -68,23 +68,23 @@ const GoldNode = (props: GoldNodeProps) => { } }, [activeNodeName]); - const r = useRef(); + const goldNodeRef = useRef(); 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} > { const triangleNodeRef = useRef(); - useFrame(() => { + useFrame((state, delta) => { if (triangleNodeRef.current && props.shouldAnimate) { - triangleNodeRef.current.position.z += 0.05; + triangleNodeRef.current.position.z += delta * 2.8; } }); diff --git a/src/components/MainScene/Site/PurpleRing.tsx b/src/components/MainScene/Site/PurpleRing.tsx index 30c6386..bea8e17 100644 --- a/src/components/MainScene/Site/PurpleRing.tsx +++ b/src/components/MainScene/Site/PurpleRing.tsx @@ -215,8 +215,9 @@ const PurpleRing = memo((props: PurpleRingProps) => { `; const matRef = useRef(); - useFrame(() => { - purpleRingRef.current!.rotation.y += 0.005; + + useFrame((state, delta) => { + purpleRingRef.current!.rotation.y += delta / 3; }); useEffect(() => { diff --git a/src/components/MainScene/Starfield/IntroStar.tsx b/src/components/MainScene/Starfield/IntroStar.tsx index 45b3f1a..3388356 100644 --- a/src/components/MainScene/Starfield/IntroStar.tsx +++ b/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; } }); diff --git a/src/components/MainScene/Starfield/Star.tsx b/src/components/MainScene/Starfield/Star.tsx index d6d3dea..33aa07c 100644 --- a/src/components/MainScene/Starfield/Star.tsx +++ b/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; } }); diff --git a/src/components/MainScene/YellowOrb.tsx b/src/components/MainScene/YellowOrb.tsx index f4e96f8..4160c01 100644 --- a/src/components/MainScene/YellowOrb.tsx +++ b/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; } }); diff --git a/src/components/MediaScene/Selectables/LeftSide/Cube.tsx b/src/components/MediaScene/Selectables/LeftSide/Cube.tsx index b142fbf..fad15bc 100644 --- a/src/components/MediaScene/Selectables/LeftSide/Cube.tsx +++ b/src/components/MediaScene/Selectables/LeftSide/Cube.tsx @@ -11,9 +11,9 @@ const Cube = memo((props: ShapeProps) => { const cubeRef = useRef(); - 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; } diff --git a/src/components/MediaScene/Selectables/LeftSide/TriangularPrism.tsx b/src/components/MediaScene/Selectables/LeftSide/TriangularPrism.tsx index 60237b2..ee55fd1 100644 --- a/src/components/MediaScene/Selectables/LeftSide/TriangularPrism.tsx +++ b/src/components/MediaScene/Selectables/LeftSide/TriangularPrism.tsx @@ -23,9 +23,9 @@ const TriangularPrism = memo((props: ShapeProps) => { const prismRef = useRef(); - 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; } diff --git a/src/components/SsknScene/SsknIcon.tsx b/src/components/SsknScene/SsknIcon.tsx index f34fe1b..a4d708f 100644 --- a/src/components/SsknScene/SsknIcon.tsx +++ b/src/components/SsknScene/SsknIcon.tsx @@ -8,10 +8,10 @@ const SsknIcon = memo(() => { const ssknIconRef = useRef(); const ssknIconShadowRef = useRef(); - 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 ( diff --git a/src/dom-components/Game.tsx b/src/dom-components/Game.tsx index f505ba6..7191ba2 100644 --- a/src/dom-components/Game.tsx +++ b/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" > - + {/* */} {dispatchScene[currentScene as keyof typeof dispatchScene]} diff --git a/src/scenes/EndScene.tsx b/src/scenes/EndScene.tsx index c5fa0e4..760ccf8 100644 --- a/src/scenes/EndScene.tsx +++ b/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; } }); diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 5ad81a7..59166b2 100644 --- a/src/scenes/MainScene.tsx +++ b/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; } }); diff --git a/src/utils/CustomTextureLoader.ts b/src/utils/CustomTextureLoader.ts new file mode 100644 index 0000000..a356f36 --- /dev/null +++ b/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;