endroll components more or less done

src/components/EndScene/EndSelectionScreen.tsx

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from "react";
+import middleSpritesheet from "../../static/sprite/end_middle_spritesheet.png";
+import middleLain from "../../static/sprite/end_middle_lain.png";
+import circleSpritesheet from "../../static/sprite/end_circle_spritesheet.png";
+import endText from "../../static/sprite/end_end_text.png";
+import continueText from "../../static/sprite/end_continue_text.png";
+import { useFrame, useLoader } from "react-three-fiber";
+import * as THREE from "three";
+import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
+import { a, useSpring } from "@react-spring/three";
+
+const EndSelectionScreen = () => {
+  const middleSpritesheetTex: any = useLoader(
+    THREE.TextureLoader,
+    middleSpritesheet
+  );
+  const circleSpritesheetTex: any = useLoader(
+    THREE.TextureLoader,
+    circleSpritesheet
+  );
+  const endTextTex = useLoader(THREE.TextureLoader, endText);
+  const continueTextTex = useLoader(THREE.TextureLoader, continueText);
+  const middleLainTex = useLoader(THREE.TextureLoader, middleLain);
+
+  const [middleSpritesheetAnimator] = useState(() => {
+    const anim = new PlainAnimator(middleSpritesheetTex, 1, 4, 4, 24);
+    anim.init(0);
+    return anim;
+  });
+
+  const [circleSpritesheetAnimator] = useState(() => {
+    const anim = new PlainAnimator(circleSpritesheetTex, 4, 2, 8, 24);
+    anim.init(0);
+    return anim;
+  });
+
+  const [lainVisible, setLainVisible] = useState(0);
+
+  const lastTime = useRef(0);
+
+  const middleBoxRef = useRef<THREE.Object3D>();
+  useFrame(() => {
+    middleSpritesheetAnimator.animate();
+    circleSpritesheetAnimator.animate();
+    if (middleBoxRef.current) {
+      middleBoxRef.current.rotation.z -= 0.005;
+    }
+    const now = Date.now();
+    if (now > lastTime.current + 15000) {
+      lastTime.current = now;
+      setLainVisible(Number(!lainVisible));
+    }
+  });
+
+  const { lainOpacityToggle } = useSpring({
+    lainOpacityToggle: lainVisible,
+    config: { duration: 500 },
+  });
+
+  const lainOpacity = lainOpacityToggle.to([0, 1], [0, 0.5]);
+
+  return (
+    <>
+      <sprite position={[-3.5, 0, -3]} scale={[10, 0.8, 0]}>
+        <spriteMaterial attach="material" map={middleSpritesheetTex} />
+      </sprite>
+      <sprite position={[3.5, 0, -3]} scale={[10, 0.8, 0]}>
+        <spriteMaterial attach="material" map={middleSpritesheetTex} />
+      </sprite>
+      <mesh scale={[0.4, 0.4, 0]} ref={middleBoxRef} position={[0, 0, 1]}>
+        <boxBufferGeometry attach="geometry" />
+        <meshBasicMaterial attach="material" color={0x000000} />
+      </mesh>
+      <sprite position={[0, 1, 0]} scale={[0.5, 0.5, 0]}>
+        <spriteMaterial attach="material" map={circleSpritesheetTex} />
+      </sprite>
+      <sprite position={[0, 1.6, 0]} scale={[1.5, 0.5, 0]}>
+        <spriteMaterial attach="material" map={endTextTex} />
+      </sprite>
+      <sprite position={[0, -1, 0]} scale={[2, 0.25, 0]}>
+        <spriteMaterial attach="material" map={continueTextTex} />
+      </sprite>
+      <sprite position={[0, 0, 0]} scale={[4, 0.5, 0]}>
+        <a.spriteMaterial
+          attach="material"
+          map={middleLainTex}
+          opacity={lainOpacity}
+        />
+      </sprite>
+    </>
+  );
+};
+
+export default EndSelectionScreen;

src/components/EndScene/EndSphere.tsx

