mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
framerate cap test implementation
This commit is contained in:
parent
356d75e78f
commit
970d0fd605
23 changed files with 289 additions and 162 deletions
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
57
src/utils/CustomTextureLoader.ts
Normal file
57
src/utils/CustomTextureLoader.ts
Normal file
|
@ -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;
|
Loading…
Reference in a new issue