mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
audio visualizer done, reorganized stuff
This commit is contained in:
parent
7649cb7346
commit
b0e051dfd9
42 changed files with 294 additions and 282 deletions
14
src/App.tsx
14
src/App.tsx
|
@ -1,11 +1,11 @@
|
||||||
import React, { useEffect, useState, Suspense } from "react";
|
import React, { useEffect, useState, Suspense } from "react";
|
||||||
import MainScene from "./components/MainScene";
|
import MainScene from "./scenes/MainScene";
|
||||||
import "./static/css/hub.css";
|
import "./static/css/hub.css";
|
||||||
import "./static/css/main.css";
|
import "./static/css/main.css";
|
||||||
import { Canvas } from "react-three-fiber";
|
import { Canvas } from "react-three-fiber";
|
||||||
import Boot from "./components/Boot";
|
import Boot from "./components/Boot";
|
||||||
import MediaPlayer from "./components/MediaScene/MediaPlayer";
|
import MediaPlayer from "./components/MediaScene/MediaPlayer";
|
||||||
import MediaScene from "./components/MediaScene/MediaScene";
|
import MediaScene from "./scenes/MediaScene";
|
||||||
import EventStateManager from "./components/StateManagers/EventStateManager";
|
import EventStateManager from "./components/StateManagers/EventStateManager";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
@ -26,13 +26,13 @@ const App = () => {
|
||||||
<span className="canvas">
|
<span className="canvas">
|
||||||
<EventStateManager />
|
<EventStateManager />
|
||||||
<Canvas concurrent>
|
<Canvas concurrent>
|
||||||
<Suspense fallback={null}>
|
{/*<Suspense fallback={null}>*/}
|
||||||
<MediaScene />
|
{/* <MediaScene />*/}
|
||||||
</Suspense>
|
{/*</Suspense>*/}
|
||||||
{/*<MainScene />*/}
|
<MainScene />
|
||||||
</Canvas>
|
</Canvas>
|
||||||
</span>
|
</span>
|
||||||
<MediaPlayer />
|
{/*<MediaPlayer />*/}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,22 +2,22 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import { useSpring, a } from "@react-spring/three";
|
import { useSpring, a } from "@react-spring/three";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import Cou from "../static/sprite/Cou.png";
|
import Cou from "../../static/sprite/Cou.png";
|
||||||
import CouActive from "../static/sprite/Cou_active.png";
|
import CouActive from "../../static/sprite/Cou_active.png";
|
||||||
import Dc from "../static/sprite/Dc.png";
|
import Dc from "../../static/sprite/Dc.png";
|
||||||
import DcActive from "../static/sprite/Dc_active.png";
|
import DcActive from "../../static/sprite/Dc_active.png";
|
||||||
import SSkn from "../static/sprite/SSkn.png";
|
import SSkn from "../../static/sprite/SSkn.png";
|
||||||
import SSKnActive from "../static/sprite/SSkn_active.png";
|
import SSKnActive from "../../static/sprite/SSkn_active.png";
|
||||||
import Tda from "../static/sprite/Tda.png";
|
import Tda from "../../static/sprite/Tda.png";
|
||||||
import TdaActive from "../static/sprite/Tda_active.png";
|
import TdaActive from "../../static/sprite/Tda_active.png";
|
||||||
import Dia from "../static/sprite/Dia.png";
|
import Dia from "../../static/sprite/Dia.png";
|
||||||
import DiaActive from "../static/sprite/Dia_active.png";
|
import DiaActive from "../../static/sprite/Dia_active.png";
|
||||||
import Lda from "../static/sprite/Lda.png";
|
import Lda from "../../static/sprite/Lda.png";
|
||||||
import LdaActive from "../static/sprite/Lda_active.png";
|
import LdaActive from "../../static/sprite/Lda_active.png";
|
||||||
import MULTI from "../static/sprite/MULTI.png";
|
import MULTI from "../../static/sprite/MULTI.png";
|
||||||
import MULTIActive from "../static/sprite/MULTI_active.png";
|
import MULTIActive from "../../static/sprite/MULTI_active.png";
|
||||||
import level_y_values from "../resources/level_y_values.json";
|
import level_y_values from "../../resources/level_y_values.json";
|
||||||
import { useBlueOrbStore } from "../store";
|
import { useBlueOrbStore } from "../../store";
|
||||||
|
|
||||||
type BlueOrbContructorProps = {
|
type BlueOrbContructorProps = {
|
||||||
sprite: string;
|
sprite: string;
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { createRef, memo, RefObject, useRef } from "react";
|
import React, { createRef, memo, RefObject, useRef } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import { useGrayPlanesStore } from "../store";
|
import { useGrayPlanesStore } from "../../store";
|
||||||
|
|
||||||
const GrayPlanes = memo(() => {
|
const GrayPlanes = memo(() => {
|
||||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { memo } from "react";
|
import React, { memo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import lofTexture from "../static/sprite/lof.png";
|
import lofTexture from "../../static/sprite/gray_ring_lof.png";
|
||||||
import holeTexture from "../static/sprite/hole.png";
|
import holeTexture from "../../static/sprite/hole.png";
|
||||||
import lifeTexture from "../static/sprite/life.png";
|
import lifeTexture from "../../static/sprite/life.png";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
|
|
||||||
type GrayRingProps = {
|
type GrayRingProps = {
|
|
@ -1,15 +1,15 @@
|
||||||
import React, { memo } from "react";
|
import React, { memo } from "react";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import bigHud from "../static/sprite/big_hud.png";
|
import bigHud from "../../static/sprite/big_hud.png";
|
||||||
import bigHudMirrored from "../static/sprite/big_hud_mirrored.png";
|
import bigHudMirrored from "../../static/sprite/big_hud_mirrored.png";
|
||||||
import longHud from "../static/sprite/long_hud.png";
|
import longHud from "../../static/sprite/long_hud.png";
|
||||||
import longHudMirrored from "../static/sprite/long_hud_mirrored.png";
|
import longHudMirrored from "../../static/sprite/long_hud_mirrored.png";
|
||||||
import boringHud from "../static/sprite/long_hud_boring.png";
|
import boringHud from "../../static/sprite/long_hud_boring.png";
|
||||||
import boringHudMirrored from "../static/sprite/long_hud_boring_mirrored.png";
|
import boringHudMirrored from "../../static/sprite/long_hud_boring_mirrored.png";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useBlueOrbStore } from "../store";
|
import { useBlueOrbStore } from "../../store";
|
||||||
import blue_orb_huds from "../resources/blue_orb_huds.json";
|
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||||
|
|
||||||
export type HUDElementProps = {
|
export type HUDElementProps = {
|
||||||
hudVisibility: boolean;
|
hudVisibility: boolean;
|
|
@ -2,14 +2,14 @@ import React, { Suspense, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
||||||
import moveDownSpriteSheet from "../static/sprite/jump_down.png";
|
import moveDownSpriteSheet from "../../static/sprite/jump_down.png";
|
||||||
import moveUpSpriteSheet from "../static/sprite/jump_up.png";
|
import moveUpSpriteSheet from "../../static/sprite/jump_up.png";
|
||||||
import moveLeftSpriteSheet from "../static/sprite/move_left.png";
|
import moveLeftSpriteSheet from "../../static/sprite/move_left.png";
|
||||||
import moveRightSpriteSheet from "../static/sprite/move_right.png";
|
import moveRightSpriteSheet from "../../static/sprite/move_right.png";
|
||||||
import standingSpriteSheet from "../static/sprite/standing.png";
|
import standingSpriteSheet from "../../static/sprite/standing.png";
|
||||||
import introSpriteSheet from "../static/sprite/intro.png";
|
import introSpriteSheet from "../../static/sprite/intro.png";
|
||||||
import throwBlueOrbSpriteSheet from "../static/sprite/throw_blue_orb.png";
|
import throwBlueOrbSpriteSheet from "../../static/sprite/throw_blue_orb.png";
|
||||||
import { useLainStore } from "../store";
|
import { useLainStore } from "../../store";
|
||||||
|
|
||||||
type LainConstructorProps = {
|
type LainConstructorProps = {
|
||||||
sprite: string;
|
sprite: string;
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useMemo, useRef } from "react";
|
import React, { useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import middleRingTexture from "../static/sprite/middle_ring_tex.png";
|
import middleRingTexture from "../../static/sprite/middle_ring_tex.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useMiddleRingStore } from "../store";
|
import { useMiddleRingStore } from "../../store";
|
||||||
|
|
||||||
const MiddleRing = () => {
|
const MiddleRing = () => {
|
||||||
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
|
@ -3,8 +3,8 @@ import { useFrame, useThree } from "react-three-fiber";
|
||||||
import { Scene } from "three";
|
import { Scene } from "three";
|
||||||
import HUD from "./HUD";
|
import HUD from "./HUD";
|
||||||
import YellowOrb from "./YellowOrb";
|
import YellowOrb from "./YellowOrb";
|
||||||
import { useBlueOrbStore } from "../store";
|
import { useBlueOrbStore } from "../../store";
|
||||||
import TextRenderer from "./TextRenderer/TextRenderer";
|
import TextRenderer from "../TextRenderer/TextRenderer";
|
||||||
|
|
||||||
const OrthoCamera = memo(() => {
|
const OrthoCamera = memo(() => {
|
||||||
const { gl, scene, camera } = useThree();
|
const { gl, scene, camera } = useThree();
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { memo, useRef } from "react";
|
import React, { memo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import siteATex from "../static/sprite/site_a.png";
|
import siteATex from "../../static/sprite/site_a.png";
|
||||||
import siteBTex from "../static/sprite/site_b.png";
|
import siteBTex from "../../static/sprite/site_b.png";
|
||||||
import siteLevelTex from "../static/sprite/site_levels.png";
|
import siteLevelTex from "../../static/sprite/site_levels.png";
|
||||||
|
|
||||||
type PurpleRingProps = {
|
type PurpleRingProps = {
|
||||||
purpleRingPosY: number;
|
purpleRingPosY: number;
|
|
@ -1,11 +1,11 @@
|
||||||
import React, { memo, Suspense } from "react";
|
import React, { memo, Suspense } from "react";
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import Level from "./Level";
|
import Level from "./Level";
|
||||||
import level_y_values from "../resources/level_y_values.json";
|
import level_y_values from "../../resources/level_y_values.json";
|
||||||
import blue_orb_positions from "../resources/blue_orb_positions.json";
|
import blue_orb_positions from "../../resources/blue_orb_positions.json";
|
||||||
import BlueOrb from "./BlueOrb";
|
import BlueOrb from "./BlueOrb";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useBlueOrbStore, useLevelStore, useSiteStore } from "../store";
|
import { useBlueOrbStore, useLevelStore, useSiteStore } from "../../store";
|
||||||
|
|
||||||
const Site = memo(() => {
|
const Site = memo(() => {
|
||||||
const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
|
const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
|
|
@ -2,7 +2,7 @@ import { a, useSpring } from "@react-spring/three";
|
||||||
import React, { createRef, memo, RefObject, useMemo, useRef } from "react";
|
import React, { createRef, memo, RefObject, useMemo, useRef } from "react";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useStarfieldStore } from "../store";
|
import { useStarfieldStore } from "../../store";
|
||||||
|
|
||||||
type StarRefsAndInitialPoses = [
|
type StarRefsAndInitialPoses = [
|
||||||
React.MutableRefObject<React.RefObject<THREE.Object3D>[]>,
|
React.MutableRefObject<React.RefObject<THREE.Object3D>[]>,
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { memo, useRef, useState } from "react";
|
import React, { memo, useRef, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import orbSprite from "../static/sprite/orb.png";
|
import orbSprite from "../../static/sprite/orb.png";
|
||||||
import { useYellowOrbStore } from "../store";
|
import { useYellowOrbStore } from "../../store";
|
||||||
|
|
||||||
// initialize outside the component otherwise it gets overwritten when it rerenders
|
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||||
let orbIdx = 0;
|
let orbIdx = 0;
|
|
@ -1,11 +1,9 @@
|
||||||
import React, { useMemo, useRef, useState } from "react";
|
import React, { createRef, MutableRefObject, useEffect, useMemo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
||||||
import { useAudioVisualizerStore } from "../../../store";
|
|
||||||
|
|
||||||
const AudioVisualizer = () => {
|
const AudioVisualizer = () => {
|
||||||
const setFrequency = useAudioVisualizerStore((state) => state.setFrequency);
|
|
||||||
const analyser = useMemo(() => {
|
const analyser = useMemo(() => {
|
||||||
const listener = new THREE.AudioListener();
|
const listener = new THREE.AudioListener();
|
||||||
|
|
||||||
|
@ -17,28 +15,78 @@ const AudioVisualizer = () => {
|
||||||
return new THREE.AudioAnalyser(audio, 2048);
|
return new THREE.AudioAnalyser(audio, 2048);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const columnRefs = useMemo(() => {
|
||||||
|
let ref1, ref2, ref3, ref4;
|
||||||
|
return Array.from({ length: 15 }, () => [
|
||||||
|
(ref1 = createRef<THREE.Object3D>()),
|
||||||
|
(ref2 = createRef<THREE.Object3D>()),
|
||||||
|
(ref3 = createRef<THREE.Object3D>()),
|
||||||
|
(ref4 = createRef<THREE.Object3D>()),
|
||||||
|
]);
|
||||||
|
}, []);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (!(document.getElementById("media") as HTMLMediaElement).paused)
|
const frequencyData = analyser.getFrequencyData();
|
||||||
setFrequency(analyser.getFrequencyData());
|
|
||||||
|
columnRefs.forEach((refArray, idx) => {
|
||||||
|
const ref1 = refArray[0];
|
||||||
|
const ref2 = refArray[1];
|
||||||
|
const ref3 = refArray[2];
|
||||||
|
const ref4 = refArray[3];
|
||||||
|
|
||||||
|
// we up it by 1.2 just so it becomes a bit more noticable, otherwise
|
||||||
|
// the visualizer is a bit too "calm"
|
||||||
|
const currentFrequency = frequencyData[32 * idx] * 1.2;
|
||||||
|
|
||||||
|
switch (true) {
|
||||||
|
case currentFrequency >= 255:
|
||||||
|
ref1.current!.visible = true;
|
||||||
|
ref2.current!.visible = true;
|
||||||
|
ref3.current!.visible = true;
|
||||||
|
ref4.current!.visible = true;
|
||||||
|
break;
|
||||||
|
case currentFrequency >= 192:
|
||||||
|
ref1.current!.visible = true;
|
||||||
|
ref2.current!.visible = true;
|
||||||
|
ref3.current!.visible = true;
|
||||||
|
ref4.current!.visible = false;
|
||||||
|
break;
|
||||||
|
case currentFrequency >= 128:
|
||||||
|
ref1.current!.visible = true;
|
||||||
|
ref2.current!.visible = true;
|
||||||
|
ref3.current!.visible = false;
|
||||||
|
ref4.current!.visible = false;
|
||||||
|
break;
|
||||||
|
case currentFrequency >= 64:
|
||||||
|
ref1.current!.visible = true;
|
||||||
|
ref2.current!.visible = false;
|
||||||
|
ref3.current!.visible = false;
|
||||||
|
ref4.current!.visible = false;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
ref1.current!.visible = false;
|
||||||
|
ref2.current!.visible = false;
|
||||||
|
ref3.current!.visible = false;
|
||||||
|
ref4.current!.visible = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AudioVisualizerColumn position={[0, 0, 0]} idx={0} />
|
{columnRefs.map((refArray, idx: number) => (
|
||||||
<AudioVisualizerColumn position={[0, -0.5, 0]} idx={1} />
|
<AudioVisualizerColumn
|
||||||
<AudioVisualizerColumn position={[0, -1, 0]} idx={2} />
|
position={[0, -idx / 2, 0]}
|
||||||
<AudioVisualizerColumn position={[0, -1.5, 0]} idx={3} />
|
refs={{
|
||||||
<AudioVisualizerColumn position={[0, -2, 0]} idx={4} />
|
ref1: refArray[0] as MutableRefObject<THREE.Object3D>,
|
||||||
<AudioVisualizerColumn position={[0, -2.5, 0]} idx={5} />
|
ref2: refArray[1] as MutableRefObject<THREE.Object3D>,
|
||||||
<AudioVisualizerColumn position={[0, -3, 0]} idx={6} />
|
ref3: refArray[2] as MutableRefObject<THREE.Object3D>,
|
||||||
<AudioVisualizerColumn position={[0, -3.5, 0]} idx={7} />
|
ref4: refArray[3] as MutableRefObject<THREE.Object3D>,
|
||||||
<AudioVisualizerColumn position={[0, -4, 0]} idx={8} />
|
}}
|
||||||
<AudioVisualizerColumn position={[0, -4.5, 0]} idx={9} />
|
key={idx}
|
||||||
<AudioVisualizerColumn position={[0, -5, 0]} idx={10} />
|
/>
|
||||||
<AudioVisualizerColumn position={[0, -5.5, 0]} idx={11} />
|
))}
|
||||||
<AudioVisualizerColumn position={[0, -6, 0]} idx={12} />
|
|
||||||
<AudioVisualizerColumn position={[0, -6.5, 0]} idx={13} />
|
|
||||||
<AudioVisualizerColumn position={[0, -7, 0]} idx={14} />
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,15 +1,17 @@
|
||||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
import React, { MutableRefObject } from "react";
|
||||||
import audioVisualizerOrangeOrb from "../../../static/sprite/audio_visual_orb_orange.png";
|
import audioVisualizerOrangeOrb from "../../../static/sprite/audio_visual_orb_orange.png";
|
||||||
import audioVisualizerYellowOrb from "../../../static/sprite/audio_visual_orb_yellow.png";
|
import audioVisualizerYellowOrb from "../../../static/sprite/audio_visual_orb_yellow.png";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useAudioVisualizerStore, useBlueOrbStore } from "../../../store";
|
|
||||||
import { useSpring, a } from "@react-spring/three";
|
|
||||||
import level_y_values from "../../../resources/level_y_values.json";
|
|
||||||
|
|
||||||
type AudioVisualizerColumnProps = {
|
type AudioVisualizerColumnProps = {
|
||||||
position: number[];
|
position: number[];
|
||||||
idx: number;
|
refs: {
|
||||||
|
ref1: MutableRefObject<THREE.Object3D>;
|
||||||
|
ref2: MutableRefObject<THREE.Object3D>;
|
||||||
|
ref3: MutableRefObject<THREE.Object3D>;
|
||||||
|
ref4: MutableRefObject<THREE.Object3D>;
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
||||||
|
@ -22,33 +24,15 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
||||||
audioVisualizerYellowOrb
|
audioVisualizerYellowOrb
|
||||||
);
|
);
|
||||||
|
|
||||||
const [
|
const { ref1, ref2, ref3, ref4 } = props.refs;
|
||||||
{ fstOrbVisible, sndOrbVisible, thirdOrbVisible, fourthOrbVisible },
|
|
||||||
set,
|
|
||||||
] = useSpring(() => ({
|
|
||||||
fstOrbVisible: false,
|
|
||||||
sndOrbVisible: false,
|
|
||||||
thirdOrbVisible: false,
|
|
||||||
fourthOrbVisible: false,
|
|
||||||
config: { duration: 800 },
|
|
||||||
}));
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
useAudioVisualizerStore.subscribe(set, (state) => ({
|
|
||||||
fstOrbVisible: state.frequency[props.idx * 32] >= 64,
|
|
||||||
sndOrbVisible: state.frequency[props.idx * 32] >= 128,
|
|
||||||
thirdOrbVisible: state.frequency[props.idx * 32] >= 192,
|
|
||||||
fourthOrbVisible: state.frequency[props.idx * 32] >= 255,
|
|
||||||
}));
|
|
||||||
}, [props.position, set]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={props.position as [number, number, number]}>
|
<group position={props.position as [number, number, number]}>
|
||||||
<a.mesh
|
<mesh
|
||||||
scale={[0.4, 0.4, 0.4]}
|
scale={[0.4, 0.4, 0.4]}
|
||||||
position={[-5.2, 3.8, 0]}
|
position={[-5.2, 3.8, 0]}
|
||||||
visible={fstOrbVisible}
|
|
||||||
renderOrder={10}
|
renderOrder={10}
|
||||||
|
ref={ref1}
|
||||||
>
|
>
|
||||||
<meshBasicMaterial
|
<meshBasicMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -58,11 +42,11 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
<planeBufferGeometry attach="geometry" />
|
<planeBufferGeometry attach="geometry" />
|
||||||
</a.mesh>
|
</mesh>
|
||||||
<a.mesh
|
<mesh
|
||||||
scale={[0.4, 0.4, 0.4]}
|
scale={[0.4, 0.4, 0.4]}
|
||||||
position={[-4.65, 3.8, 0]}
|
position={[-4.65, 3.8, 0]}
|
||||||
visible={sndOrbVisible}
|
ref={ref2}
|
||||||
renderOrder={5}
|
renderOrder={5}
|
||||||
>
|
>
|
||||||
<meshBasicMaterial
|
<meshBasicMaterial
|
||||||
|
@ -73,12 +57,12 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
<planeBufferGeometry attach="geometry" />
|
<planeBufferGeometry attach="geometry" />
|
||||||
</a.mesh>
|
</mesh>
|
||||||
|
|
||||||
<a.mesh
|
<mesh
|
||||||
scale={[0.4, 0.4, 0.4]}
|
scale={[0.4, 0.4, 0.4]}
|
||||||
position={[-4.1, 3.8, 0]}
|
position={[-4.1, 3.8, 0]}
|
||||||
visible={thirdOrbVisible}
|
ref={ref3}
|
||||||
renderOrder={5}
|
renderOrder={5}
|
||||||
>
|
>
|
||||||
<meshBasicMaterial
|
<meshBasicMaterial
|
||||||
|
@ -89,12 +73,12 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
<planeBufferGeometry attach="geometry" />
|
<planeBufferGeometry attach="geometry" />
|
||||||
</a.mesh>
|
</mesh>
|
||||||
<a.mesh
|
<mesh
|
||||||
scale={[0.4, 0.4, 0.4]}
|
scale={[0.4, 0.4, 0.4]}
|
||||||
position={[-3.55, 3.8, 0]}
|
position={[-3.55, 3.8, 0]}
|
||||||
visible={fourthOrbVisible}
|
|
||||||
renderOrder={10}
|
renderOrder={10}
|
||||||
|
ref={ref4}
|
||||||
>
|
>
|
||||||
<meshBasicMaterial
|
<meshBasicMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -104,7 +88,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
<planeBufferGeometry attach="geometry" />
|
<planeBufferGeometry attach="geometry" />
|
||||||
</a.mesh>
|
</mesh>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useMemo, useState } from "react";
|
import React, { useMemo, useState } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import wordInactiveTexture from "../../../static/sprite/word_background.png";
|
import wordInactiveTexture from "../../static/sprite/word_background.png";
|
||||||
import wordActiveTexture from "../../../static/sprite/word_background_active.png";
|
import wordActiveTexture from "../../static/sprite/word_background_active.png";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import lofSpriteSheet from "../../../static/sprite/lof_spritesheet.png";
|
import lofSpriteSheet from "../../static/sprite/lof_spritesheet.png";
|
||||||
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
||||||
|
|
||||||
const Lof = () => {
|
const Lof = () => {
|
|
@ -1,12 +1,12 @@
|
||||||
import React, { useMemo, useRef } from "react";
|
import React, { useMemo, useRef } from "react";
|
||||||
import { useMediaStore } from "../../../../store";
|
import { useMediaStore } from "../../store";
|
||||||
import mediaLoadingBarContainer from "../../../../static/sprite/media_loading_bar_container.png";
|
import mediaLoadingBarContainer from "../../static/sprite/media_loading_bar_container.png";
|
||||||
import mediaLoadingBar from "../../../../static/sprite/media_loading_bar.png";
|
import mediaLoadingBar from "../../static/sprite/media_loading_bar.png";
|
||||||
import mediaLoadingBar10Perc from "../../../../static/sprite/media_loading_bar_10perc.png";
|
import mediaLoadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png";
|
||||||
import mediaLoadingBar20Perc from "../../../../static/sprite/media_loading_bar_20perc.png";
|
import mediaLoadingBar20Perc from "../../static/sprite/media_loading_bar_20perc.png";
|
||||||
import mediaLoadingBar30Perc from "../../../../static/sprite/media_loading_bar_30perc.png";
|
import mediaLoadingBar30Perc from "../../static/sprite/media_loading_bar_30perc.png";
|
||||||
import mediaLoadingBar40Perc from "../../../../static/sprite/media_loading_bar_40perc.png";
|
import mediaLoadingBar40Perc from "../../static/sprite/media_loading_bar_40perc.png";
|
||||||
import mediaLoadingBar50Perc from "../../../../static/sprite/media_loading_bar_50perc.png";
|
import mediaLoadingBar50Perc from "../../static/sprite/media_loading_bar_50perc.png";
|
||||||
|
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
@ -126,12 +126,12 @@ const MediaLoadingBar = () => {
|
||||||
90: {
|
90: {
|
||||||
scaleX: 1.5,
|
scaleX: 1.5,
|
||||||
texture: mediaLoadingBarTex,
|
texture: mediaLoadingBarTex,
|
||||||
offsetX: 3.8,
|
offsetX: 3.65,
|
||||||
},
|
},
|
||||||
95: {
|
95: {
|
||||||
scaleX: 1.5,
|
scaleX: 1.5,
|
||||||
texture: mediaLoadingBarTex,
|
texture: mediaLoadingBarTex,
|
||||||
offsetX: 3.95,
|
offsetX: 3.85,
|
||||||
},
|
},
|
||||||
100: {
|
100: {
|
||||||
scaleX: 1.5,
|
scaleX: 1.5,
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useRef } from "react";
|
import React, { createRef, useCallback, useRef } from "react";
|
||||||
import test from "../../static/movie/LAIN01.XA[18].ogg";
|
import test from "../../static/movie/LAIN01.XA[18].ogg";
|
||||||
import { useMediaStore } from "../../store";
|
import { useMediaStore } from "../../store";
|
||||||
|
|
||||||
|
@ -8,12 +8,13 @@ const MediaPlayer = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
const requestRef = useRef();
|
const requestRef = useRef();
|
||||||
|
const videoRef = createRef<HTMLVideoElement>();
|
||||||
|
|
||||||
const updateTime = useCallback(() => {
|
const updateTime = useCallback(() => {
|
||||||
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
||||||
if (t.current) {
|
if (videoRef.current) {
|
||||||
const timeElapsed = t.current.getCurrentTime();
|
const timeElapsed = videoRef.current.currentTime;
|
||||||
const duration = t.current.getDuration();
|
const duration = videoRef.current.duration;
|
||||||
const percentageElapsed = Math.floor((timeElapsed / duration) * 100);
|
const percentageElapsed = Math.floor((timeElapsed / duration) * 100);
|
||||||
|
|
||||||
if (percentageElapsed % 5 === 0) {
|
if (percentageElapsed % 5 === 0) {
|
||||||
|
@ -27,10 +28,8 @@ const MediaPlayer = () => {
|
||||||
return () => cancelAnimationFrame(requestRef.current as any);
|
return () => cancelAnimationFrame(requestRef.current as any);
|
||||||
}, [updateTime]);
|
}, [updateTime]);
|
||||||
|
|
||||||
const t = useRef<any>();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<video width="800" height="600" controls autoPlay id="media">
|
<video width="800" height="600" controls autoPlay id="media" ref={videoRef}>
|
||||||
<source src={test} />
|
<source src={test} />
|
||||||
</video>
|
</video>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,29 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { OrbitControls } from "drei";
|
|
||||||
import { useMediaStore } from "../../store";
|
|
||||||
import TextRenderer from "../TextRenderer/TextRenderer";
|
|
||||||
import LeftSide from "./LeftSide/LeftSide";
|
|
||||||
import RightSide from "./RightSide/RightSide";
|
|
||||||
import AudioVisualizer from "./AudioVisualizer/AudioVisualizer";
|
|
||||||
|
|
||||||
const MediaScene = () => {
|
|
||||||
const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<OrbitControls />
|
|
||||||
<group position={[0.4, -0.3, 0]}>
|
|
||||||
<group position={[0, 0, 13]} scale={[1, 1, 1]}>
|
|
||||||
<TextRenderer />
|
|
||||||
</group>
|
|
||||||
|
|
||||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 3]} />
|
|
||||||
<LeftSide activeMediaElement={activeMediaElement} />
|
|
||||||
<RightSide activeMediaElement={activeMediaElement} />
|
|
||||||
<AudioVisualizer />
|
|
||||||
</group>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MediaScene;
|
|
19
src/components/MediaScene/NodeNameContainer.tsx
Normal file
19
src/components/MediaScene/NodeNameContainer.tsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import React from "react";
|
||||||
|
import * as THREE from "three";
|
||||||
|
import { useLoader } from "react-three-fiber";
|
||||||
|
import mediaNodeNameContainer from "../../static/sprite/media_node_name_container.png";
|
||||||
|
|
||||||
|
const NodeNameContainer = () => {
|
||||||
|
const mediaNodeNameContainerTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
mediaNodeNameContainer
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<sprite scale={[2.6, 0.5, 1]} position={[3.425, 2.5, 0]}>
|
||||||
|
<spriteMaterial attach="material" map={mediaNodeNameContainerTex} />
|
||||||
|
</sprite>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NodeNameContainer;
|
|
@ -1,23 +0,0 @@
|
||||||
import React, { useMemo } from "react";
|
|
||||||
import * as THREE from "three";
|
|
||||||
import { useLoader } from "react-three-fiber";
|
|
||||||
import mediaNodeNameContainer from "../../../../static/sprite/media_node_name_container.png";
|
|
||||||
import MediaLoadingBar from "./MediaLoadingBar";
|
|
||||||
|
|
||||||
const TopRightHUD = () => {
|
|
||||||
const mediaNodeNameContainerTex = useLoader(
|
|
||||||
THREE.TextureLoader,
|
|
||||||
mediaNodeNameContainer
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<group position={[0, 0.5, 0]}>
|
|
||||||
<MediaLoadingBar />
|
|
||||||
<sprite scale={[2.6, 0.5, 1]} position={[3.425, 2.5, 0]}>
|
|
||||||
<spriteMaterial attach="material" map={mediaNodeNameContainerTex} />
|
|
||||||
</sprite>
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TopRightHUD;
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import grayTextureFile from "../../../static/sprite/gray_box.png";
|
import grayTextureFile from "../../../../static/sprite/gray_box.png";
|
||||||
import darkGrayTextureFile from "../../../static/sprite/dark_gray_box.png";
|
import darkGrayTextureFile from "../../../../static/sprite/dark_gray_box.png";
|
||||||
import React, { useRef } from "react";
|
import React, { useRef } from "react";
|
||||||
import { ShapeProps } from "./LeftSide";
|
import { ShapeProps } from "./LeftSide";
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import grayTextureFile from "../../../static/sprite/gray_box.png";
|
import grayTextureFile from "../../../../static/sprite/gray_box.png";
|
||||||
import darkGrayTextureFile from "../../../static/sprite/dark_gray_box.png";
|
import darkGrayTextureFile from "../../../../static/sprite/dark_gray_box.png";
|
||||||
import React, { useRef } from "react";
|
import React, { useRef } from "react";
|
||||||
import { ShapeProps } from "./LeftSide";
|
import { ShapeProps } from "./LeftSide";
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
import React, { useCallback, useMemo } from "react";
|
import React, { useCallback, useMemo } from "react";
|
||||||
import { useMediaWordStore } from "../../../store";
|
import { useMediaWordStore } from "../../../../store";
|
||||||
import Word from "./Word";
|
import Word from "./Word";
|
||||||
import { useSpring, a } from "@react-spring/three";
|
import { useSpring, a } from "@react-spring/three";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import Lof from "./Lof";
|
|
||||||
import TopRightHUD from "./TopRightHUD/TopRightHUD";
|
|
||||||
|
|
||||||
type RightSideProps = {
|
type RightSideProps = {
|
||||||
activeMediaElement: string;
|
activeMediaElement: string;
|
||||||
|
@ -94,8 +92,6 @@ const RightSide = (props: RightSideProps) => {
|
||||||
posY={wordPositionStateSpring.thirdWordPosY}
|
posY={wordPositionStateSpring.thirdWordPosY}
|
||||||
active={props.activeMediaElement === "thirdWord"}
|
active={props.activeMediaElement === "thirdWord"}
|
||||||
/>
|
/>
|
||||||
<Lof />
|
|
||||||
<TopRightHUD />
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import wordInactiveTexture from "../../../static/sprite/word_background.png";
|
import wordInactiveTexture from "../../../../static/sprite/word_background.png";
|
||||||
import wordActiveTexture from "../../../static/sprite/word_background_active.png";
|
import wordActiveTexture from "../../../../static/sprite/word_background_active.png";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import { a, SpringValue } from "@react-spring/three";
|
import { a, SpringValue } from "@react-spring/three";
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import SiteStateManager from "./SiteStateManager";
|
import SiteManager from "./MainScene/SiteManager";
|
||||||
import MiddleRingStateManager from "./MiddleRingStateManager";
|
import MiddleRingManager from "./MainScene/MiddleRingManager";
|
||||||
import LainStateManager from "./LainStateManager";
|
import LainManager from "./MainScene/LainManager";
|
||||||
import BlueOrbStateManager from "./BlueOrbStateManager";
|
import BlueOrbManager from "./MainScene/BlueOrbManager";
|
||||||
import BlueOrbHUDStateManager from "./BlueOrbHUDStateManager";
|
import BlueOrbHUDManager from "./MainScene/BlueOrbHUDManager";
|
||||||
import YellowTextStateManager from "./YellowTextStateManager";
|
import MainYellowTextManager from "./MainScene/MainYellowTextManager";
|
||||||
import { useBlueOrbStore, useMediaStore } from "../../store";
|
import { useBlueOrbStore, useMediaStore } from "../../store";
|
||||||
import GreenTextStateManager from "./GreenTextStateManager";
|
import GreenTextManager from "./MainScene/GreenTextManager";
|
||||||
import ActiveMediaElementStateManager from "./MediaScene/ActiveMediaElementStateManager";
|
import ActiveMediaElementManager from "./MediaScene/ActiveMediaElementManager";
|
||||||
import MediaWordStateManager from "./MediaScene/MediaWordStateManager";
|
import WordManager from "./MediaScene/WordManager";
|
||||||
import MediaYellowTextStateManager from "./MediaScene/MediaYellowTextStateManager";
|
import MediaYellowTextManager from "./MediaScene/MediaYellowTextManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -46,7 +46,7 @@ const EventStateManager = () => {
|
||||||
// from blue_orb_directions.json file.
|
// from blue_orb_directions.json file.
|
||||||
// const eventId = `${activeBlueOrb}_${keyPress}`;
|
// const eventId = `${activeBlueOrb}_${keyPress}`;
|
||||||
//
|
//
|
||||||
const eventId = `${activeMediaElement}_${keyPress}`;
|
const eventId = `${activeBlueOrb}_${keyPress}`;
|
||||||
setEventState(eventId);
|
setEventState(eventId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -63,16 +63,16 @@ const EventStateManager = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<BlueOrbStateManager eventState={eventState!} />
|
<BlueOrbManager eventState={eventState!} />
|
||||||
<BlueOrbHUDStateManager eventState={eventState!} />
|
<BlueOrbHUDManager eventState={eventState!} />
|
||||||
<YellowTextStateManager eventState={eventState!} />
|
<MainYellowTextManager eventState={eventState!} />
|
||||||
<GreenTextStateManager eventState={eventState!} />
|
<GreenTextManager eventState={eventState!} />
|
||||||
<SiteStateManager eventState={eventState!} />
|
<SiteManager eventState={eventState!} />
|
||||||
<LainStateManager eventState={eventState!} />
|
<LainManager eventState={eventState!} />
|
||||||
<MiddleRingStateManager eventState={eventState!} />
|
<MiddleRingManager eventState={eventState!} />
|
||||||
<ActiveMediaElementStateManager eventState={eventState!} />
|
<ActiveMediaElementManager eventState={eventState!} />
|
||||||
<MediaWordStateManager eventState={eventState!} />
|
<WordManager eventState={eventState!} />
|
||||||
<MediaYellowTextStateManager eventState={eventState!} />
|
<MediaYellowTextManager eventState={eventState!} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import React, { useCallback, useEffect } from "react";
|
||||||
import { useBlueOrbStore } from "../../store";
|
import { useBlueOrbStore } from "../../../store";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||||
import { StateManagerProps } from "./EventStateManager";
|
import { StateManagerProps } from "../EventStateManager";
|
||||||
|
|
||||||
const BlueOrbHUDStateManager = (props: StateManagerProps) => {
|
const BlueOrbHUDManager = (props: StateManagerProps) => {
|
||||||
const setActiveBlueOrbHudId = useBlueOrbStore(
|
const setActiveBlueOrbHudId = useBlueOrbStore(
|
||||||
(state) => state.setActiveBlueOrbHudId
|
(state) => state.setActiveBlueOrbHudId
|
||||||
);
|
);
|
||||||
|
@ -74,4 +74,4 @@ const BlueOrbHUDStateManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BlueOrbHUDStateManager;
|
export default BlueOrbHUDManager;
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import React, { useCallback, useEffect } from "react";
|
||||||
import { useBlueOrbStore } from "../../store";
|
import { useBlueOrbStore } from "../../../store";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||||
import { StateManagerProps } from "./EventStateManager";
|
import { StateManagerProps } from "../EventStateManager";
|
||||||
|
|
||||||
type SetActiveBlueOrb = (value: string) => void;
|
type SetActiveBlueOrb = (value: string) => void;
|
||||||
type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
|
type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
|
||||||
|
@ -21,7 +21,7 @@ type BlueOrbDispatcher = {
|
||||||
pickActiveBlueOrb: BlueOrbDispatchData;
|
pickActiveBlueOrb: BlueOrbDispatchData;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BlueOrbStateManager = (props: StateManagerProps) => {
|
const BlueOrbManager = (props: StateManagerProps) => {
|
||||||
const setActiveBlueOrb: SetActiveBlueOrb = useBlueOrbStore(
|
const setActiveBlueOrb: SetActiveBlueOrb = useBlueOrbStore(
|
||||||
(state) => state.setActiveBlueOrbId
|
(state) => state.setActiveBlueOrbId
|
||||||
);
|
);
|
||||||
|
@ -133,4 +133,4 @@ const BlueOrbStateManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BlueOrbStateManager;
|
export default BlueOrbManager;
|
|
@ -1,10 +1,10 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import React, { useCallback, useEffect } from "react";
|
||||||
import { useTextRendererStore } from "../../store";
|
import { useTextRendererStore } from "../../../store";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../../resources/site_a.json";
|
||||||
import { StateManagerProps } from "./EventStateManager";
|
import { StateManagerProps } from "../EventStateManager";
|
||||||
|
|
||||||
const GreenTextStateManager = (props: StateManagerProps) => {
|
const GreenTextManager = (props: StateManagerProps) => {
|
||||||
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
||||||
const toggleGreenText = useTextRendererStore(
|
const toggleGreenText = useTextRendererStore(
|
||||||
(state) => state.toggleGreenText
|
(state) => state.toggleGreenText
|
||||||
|
@ -77,4 +77,4 @@ const GreenTextStateManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default GreenTextStateManager;
|
export default GreenTextManager;
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useCallback, useEffect, useMemo } from "react";
|
import React, { useCallback, useEffect, useMemo } from "react";
|
||||||
import { useLainStore } from "../../store";
|
import { useLainStore } from "../../../store";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||||
import { StateManagerProps } from "./EventStateManager";
|
import { StateManagerProps } from "../EventStateManager";
|
||||||
|
|
||||||
const LainStateManager = (props: StateManagerProps) => {
|
const LainManager = (props: StateManagerProps) => {
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
|
@ -66,4 +66,4 @@ const LainStateManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default LainStateManager;
|
export default LainManager;
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import React, { useCallback, useEffect } from "react";
|
||||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
import blue_orb_huds from "../../../resources/blue_orb_huds.json";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../../resources/site_a.json";
|
||||||
import { useTextRendererStore } from "../../store";
|
import { useTextRendererStore } from "../../../store";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||||
|
|
||||||
type AnimateYellowTextWithMove = (
|
type AnimateYellowTextWithMove = (
|
||||||
yellowLetterPosYOffset: number,
|
yellowLetterPosYOffset: number,
|
||||||
|
@ -28,7 +28,7 @@ type YellowTextDispatcher = {
|
||||||
changeBlueOrbFocus: YellowTextDispatchData;
|
changeBlueOrbFocus: YellowTextDispatchData;
|
||||||
};
|
};
|
||||||
|
|
||||||
const YellowTextStateManager = (props: any) => {
|
const MainYellowTextManager = (props: any) => {
|
||||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
||||||
|
|
||||||
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
||||||
|
@ -196,4 +196,4 @@ const YellowTextStateManager = (props: any) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default YellowTextStateManager;
|
export default MainYellowTextManager;
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useCallback, useEffect, useMemo } from "react";
|
import React, { useCallback, useEffect, useMemo } from "react";
|
||||||
import { useMiddleRingStore } from "../../store";
|
import { useMiddleRingStore } from "../../../store";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||||
|
|
||||||
const MiddleRingStateManager = (props: any) => {
|
const MiddleRingManager = (props: any) => {
|
||||||
const setMiddleRingWobbleStrength = useMiddleRingStore(
|
const setMiddleRingWobbleStrength = useMiddleRingStore(
|
||||||
(state) => state.setMiddleRingWobbleStrength
|
(state) => state.setMiddleRingWobbleStrength
|
||||||
);
|
);
|
||||||
|
@ -225,4 +225,4 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MiddleRingStateManager;
|
export default MiddleRingManager;
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useEffect, useMemo } from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
import { useSiteStore } from "../../store";
|
import { useSiteStore } from "../../../store";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||||
import { StateManagerProps } from "./EventStateManager";
|
import { StateManagerProps } from "../EventStateManager";
|
||||||
|
|
||||||
const SiteStateManager = (props: StateManagerProps) => {
|
const SiteManager = (props: StateManagerProps) => {
|
||||||
const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
|
const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
|
||||||
const incrementSitePosY = useSiteStore((state) => state.incrementSitePosY);
|
const incrementSitePosY = useSiteStore((state) => state.incrementSitePosY);
|
||||||
const setIsSiteYChanging = useSiteStore((state) => state.setIsSiteChanging);
|
const setIsSiteYChanging = useSiteStore((state) => state.setIsSiteChanging);
|
||||||
|
@ -56,4 +56,4 @@ const SiteStateManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SiteStateManager;
|
export default SiteManager;
|
|
@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "../EventStateManager";
|
import { StateManagerProps } from "../EventStateManager";
|
||||||
import { useMediaStore } from "../../../store";
|
import { useMediaStore } from "../../../store";
|
||||||
|
|
||||||
const ActiveMediaElementStateManager = (props: StateManagerProps) => {
|
const ActiveMediaElementManager = (props: StateManagerProps) => {
|
||||||
const setActiveMediaElement = useMediaStore(
|
const setActiveMediaElement = useMediaStore(
|
||||||
(state) => state.setActiveMediaElement
|
(state) => state.setActiveMediaElement
|
||||||
);
|
);
|
||||||
|
@ -115,4 +115,4 @@ const ActiveMediaElementStateManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ActiveMediaElementStateManager;
|
export default ActiveMediaElementManager;
|
|
@ -16,16 +16,13 @@ type YellowTextDispatcher = {
|
||||||
exit_up: YellowTextDispatchData;
|
exit_up: YellowTextDispatchData;
|
||||||
};
|
};
|
||||||
|
|
||||||
const MediaYellowTextStateManager = (props: any) => {
|
const MediaYellowTextManager = (props: any) => {
|
||||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
||||||
|
|
||||||
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
||||||
(state) => state.setYellowTextOffsetXCoeff
|
(state) => state.setYellowTextOffsetXCoeff
|
||||||
);
|
);
|
||||||
|
|
||||||
const incrementYellowTextPosY = useTextRendererStore(
|
|
||||||
(state) => state.incrementYellowTextPosY
|
|
||||||
);
|
|
||||||
const setYellowTextPosY = useTextRendererStore(
|
const setYellowTextPosY = useTextRendererStore(
|
||||||
(state) => state.setYellowTextPosY
|
(state) => state.setYellowTextPosY
|
||||||
);
|
);
|
||||||
|
@ -90,4 +87,4 @@ const MediaYellowTextStateManager = (props: any) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MediaYellowTextStateManager;
|
export default MediaYellowTextManager;
|
|
@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "../EventStateManager";
|
import { StateManagerProps } from "../EventStateManager";
|
||||||
import { useMediaWordStore } from "../../../store";
|
import { useMediaWordStore } from "../../../store";
|
||||||
|
|
||||||
const MediaWordStateManager = (props: StateManagerProps) => {
|
const WordManager = (props: StateManagerProps) => {
|
||||||
const addToWordPositionDataStructIdx = useMediaWordStore(
|
const addToWordPositionDataStructIdx = useMediaWordStore(
|
||||||
(state) => state.addToWordPositionDataStructIdx
|
(state) => state.addToWordPositionDataStructIdx
|
||||||
);
|
);
|
||||||
|
@ -53,4 +53,4 @@ const MediaWordStateManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MediaWordStateManager;
|
export default WordManager;
|
|
@ -1,18 +1,18 @@
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { OrbitControls } from "drei";
|
import { OrbitControls } from "drei";
|
||||||
import React, { Suspense, useEffect } from "react";
|
import React, { Suspense, useEffect } from "react";
|
||||||
import Site from "./Site";
|
import Site from "../components/MainScene/Site";
|
||||||
import Lain from "./Lain";
|
import Lain from "../components/MainScene/Lain";
|
||||||
import Lights from "./Lights";
|
import Lights from "../components/MainScene/Lights";
|
||||||
import OrthoCamera from "./OrthoCamera";
|
import OrthoCamera from "../components/MainScene/OrthoCamera";
|
||||||
import Preloader from "./Preloader";
|
import Preloader from "../components/Preloader";
|
||||||
import EventStateManager from "./StateManagers/EventStateManager";
|
import EventStateManager from "../components/StateManagers/EventStateManager";
|
||||||
import MainSceneIntro from "./MainSceneIntro";
|
import MainSceneIntro from "../components/MainSceneIntro";
|
||||||
import GrayPlanes from "./GrayPlanes";
|
import GrayPlanes from "../components/MainScene/GrayPlanes";
|
||||||
import MiddleRing from "./MiddleRing";
|
import MiddleRing from "../components/MainScene/MiddleRing";
|
||||||
import Starfield from "./Starfield";
|
import Starfield from "../components/MainScene/Starfield";
|
||||||
import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
|
import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
|
||||||
import TextRenderer from "./TextRenderer/TextRenderer";
|
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
30
src/scenes/MediaScene.tsx
Normal file
30
src/scenes/MediaScene.tsx
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
import React from "react";
|
||||||
|
import { useMediaStore } from "../store";
|
||||||
|
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
||||||
|
import LeftSide from "../components/MediaScene/Selectables/LeftSide/LeftSide";
|
||||||
|
import RightSide from "../components/MediaScene/Selectables/RightSide/RightSide";
|
||||||
|
import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
|
||||||
|
import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
|
||||||
|
import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
||||||
|
|
||||||
|
const MediaScene = () => {
|
||||||
|
const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<group position={[0.4, -0.3, 0]}>
|
||||||
|
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 3]} />
|
||||||
|
<LeftSide activeMediaElement={activeMediaElement} />
|
||||||
|
<RightSide activeMediaElement={activeMediaElement} />
|
||||||
|
<AudioVisualizer />
|
||||||
|
<group position={[0, 0.5, 0]}>
|
||||||
|
<MediaLoadingBar />
|
||||||
|
<NodeNameContainer />
|
||||||
|
</group>
|
||||||
|
<group position={[0, 0, 13]} scale={[1, 1, 1]}>
|
||||||
|
<TextRenderer />
|
||||||
|
</group>
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MediaScene;
|
|
@ -124,11 +124,6 @@ type TextRendererState = {
|
||||||
toggleGreenText: () => void;
|
toggleGreenText: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type AudioVisualizerState = {
|
|
||||||
frequency: Uint8Array;
|
|
||||||
setFrequency: (to: Uint8Array) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
||||||
// yellow text
|
// yellow text
|
||||||
yellowText: "Play",
|
yellowText: "Play",
|
||||||
|
@ -331,7 +326,3 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||||
})),
|
})),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useAudioVisualizerStore = create<AudioVisualizerState>((set) => ({
|
|
||||||
frequency: new Uint8Array(),
|
|
||||||
setFrequency: (to) => set(() => ({ frequency: to })),
|
|
||||||
}));
|
|
||||||
|
|
Loading…
Reference in a new issue