@@ -5,6 +5,7 @@ import secondCylinder from "../../static/sprite/end_cylinder_2.png";
 
 type EndSphereProps = {
   position: number[];
+  outroAnim: boolean;
 };
 
 const EndSphere = (props: EndSphereProps) => {
@@ -12,8 +13,21 @@ const EndSphere = (props: EndSphereProps) => {
 
   const meshRef = useRef<THREE.Object3D>();
   useFrame(() => {
-    if (meshRef.current) meshRef.current.rotation.y += 0.005;
+    if (meshRef.current) {
+      meshRef.current.rotation.y += 0.005;
+      if (
+        props.outroAnim &&
+        meshRef.current.scale.x > 0 &&
+        meshRef.current.scale.y > 0 &&
+        meshRef.current.scale.z > 0
+      ) {
+        meshRef.current.scale.x -= 0.025;
+        meshRef.current.scale.y -= 0.025;
+        meshRef.current.scale.z -= 0.025;
+      }
+    }
   });
+
   return (
     <mesh
       position={props.position as [number, number, number]}

src/components/MediaScene/MediaPlayer.tsx

@@ -100,10 +100,20 @@ const MediaPlayer = () => {
     return () => cancelAnimationFrame(curr as any);
   }, [updateTime]);
 
+  const endMediaSource = useMemo(() => {
+    switch (endMediaPlayedCount) {
+      case 0:
+        return endroll;
+      case 1:
+        return xa0001;
+      case 2:
+        return xa0006;
+    }
+  }, [endMediaPlayedCount]);
+
   useEffect(() => {
     if (currentScene === "end") {
       if (endMediaPlayedCount === 0) {
-        setMediaSource(endroll);
         if (videoRef.current) {
           videoRef.current.load();
           videoRef.current.play().catch((e) => {
@@ -111,18 +121,13 @@ const MediaPlayer = () => {
           });
         }
       } else if (endMediaPlayedCount === 1) {
-        setMediaSource(xa0001);
         if (videoRef.current) {
           videoRef.current.load();
         }
       } else if (endMediaPlayedCount === 2) {
-        console.log('s')
-        setMediaSource(xa0006);
         if (videoRef.current) {
           videoRef.current.load();
-          // videoRef.current.play().catch((e) => {
-          //   console.log(e);
-          // });
+          videoRef.current.play();
         }
       }
     } else if (currentScene === "media" || currentScene === "tak") {
@@ -170,7 +175,7 @@ const MediaPlayer = () => {
           ? "block"
           : "none",
       }}
-      src={mediaSource}
+      src={currentScene === "end" ? endMediaSource : mediaSource}
     >
       <track src={t} kind="captions" default />
     </video>

src/scenes/EndScene.tsx

@@ -5,6 +5,8 @@ import EndCylinder from "../components/EndScene/EndCylinder";
 import EndSphere from "../components/EndScene/EndSphere";
 import LainSpeak from "../components/LainSpeak";
 import { useEndSceneStore, useMediaStore } from "../store";
+import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
+
 const EndScene = () => {
   const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
 
@@ -15,11 +17,19 @@ const EndScene = () => {
   useFrame(() => {
     if (mainCylinderRef.current) {
       mainCylinderRef.current.rotation.y -= 0.01;
+      if (sceneOutro) {
+        mainCylinderRef.current.position.z -= 0.25;
+        mainCylinderRef.current.rotation.y -= 0.05;
+        if (mainCylinderRef.current.scale.y > 0.6) {
+          mainCylinderRef.current.scale.y -= 0.01;
+        }
+      }
     }
   });
 
   const [isIntro, setIsIntro] = useState(true);
   const [isOutro, setIsOutro] = useState(false);
+  const [sceneOutro, setSceneOutro] = useState(false);
 
   useEffect(() => {
     if (mediaPlayedCount === 1) {
@@ -42,27 +52,31 @@ const EndScene = () => {
       }, 3800);
     } else if (mediaPlayedCount > 1) {
       setIsOutro(true);
+      setTimeout(() => {
+        setSceneOutro(true);
+      }, 4000);
     }
   }, [mediaPlayedCount, setAudioAnalyser]);
 
-  return mediaPlayedCount > 0 ? (
-    <>
-      <pointLight position={[0, 0, 5]} intensity={0.9} />
-      <pointLight position={[0, 0, -5]} intensity={0.9} />
-
-      <group ref={mainCylinderRef} position={[0, -1, 2.2]}>
-        <EndCylinder />
-      </group>
-      <EndSphere position={[-1.8, -1.6, 1.4]} />
-      <EndSphere position={[1.8, -0.5, 0]} />
-      <EndSphere position={[2, -1.7, 1]} />
-      <EndSphere position={[-1.6, 1.4, 1.5]} />
-      <EndSphere position={[2, 1.7, -0.5]} />
-      <LainSpeak intro={isIntro} outro={isOutro} />
-    </>
-  ) : (
-    <></>
-  );
+  // return mediaPlayedCount > 0 ? (
+  //   <>
+  //     <pointLight position={[0, 0, 5]} intensity={0.9} />
+  //     <pointLight position={[0, 0, -5]} intensity={0.9} />
+  //
+  //     <group ref={mainCylinderRef} position={[0, -1, 2.2]}>
+  //       <EndCylinder />
+  //     </group>
+  //     <EndSphere position={[-1.8, -1.6, 1.4]} outroAnim={sceneOutro} />
+  //     <EndSphere position={[1.8, -0.5, 0]} outroAnim={sceneOutro} />
+  //     <EndSphere position={[2, -1.7, 1]} outroAnim={sceneOutro} />
+  //     <EndSphere position={[-1.6, 1.4, 1.5]} outroAnim={sceneOutro} />
+  //     <EndSphere position={[2, 1.7, -0.5]} outroAnim={sceneOutro} />
+  //     <LainSpeak intro={isIntro} outro={isOutro} />
+  //   </>
+  // ) : (
+  //   <></>
+  // );
+  return <EndSelectionScreen />;
 };
 
 export default EndScene;

src/store.ts

@@ -450,7 +450,7 @@ export const useSSknStore = create<SSknState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "end",
+  currentScene: "main",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));