mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
endroll components more or less done
This commit is contained in:
parent
ee7147cdae
commit
af4a9c0d6f
5 changed files with 155 additions and 28 deletions
94
src/components/EndScene/EndSelectionScreen.tsx
Normal file
94
src/components/EndScene/EndSelectionScreen.tsx
Normal file
|
@ -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;
|
|
@ -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]}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 })),
|
||||
}));
|
||||
|
||||
|
|
Loading…
Reference in a new issue