shading fix and working on animation flicker

src/components/Game.tsx

@@ -1,11 +1,5 @@
-import React, {
+import React, { useState, Suspense, useCallback, useEffect } from "react";
-  useState,
+import { Canvas } from "react-three-fiber";
-  Suspense,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-} from "react";
-import { Canvas, useLoader, useThree } from "react-three-fiber";
 import Lain, {
   LainIntro,
   LainMoveDown,
@@ -20,13 +14,10 @@ import { OrbitControls, PerspectiveCamera } from "drei";
 import Lights from "./Lights";
 import OrthoCamera from "./OrthoCamera";
 import TWEEN from "@tweenjs/tween.js";
-import moveDownSpriteSheet from "../static/sprites/jump_down.png";
-import moveUpSpriteSheet from "../static/sprites/jump_up.png";
-
 import level_sprite_directions from "../resources/level_sprite_directions.json";
 import lain_animations from "../resources/lain_animations.json";
 import level_sprite_huds from "../resources/level_sprite_huds.json";
-import * as THREE from "three";
+import Preloader from "./Preloader";
 
 type KeyCodeAssociations = {
   [keyCode: number]: string;
@@ -47,9 +38,6 @@ type LainAnimations = {
 
 const Game = () => {
   const [isLainMoving, setLainMoving] = useState(false);
-  const [lainIntro, setLainIntro] = useState(false);
-  const [lainMoveUp, setLainMoveUp] = useState(false);
-  const [lainMoveDown, setLainMoveDown] = useState(false);
   const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
   const [lainPosY, setLainPosY] = useState(-0.2);
 
@@ -212,19 +200,7 @@ const Game = () => {
 
   useEffect(animateSpriteHUDIn, []);
 
-  function Preload() {
-    const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
-    const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
-    const { gl } = useThree();
-    useLayoutEffect(() => {
-      gl.initTexture(moveDown);
-      gl.initTexture(moveUp);
-    }, [moveDown, moveUp]);
-    return null;
-  }
-
   return (
-    <>
     <Canvas concurrent>
       <PerspectiveCamera
         position={[0, cameraPosY, 3]}
@@ -232,7 +208,7 @@ const Game = () => {
       >
         <Suspense fallback={null}>
           <OrbitControls />
-            <Preload />
+          <Preloader />
           <Lain
             isLainMoving={isLainMoving}
             lainMoveState={lainMoveState}
@@ -255,7 +231,6 @@ const Game = () => {
         </Suspense>
       </PerspectiveCamera>
     </Canvas>
-    </>
   );
 };
 export default Game;

src/components/Lain.tsx

@@ -1,10 +1,4 @@
-import React, {
+import React, { Suspense, useState } from "react";
-  useCallback,
-  Suspense,
-  useEffect,
-  useState,
-  useLayoutEffect,
-} from "react";
 import { useFrame, useLoader, useThree } from "react-three-fiber";
 import * as THREE from "three";
 import introSpriteSheet from "../static/sprites/intro.png";
@@ -88,8 +82,8 @@ export const LainMoveLeft = () => {
     <LainConstructor
       sprite={moveLeftSpriteSheet}
       frameCount={47}
-      framesVertical={6}
       framesHorizontal={8}
+      framesVertical={6}
     />
   );
 };

src/components/LevelSprite.tsx

@@ -73,32 +73,18 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
     void main() {
         vec4 t1 = texture2D(tex1,vUv);
         vec4 t2 = texture2D(tex2,vUv);
-        float bias = abs(sin(timeMSeconds));
+        float bias = abs(sin(timeMSeconds / (1.6 / M_PI)));
         gl_FragColor = mix(t1, t2, bias);
     }
   `;
 
   useFrame(() => {
     if (materialRef.current) {
-      (materialRef.current! as any).uniforms.timeMSeconds.value = 1.5;
+      (materialRef.current! as any).uniforms.timeMSeconds.value =
+        (Date.now() % (Math.PI * 2000)) / 1000.0;
     }
   });
 
-  // useEffect(() => {
-  //   setInterval(() => {
-  //     if (materialRef.current) {
-  //       const currentRef = materialRef.current! as any;
-  //       if (currentRef.uniforms.alpha.value > 0.1) {
-  //         currentRef.uniforms.alpha.value = (
-  //           currentRef.uniforms.alpha.value - 0.1
-  //         ).toPrecision(1);
-  //       } else {
-  //         currentRef.uniforms.alpha.value = 1.0;
-  //       }
-  //     }
-  //   }, 125);
-  // }, []);
-
   return (
     <mesh
       position={props.position}

src/components/Preloader.tsx

@@ -0,0 +1,23 @@
+import moveDownSpriteSheet from "../static/sprites/jump_down.png";
+import moveUpSpriteSheet from "../static/sprites/jump_up.png";
+import standingSpriteSheet from "../static/sprites/standing.png";
+import moveLeftSpriteSheet from "../static/sprites/move_left.png";
+import moveRightSpriteSheet from "../static/sprites/move_right.png";
+import * as THREE from "three";
+import { useLoader, useThree } from "react-three-fiber";
+import { useLayoutEffect } from "react";
+
+const Preloader = () => {
+  const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
+  const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
+  const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
+  const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
+  const { gl } = useThree();
+  useLayoutEffect(() => {
+    gl.initTexture(moveDown);
+    gl.initTexture(moveUp);
+  }, [moveDown, moveUp, moveLeft, standingSpriteSheet, moveRight]);
+  return null;
+};
+
+export default Preloader;