mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
a lot.
This commit is contained in:
parent
03ec3d8f89
commit
8220e3ca2a
14 changed files with 1591 additions and 6370 deletions
|
@ -1,6 +1,6 @@
|
||||||
import React, { memo, useEffect, useMemo, useRef } from "react";
|
import React, { 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 { a, useSpring } 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";
|
||||||
|
|
|
@ -10,16 +10,10 @@ import GrayRing from "./GrayRing";
|
||||||
import CyanCrystal from "./CyanCrystal";
|
import CyanCrystal from "./CyanCrystal";
|
||||||
|
|
||||||
export type NodeDataType = {
|
export type NodeDataType = {
|
||||||
SLPS_016_0x_offset: string;
|
|
||||||
image_table_indices: { 1: string; 2: string; 3: string };
|
image_table_indices: { 1: string; 2: string; 3: string };
|
||||||
is_hidden: string;
|
is_hidden: string;
|
||||||
media_file: string;
|
media_file: string;
|
||||||
node_name: string;
|
node_name: string;
|
||||||
protocol_lines: {
|
|
||||||
1: string;
|
|
||||||
2: string;
|
|
||||||
3: string;
|
|
||||||
};
|
|
||||||
site: string;
|
site: string;
|
||||||
type: string;
|
type: string;
|
||||||
title: string;
|
title: string;
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import { useLevelStore, useMediaStore, useNodeStore } from "../../store";
|
import { useLevelStore, useMediaStore, useNodeStore } from "../../store";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import image_table from "../../resources/image_table.json";
|
import { LevelType, SiteType } from "../MainScene/Site";
|
||||||
import { LevelType } from "../MainScene/Site";
|
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import dummy from "../../static/sprite/dummy.png";
|
import dummy from "../../static/sprite/dummy.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
@ -32,17 +31,16 @@ const Images = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const nodeName = activeLevelData[activeNodeId].node_name;
|
const images = (site_a as SiteType)[activeLevel][activeNodeId]
|
||||||
|
.image_table_indices;
|
||||||
const images = image_table[nodeName as keyof typeof image_table];
|
|
||||||
|
|
||||||
const imgArr: { default: string }[] = [];
|
const imgArr: { default: string }[] = [];
|
||||||
Object.values(images).forEach((img) => {
|
Object.entries(images).forEach((img) => {
|
||||||
import("../../static/media_images/site_a/" + img + ".png").then(
|
import("../../static/media_images/a/" + img[1] + ".png").then(
|
||||||
(imageSrc: { default: string }) => {
|
(imageSrc: { default: string }) => {
|
||||||
// images are unordered by default so we insert them into the arr
|
// images are unordered by default so we insert them into the arr
|
||||||
// according to their last char
|
// according to their last char
|
||||||
imgArr.splice(parseInt(img.substr(img.length - 1)), 0, imageSrc);
|
imgArr.splice(parseInt(img[0]), 0, imageSrc);
|
||||||
if (imgArr.length === 3) {
|
if (imgArr.length === 3) {
|
||||||
setSceneImages(imgArr);
|
setSceneImages(imgArr);
|
||||||
new THREE.TextureLoader().load(imgArr[0].default, setActiveImage);
|
new THREE.TextureLoader().load(imgArr[0].default, setActiveImage);
|
||||||
|
@ -50,7 +48,7 @@ const Images = () => {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}, [activeLevelData, activeNodeId]);
|
}, [activeLevel, activeLevelData, activeNodeId]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mediaPercentageElapsed === 0 && sceneImages[0]) {
|
if (mediaPercentageElapsed === 0 && sceneImages[0]) {
|
||||||
|
|
|
@ -1,14 +1,33 @@
|
||||||
import React, { createRef, useCallback, useRef } from "react";
|
import React, {
|
||||||
import test from "../../static/movie/LAIN01.XA[18].ogg";
|
createRef,
|
||||||
import { useMediaStore, useSceneStore } from "../../store";
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
|
import site_a from "../../resources/site_a.json";
|
||||||
|
import {
|
||||||
|
useLevelStore,
|
||||||
|
useMediaStore,
|
||||||
|
useNodeStore,
|
||||||
|
useSceneStore,
|
||||||
|
useSiteStore,
|
||||||
|
} from "../../store";
|
||||||
import t from "../../static/webvtt/test.vtt";
|
import t from "../../static/webvtt/test.vtt";
|
||||||
|
import { SiteType } from "../MainScene/Site";
|
||||||
|
|
||||||
const MediaPlayer = () => {
|
const MediaPlayer = () => {
|
||||||
|
const [mediaSource, setMediaSource] = useState<any>();
|
||||||
|
|
||||||
const currentScene = useSceneStore((state) => state.currentScene);
|
const currentScene = useSceneStore((state) => state.currentScene);
|
||||||
const setPercentageElapsed = useMediaStore(
|
const setPercentageElapsed = useMediaStore(
|
||||||
(state) => state.setPercentageElapsed
|
(state) => state.setPercentageElapsed
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const currentSite = useSiteStore((state) => state.currentSite);
|
||||||
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
|
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||||
|
|
||||||
const requestRef = useRef();
|
const requestRef = useRef();
|
||||||
const videoRef = createRef<HTMLVideoElement>();
|
const videoRef = createRef<HTMLVideoElement>();
|
||||||
|
|
||||||
|
@ -25,12 +44,42 @@ const MediaPlayer = () => {
|
||||||
}
|
}
|
||||||
}, [setPercentageElapsed, videoRef]);
|
}, [setPercentageElapsed, videoRef]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
useEffect(() => {
|
||||||
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
||||||
const curr = requestRef.current;
|
const curr = requestRef.current;
|
||||||
return () => cancelAnimationFrame(curr as any);
|
return () => cancelAnimationFrame(curr as any);
|
||||||
}, [updateTime]);
|
}, [updateTime]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentScene === "media") {
|
||||||
|
const nodeMedia = (site_a as SiteType)[activeLevel][activeNodeId]
|
||||||
|
.media_file;
|
||||||
|
if (nodeMedia.includes("XA")) {
|
||||||
|
import(
|
||||||
|
"../../static/audio/" + currentSite + "/" + nodeMedia + ".ogg"
|
||||||
|
).then((media) => {
|
||||||
|
setMediaSource(media.default);
|
||||||
|
if (videoRef.current) {
|
||||||
|
videoRef.current.load();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
import(
|
||||||
|
"../../static/movie/" +
|
||||||
|
currentSite +
|
||||||
|
"/" +
|
||||||
|
nodeMedia +
|
||||||
|
"[0].webm"
|
||||||
|
).then((media) => {
|
||||||
|
setMediaSource(media.default);
|
||||||
|
if (videoRef.current) {
|
||||||
|
videoRef.current.load();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [activeLevel, activeNodeId, currentScene, currentSite, videoRef]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<video
|
<video
|
||||||
width="800"
|
width="800"
|
||||||
|
@ -40,7 +89,7 @@ const MediaPlayer = () => {
|
||||||
ref={videoRef}
|
ref={videoRef}
|
||||||
style={{ display: currentScene === "media" ? "block" : "none" }}
|
style={{ display: currentScene === "media" ? "block" : "none" }}
|
||||||
>
|
>
|
||||||
<source src={test} />
|
<source src={mediaSource} />
|
||||||
<track src={t} kind="captions" default />
|
<track src={t} kind="captions" default />
|
||||||
</video>
|
</video>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React from "react";
|
import React, { useMemo } from "react";
|
||||||
import TriangularPrism from "./LeftSide/TriangularPrism";
|
import TriangularPrism from "./LeftSide/TriangularPrism";
|
||||||
import Cube from "./LeftSide/Cube";
|
import Cube from "./LeftSide/Cube";
|
||||||
|
import { useSpring, a } from "@react-spring/three";
|
||||||
|
|
||||||
type LeftSideProps = {
|
type LeftSideProps = {
|
||||||
activeMediaComponent: string;
|
activeMediaComponent: string;
|
||||||
|
@ -16,26 +17,87 @@ const LeftSide = (props: LeftSideProps) => {
|
||||||
const cubesActive = props.activeMediaComponent === "exit";
|
const cubesActive = props.activeMediaComponent === "exit";
|
||||||
const trianglesActive = props.activeMediaComponent === "play";
|
const trianglesActive = props.activeMediaComponent === "play";
|
||||||
|
|
||||||
|
const groupSpringConfig = useMemo(() => ({ duration: 500 }), []);
|
||||||
|
const groupSpringFinalDest = useMemo(
|
||||||
|
() => ({ posX: 0, posZ: 0, posY: 0 }),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const topFrontGroupPos = useSpring({
|
||||||
|
config: groupSpringConfig,
|
||||||
|
to: groupSpringFinalDest,
|
||||||
|
from: { posX: 4, posZ: 2, posY: 1 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const bottomFrontGroupPos = useSpring({
|
||||||
|
config: groupSpringConfig,
|
||||||
|
to: groupSpringFinalDest,
|
||||||
|
from: { posX: 0, posZ: 2, posY: 0 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const topBehindGroupPos = useSpring({
|
||||||
|
config: groupSpringConfig,
|
||||||
|
to: groupSpringFinalDest,
|
||||||
|
from: { posX: 0, posZ: -3, posY: 2 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const bottomBehindGroupPos = useSpring({
|
||||||
|
config: groupSpringConfig,
|
||||||
|
to: groupSpringFinalDest,
|
||||||
|
from: { posX: 4, posZ: -2, posY: 1 },
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, 0, -3]}>
|
<group position={[0, 0, -3]}>
|
||||||
<Cube position={[-2.7, -1.6, 0.6]} active={cubesActive} />
|
<a.group
|
||||||
<TriangularPrism position={[-3.5, -1.6, 0.6]} active={!trianglesActive} />
|
position-x={bottomBehindGroupPos.posX}
|
||||||
<Cube position={[-3.5, -0.9, 0.6]} active={cubesActive} />
|
position-z={bottomBehindGroupPos.posZ}
|
||||||
<TriangularPrism position={[-2.7, -0.9, 0.6]} active={trianglesActive} />
|
position-y={bottomBehindGroupPos.posY}
|
||||||
<Cube position={[-3.5, -0.9, 1.2]} active={cubesActive} />
|
>
|
||||||
<TriangularPrism position={[-3.5, -1.6, 1.2]} active={trianglesActive} />
|
<Cube position={[-2.7, -1.6, 0.6]} active={cubesActive} />
|
||||||
|
<TriangularPrism
|
||||||
{/*main two*/}
|
position={[-3.5, -1.6, 0.6]}
|
||||||
<Cube
|
active={!trianglesActive}
|
||||||
position={[-2.7, -1.6, 1.2]}
|
/>
|
||||||
active={cubesActive}
|
</a.group>
|
||||||
selectable={true}
|
<a.group
|
||||||
/>
|
position-x={topBehindGroupPos.posX}
|
||||||
<TriangularPrism
|
position-z={topBehindGroupPos.posZ}
|
||||||
position={[-2.7, -0.9, 1.2]}
|
position-y={topBehindGroupPos.posY}
|
||||||
active={trianglesActive}
|
>
|
||||||
selectable={true}
|
<Cube position={[-3.5, -0.9, 0.6]} active={cubesActive} />
|
||||||
/>
|
<TriangularPrism
|
||||||
|
position={[-2.7, -0.9, 0.6]}
|
||||||
|
active={trianglesActive}
|
||||||
|
/>
|
||||||
|
</a.group>
|
||||||
|
<a.group
|
||||||
|
position-x={topFrontGroupPos.posX}
|
||||||
|
position-z={topFrontGroupPos.posZ}
|
||||||
|
position-y={topFrontGroupPos.posY}
|
||||||
|
>
|
||||||
|
<Cube position={[-3.5, -0.9, 1.2]} active={cubesActive} />
|
||||||
|
<TriangularPrism
|
||||||
|
position={[-2.7, -0.9, 1.2]}
|
||||||
|
active={trianglesActive}
|
||||||
|
selectable={true}
|
||||||
|
/>
|
||||||
|
</a.group>
|
||||||
|
<a.group
|
||||||
|
position-x={bottomFrontGroupPos.posX}
|
||||||
|
position-z={bottomFrontGroupPos.posZ}
|
||||||
|
position-y={bottomFrontGroupPos.posY}
|
||||||
|
>
|
||||||
|
<Cube
|
||||||
|
position={[-2.7, -1.6, 1.2]}
|
||||||
|
active={cubesActive}
|
||||||
|
selectable={true}
|
||||||
|
/>
|
||||||
|
<TriangularPrism
|
||||||
|
position={[-3.5, -1.6, 1.2]}
|
||||||
|
active={trianglesActive}
|
||||||
|
/>
|
||||||
|
</a.group>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,16 +1,21 @@
|
||||||
import React, { useCallback, useMemo } from "react";
|
import React, { useCallback, useMemo } from "react";
|
||||||
import { useMediaWordStore } from "../../../store";
|
import { useLevelStore, useMediaWordStore, useNodeStore } from "../../../store";
|
||||||
import Word from "./RightSide/Word";
|
import Word from "./RightSide/Word";
|
||||||
import { useSpring, a } from "@react-spring/three";
|
import { useSpring, a } from "@react-spring/three";
|
||||||
import word_position_states from "../../../resources/word_position_states.json";
|
import word_position_states from "../../../resources/word_position_states.json";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
import site_a from "../../../resources/site_a.json";
|
||||||
|
import { SiteType } from "../../MainScene/Site";
|
||||||
|
|
||||||
type RightSideProps = {
|
type RightSideProps = {
|
||||||
activeMediaComponent: string;
|
activeMediaComponent: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const RightSide = (props: RightSideProps) => {
|
const RightSide = (props: RightSideProps) => {
|
||||||
const words = useMediaWordStore((state) => state.words);
|
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||||
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
|
|
||||||
|
const words = (site_a as SiteType)[activeLevel][activeNodeId].words;
|
||||||
|
|
||||||
const posStateIdx = useMediaWordStore(
|
const posStateIdx = useMediaWordStore(
|
||||||
(state) => state.posStateIdx
|
(state) => state.posStateIdx
|
||||||
|
@ -71,19 +76,19 @@ const RightSide = (props: RightSideProps) => {
|
||||||
</line>
|
</line>
|
||||||
</a.group>
|
</a.group>
|
||||||
<Word
|
<Word
|
||||||
word={words[0]}
|
word={words[1]}
|
||||||
posX={wordPositionStateSpring.fstWordPosX}
|
posX={wordPositionStateSpring.fstWordPosX}
|
||||||
posY={wordPositionStateSpring.fstWordPosY}
|
posY={wordPositionStateSpring.fstWordPosY}
|
||||||
active={props.activeMediaComponent === "fstWord"}
|
active={props.activeMediaComponent === "fstWord"}
|
||||||
/>
|
/>
|
||||||
<Word
|
<Word
|
||||||
word={words[1]}
|
word={words[2]}
|
||||||
posX={wordPositionStateSpring.sndWordPosX}
|
posX={wordPositionStateSpring.sndWordPosX}
|
||||||
posY={wordPositionStateSpring.sndWordPosY}
|
posY={wordPositionStateSpring.sndWordPosY}
|
||||||
active={props.activeMediaComponent === "sndWord"}
|
active={props.activeMediaComponent === "sndWord"}
|
||||||
/>
|
/>
|
||||||
<Word
|
<Word
|
||||||
word={words[2]}
|
word={words[3]}
|
||||||
posX={wordPositionStateSpring.thirdWordPosX}
|
posX={wordPositionStateSpring.thirdWordPosX}
|
||||||
posY={wordPositionStateSpring.thirdWordPosY}
|
posY={wordPositionStateSpring.thirdWordPosY}
|
||||||
active={props.activeMediaComponent === "thirdWord"}
|
active={props.activeMediaComponent === "thirdWord"}
|
||||||
|
|
|
@ -8,31 +8,48 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
(state) => state.setNodeMatrixIndices
|
(state) => state.setNodeMatrixIndices
|
||||||
);
|
);
|
||||||
|
|
||||||
const animateActiveNodeThrow = useCallback(() => {
|
const animateActiveNodeThrow = useCallback(
|
||||||
setActiveNodeState(true, "interactedWith");
|
(siteRotY: number) => {
|
||||||
|
setActiveNodeState(true, "interactedWith");
|
||||||
|
|
||||||
setActiveNodeState(0.3, "posZ");
|
const calculateCoordsBasedOnRotation = (
|
||||||
setActiveNodeState(0.9, "posX");
|
x: number,
|
||||||
|
z: number,
|
||||||
|
rotation: number
|
||||||
|
) => ({
|
||||||
|
x: x * Math.cos(rotation) - z * Math.sin(rotation),
|
||||||
|
z: x * Math.sin(rotation) + z * Math.cos(rotation),
|
||||||
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
||||||
setActiveNodeState(0.2, "posZ");
|
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
||||||
setActiveNodeState(0.5, "posX");
|
const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
|
||||||
}, 800);
|
const fourthCoordSet = calculateCoordsBasedOnRotation(0, 2, siteRotY);
|
||||||
setTimeout(() => {
|
|
||||||
setActiveNodeState(1.55, "posX");
|
|
||||||
setActiveNodeState(-0.005, "rotZ");
|
|
||||||
}, 2600);
|
|
||||||
setTimeout(() => {
|
|
||||||
setActiveNodeState(2, "posZ");
|
|
||||||
setActiveNodeState(0, "posX");
|
|
||||||
setActiveNodeState(-0.5, "rotZ");
|
|
||||||
}, 2700);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setActiveNodeState(fstCoordSet.x, "posX");
|
||||||
setActiveNodeState(0, "rotZ");
|
setActiveNodeState(fstCoordSet.z, "posZ");
|
||||||
setActiveNodeState(false, "interactedWith");
|
|
||||||
}, 3800);
|
setTimeout(() => {
|
||||||
}, [setActiveNodeState]);
|
setActiveNodeState(sndCoordSet.x, "posX");
|
||||||
|
setActiveNodeState(sndCoordSet.z, "posZ");
|
||||||
|
}, 800);
|
||||||
|
setTimeout(() => {
|
||||||
|
setActiveNodeState(thirdCoordSet.x, "posX");
|
||||||
|
setActiveNodeState(-0.005, "rotZ");
|
||||||
|
}, 2600);
|
||||||
|
setTimeout(() => {
|
||||||
|
setActiveNodeState(fourthCoordSet.x, "posX");
|
||||||
|
setActiveNodeState(fourthCoordSet.z, "posZ");
|
||||||
|
setActiveNodeState(-0.5, "rotZ");
|
||||||
|
}, 2700);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setActiveNodeState(0, "rotZ");
|
||||||
|
setActiveNodeState(false, "interactedWith");
|
||||||
|
}, 3800);
|
||||||
|
},
|
||||||
|
[setActiveNodeState]
|
||||||
|
);
|
||||||
|
|
||||||
const updateActiveNode = useCallback(
|
const updateActiveNode = useCallback(
|
||||||
(
|
(
|
||||||
|
@ -61,7 +78,8 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
matrixIdx: number;
|
matrixIdx: number;
|
||||||
rowIdx: number;
|
rowIdx: number;
|
||||||
colIdx: number;
|
colIdx: number;
|
||||||
}
|
},
|
||||||
|
newSiteRotY: number
|
||||||
) => {
|
) => {
|
||||||
switch (event) {
|
switch (event) {
|
||||||
case "site_up":
|
case "site_up":
|
||||||
|
@ -84,7 +102,7 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
case "throw_node_sskn":
|
case "throw_node_sskn":
|
||||||
return {
|
return {
|
||||||
action: animateActiveNodeThrow,
|
action: animateActiveNodeThrow,
|
||||||
value: [0, true],
|
value: [newSiteRotY],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -96,11 +114,13 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
const eventAction = props.eventState.event;
|
const eventAction = props.eventState.event;
|
||||||
const newActiveNodeId = props.eventState.newActiveNodeId;
|
const newActiveNodeId = props.eventState.newActiveNodeId;
|
||||||
const newNodeMatrixIndices = props.eventState.newNodeMatrixIndices;
|
const newNodeMatrixIndices = props.eventState.newNodeMatrixIndices;
|
||||||
|
const newSiteRotY = props.eventState.newSiteRotY;
|
||||||
|
|
||||||
const dispatchedObject = dispatchObject(
|
const dispatchedObject = dispatchObject(
|
||||||
eventAction,
|
eventAction,
|
||||||
newActiveNodeId,
|
newActiveNodeId,
|
||||||
newNodeMatrixIndices
|
newNodeMatrixIndices,
|
||||||
|
newSiteRotY
|
||||||
);
|
);
|
||||||
|
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
|
|
|
@ -51,7 +51,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
newSitePosY = selectedNodeData.newSitePosY;
|
newSitePosY = selectedNodeData.newSitePosY;
|
||||||
newLevel = selectedNodeData.newLevel;
|
newLevel = selectedNodeData.newLevel;
|
||||||
newActiveHudId = selectedNodeData.newActiveHudId;
|
newActiveHudId = selectedNodeData.newActiveHudId;
|
||||||
console.log(selectedNodeData.newActiveNodeId);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
@ -70,6 +70,9 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
switch (parseInt(nodeType)) {
|
switch (parseInt(nodeType)) {
|
||||||
case 0:
|
case 0:
|
||||||
case 2:
|
case 2:
|
||||||
|
case 4:
|
||||||
|
case 3:
|
||||||
|
case 5:
|
||||||
event = eventAnimation + "media";
|
event = eventAnimation + "media";
|
||||||
newScene = "media";
|
newScene = "media";
|
||||||
break;
|
break;
|
||||||
|
|
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
@ -1,470 +0,0 @@
|
||||||
{
|
|
||||||
"0": "electric wire",
|
|
||||||
"1": "sky",
|
|
||||||
"10": "chaos",
|
|
||||||
"100": "aggression",
|
|
||||||
"101": "decision ",
|
|
||||||
"102": "mind",
|
|
||||||
"103": "murder intent",
|
|
||||||
"104": "suicide",
|
|
||||||
"105": "necessity",
|
|
||||||
"107": "utilization",
|
|
||||||
"107": "obstacle",
|
|
||||||
"108": "be frightened",
|
|
||||||
"109": "birth",
|
|
||||||
"11": "prompt",
|
|
||||||
"110": "room",
|
|
||||||
"111": "never realize",
|
|
||||||
"112": "absent",
|
|
||||||
"113": "self-confidence",
|
|
||||||
"114": "absorption",
|
|
||||||
"115": "trance",
|
|
||||||
"116": "soothing",
|
|
||||||
"117": "primacy",
|
|
||||||
"118": "vain person",
|
|
||||||
"119": "impulse",
|
|
||||||
"12": "indifference",
|
|
||||||
"120": "useless",
|
|
||||||
"121": "will&existence",
|
|
||||||
"122": "lower half",
|
|
||||||
"123": "wish",
|
|
||||||
"124": "transfer",
|
|
||||||
"125": "open the nExt.",
|
|
||||||
"126": "black tea",
|
|
||||||
"127": "milk",
|
|
||||||
"128": "dislike",
|
|
||||||
"129": "consultation",
|
|
||||||
"13": "human being",
|
|
||||||
"130": "boast",
|
|
||||||
"131": "advice",
|
|
||||||
"132": "desire",
|
|
||||||
"133": "investigation",
|
|
||||||
"134": "relax",
|
|
||||||
"135": "friend",
|
|
||||||
"136": "secret",
|
|
||||||
"137": "doll",
|
|
||||||
"138": "be tired",
|
|
||||||
"139": "study",
|
|
||||||
"14": "noise",
|
|
||||||
"140": "worry",
|
|
||||||
"141": "melancholy",
|
|
||||||
"142": "sLf-persecution",
|
|
||||||
"143": "imagination",
|
|
||||||
"144": "understanding",
|
|
||||||
"145": "impossible",
|
|
||||||
"146": "laboratory",
|
|
||||||
"147": "danger",
|
|
||||||
"148": "A.hallucination",
|
|
||||||
"149": "sensitivity",
|
|
||||||
"15": "duty",
|
|
||||||
"150": "needless",
|
|
||||||
"151": "diary",
|
|
||||||
"152": "complaint",
|
|
||||||
"153": "ego",
|
|
||||||
"154": "special",
|
|
||||||
"155": "elusion",
|
|
||||||
"156": "deny",
|
|
||||||
"157": "fiction",
|
|
||||||
"158": "intrapsychic",
|
|
||||||
"159": "apology",
|
|
||||||
"16": "school",
|
|
||||||
"160": "glad",
|
|
||||||
"161": "birthday",
|
|
||||||
"162": "present",
|
|
||||||
"163": "eye",
|
|
||||||
"164": "delusion",
|
|
||||||
"165": "illness",
|
|
||||||
"166": "counselor",
|
|
||||||
"167": "hallucination",
|
|
||||||
"168": "stress",
|
|
||||||
"169": "normal",
|
|
||||||
"17": "silence",
|
|
||||||
"170": "favorable turn",
|
|
||||||
"171": "deterioration",
|
|
||||||
"172": "engagement",
|
|
||||||
"173": "drunk",
|
|
||||||
"174": "hairstyle",
|
|
||||||
"175": "charm",
|
|
||||||
"176": "seem ",
|
|
||||||
"177": "image",
|
|
||||||
"178": "explanation",
|
|
||||||
"179": "research",
|
|
||||||
"18": "smile",
|
|
||||||
"180": "remembrance",
|
|
||||||
"181": "retrieval",
|
|
||||||
"182": "resignation",
|
|
||||||
"183": "happiness",
|
|
||||||
"184": "identification",
|
|
||||||
"185": "experience",
|
|
||||||
"186": "misato",
|
|
||||||
"187": "idolize",
|
|
||||||
"188": "alienation",
|
|
||||||
"189": "missing self",
|
|
||||||
"19": "character",
|
|
||||||
"190": "immature",
|
|
||||||
"191": "sleepless",
|
|
||||||
"192": "function",
|
|
||||||
"193": "odd jobs",
|
|
||||||
"194": "treatise",
|
|
||||||
"195": "father",
|
|
||||||
"196": "existence",
|
|
||||||
"197": "proof",
|
|
||||||
"198": "fact",
|
|
||||||
"199": "private tutor",
|
|
||||||
"2": "recognition",
|
|
||||||
"20": "sanity",
|
|
||||||
"200": "kaori",
|
|
||||||
"201": "love",
|
|
||||||
"202": "area",
|
|
||||||
"203": "God",
|
|
||||||
"204": "rumor",
|
|
||||||
"205": "doubt",
|
|
||||||
"206": "lonely",
|
|
||||||
"207": "client",
|
|
||||||
"208": "family",
|
|
||||||
"209": "no problem",
|
|
||||||
"21": "home page",
|
|
||||||
"210": "negative",
|
|
||||||
"211": "impression",
|
|
||||||
"212": "symptom",
|
|
||||||
"213": "game",
|
|
||||||
"214": "complex",
|
|
||||||
"215": "pupil",
|
|
||||||
"216": "conflict",
|
|
||||||
"217": "hatred ",
|
|
||||||
"218": "purpose",
|
|
||||||
"219": "mother",
|
|
||||||
"22": "computer",
|
|
||||||
"220": "distrust",
|
|
||||||
"221": "faith",
|
|
||||||
"222": "interest",
|
|
||||||
"223": "object",
|
|
||||||
"224": "longing",
|
|
||||||
"225": "cheerful",
|
|
||||||
"226": "Dr.takashima",
|
|
||||||
"227": "harassment",
|
|
||||||
"228": "chief of bureau",
|
|
||||||
"229": "classmate",
|
|
||||||
"23": "psychomotor",
|
|
||||||
"230": "problem",
|
|
||||||
"231": "neutrality",
|
|
||||||
"232": "charge",
|
|
||||||
"233": "restoration",
|
|
||||||
"234": "ethics",
|
|
||||||
"235": "lead",
|
|
||||||
"236": "hysterics",
|
|
||||||
"237": "condition",
|
|
||||||
"238": "amnesia",
|
|
||||||
"239": "self-rating",
|
|
||||||
"24": "exercise",
|
|
||||||
"240": "look good on",
|
|
||||||
"241": "hunch",
|
|
||||||
"242": "tachibana",
|
|
||||||
"243": "answer",
|
|
||||||
"244": "scold",
|
|
||||||
"245": "habit",
|
|
||||||
"246": "glasses",
|
|
||||||
"247": "lover",
|
|
||||||
"248": "confession",
|
|
||||||
"249": "boredom",
|
|
||||||
"25": "be active",
|
|
||||||
"250": "makeup",
|
|
||||||
"251": "common",
|
|
||||||
"252": "wretched",
|
|
||||||
"253": "kyoko",
|
|
||||||
"254": "whereabouts",
|
|
||||||
"255": "distortion",
|
|
||||||
"256": "conversion",
|
|
||||||
"257": "touko",
|
|
||||||
"258": "library",
|
|
||||||
"259": "talk with",
|
|
||||||
"26": "memories",
|
|
||||||
"260": "come in sight",
|
|
||||||
"261": "tomokun",
|
|
||||||
"262": "alright",
|
|
||||||
"263": "boy",
|
|
||||||
"264": "natural",
|
|
||||||
"265": "abnormal",
|
|
||||||
"266": "dream",
|
|
||||||
"267": "anger",
|
|
||||||
"268": "sadness",
|
|
||||||
"269": "cold",
|
|
||||||
"27": "amusing",
|
|
||||||
"270": "cake",
|
|
||||||
"271": "reward",
|
|
||||||
"272": "breast",
|
|
||||||
"273": "sexuality",
|
|
||||||
"274": "note",
|
|
||||||
"275": "think",
|
|
||||||
"276": "prohibition",
|
|
||||||
"277": "souvenir",
|
|
||||||
"278": "unpleasant",
|
|
||||||
"279": "meanness",
|
|
||||||
"28": "recurrence",
|
|
||||||
"280": "solitude",
|
|
||||||
"281": "graduation",
|
|
||||||
"282": "expectation",
|
|
||||||
"283": "middle school",
|
|
||||||
"284": "neglect",
|
|
||||||
"285": "meaning",
|
|
||||||
"286": "NAVI",
|
|
||||||
"287": "network",
|
|
||||||
"288": "telephone",
|
|
||||||
"289": "trouble",
|
|
||||||
"29": "memory",
|
|
||||||
"290": "business trip",
|
|
||||||
"291": "seeing off",
|
|
||||||
"292": "business",
|
|
||||||
"293": "Mr.rabbit",
|
|
||||||
"294": "footprint",
|
|
||||||
"295": "mail",
|
|
||||||
"296": "open",
|
|
||||||
"297": "revenge",
|
|
||||||
"298": "regrettable",
|
|
||||||
"299": "peace of mind",
|
|
||||||
"3": "pretend",
|
|
||||||
"30": "bad atmosphere",
|
|
||||||
"300": "transfiguration",
|
|
||||||
"301": "agree",
|
|
||||||
"302": "extra. lesson",
|
|
||||||
"303": "violin",
|
|
||||||
"304": "together",
|
|
||||||
"305": "monopoly",
|
|
||||||
"306": "painting",
|
|
||||||
"307": "cause",
|
|
||||||
"308": "seek",
|
|
||||||
"309": "mystery",
|
|
||||||
"31": "accept",
|
|
||||||
"310": "delete",
|
|
||||||
"311": "pleasant",
|
|
||||||
"312": "constancy",
|
|
||||||
"313": "cUl.attraction",
|
|
||||||
"314": "motive",
|
|
||||||
"315": "money",
|
|
||||||
"316": "corporation",
|
|
||||||
"317": "awareness",
|
|
||||||
"318": "fall ill",
|
|
||||||
"319": "despair",
|
|
||||||
"32": "admiration",
|
|
||||||
"320": "cO.unconsious",
|
|
||||||
"321": "hesitation",
|
|
||||||
"322": "jealousy",
|
|
||||||
"323": "exchange",
|
|
||||||
"324": "disturbance",
|
|
||||||
"325": "harmful effects",
|
|
||||||
"326": "selfish",
|
|
||||||
"327": "news-group",
|
|
||||||
"328": "man",
|
|
||||||
"329": "woman",
|
|
||||||
"33": "abuse",
|
|
||||||
"330": "anonymous",
|
|
||||||
"331": "naturally",
|
|
||||||
"332": "plagiarism",
|
|
||||||
"333": "agreement",
|
|
||||||
"334": "wait for",
|
|
||||||
"335": "believe",
|
|
||||||
"336": "sorrow",
|
|
||||||
"337": "side",
|
|
||||||
"338": "magazine",
|
|
||||||
"339": "idea",
|
|
||||||
"34": "decision",
|
|
||||||
"340": "regret",
|
|
||||||
"341": "existence cause",
|
|
||||||
"342": "bed",
|
|
||||||
"343": "smell",
|
|
||||||
"344": "wired",
|
|
||||||
"345": "companion",
|
|
||||||
"346": "data",
|
|
||||||
"347": "observation",
|
|
||||||
"348": "address",
|
|
||||||
"349": "illusion",
|
|
||||||
"35": "excuse",
|
|
||||||
"350": "divorce",
|
|
||||||
"351": "hug",
|
|
||||||
"352": "cry",
|
|
||||||
"353": "parting",
|
|
||||||
"354": "weed",
|
|
||||||
"355": "swing",
|
|
||||||
"356": "grudge",
|
|
||||||
"357": "ant",
|
|
||||||
"358": "cracking",
|
|
||||||
"359": "renewal",
|
|
||||||
"36": "knowledge",
|
|
||||||
"360": "contact",
|
|
||||||
"361": "feature",
|
|
||||||
"362": "robot",
|
|
||||||
"363": "limitation",
|
|
||||||
"364": "evolution",
|
|
||||||
"365": "interspersed",
|
|
||||||
"366": "lie",
|
|
||||||
"367": "proto",
|
|
||||||
"368": "misunderstand",
|
|
||||||
"369": "parts",
|
|
||||||
"37": "life",
|
|
||||||
"370": "excitement",
|
|
||||||
"371": "home",
|
|
||||||
"372": "Oh my God.",
|
|
||||||
"373": "bug",
|
|
||||||
"374": "access",
|
|
||||||
"375": "mischief",
|
|
||||||
"376": "permission",
|
|
||||||
"377": "help",
|
|
||||||
"378": "nonsense",
|
|
||||||
"379": "notice",
|
|
||||||
"38": "pursuit",
|
|
||||||
"380": "police",
|
|
||||||
"381": "lain",
|
|
||||||
"382": "painful",
|
|
||||||
"383": "takeshi",
|
|
||||||
"384": "cool",
|
|
||||||
"385": "suppression",
|
|
||||||
"386": "diet",
|
|
||||||
"387": "as it is",
|
|
||||||
"388": "in the future",
|
|
||||||
"389": "care",
|
|
||||||
"39": "anxiety",
|
|
||||||
"390": "farewell",
|
|
||||||
"391": "congratulations",
|
|
||||||
"392": "treasure",
|
|
||||||
"393": "uneasiness",
|
|
||||||
"394": "leave alone",
|
|
||||||
"395": "harumi",
|
|
||||||
"396": "marriage",
|
|
||||||
"397": "kanako",
|
|
||||||
"398": "not satisfied",
|
|
||||||
"399": "sexual",
|
|
||||||
"4": "phenomenon",
|
|
||||||
"40": "intellectual",
|
|
||||||
"400": "unstable",
|
|
||||||
"401": "despise",
|
|
||||||
"402": "flower",
|
|
||||||
"403": "obscenity",
|
|
||||||
"404": "quiet",
|
|
||||||
"405": "lunch",
|
|
||||||
"406": "blessing",
|
|
||||||
"407": "envy",
|
|
||||||
"408": "yoshida",
|
|
||||||
"409": "health imple.",
|
|
||||||
"41": "sCh.avoidance",
|
|
||||||
"410": "point out",
|
|
||||||
"411": "RML",
|
|
||||||
"412": "ring",
|
|
||||||
"413": "control",
|
|
||||||
"414": "prayer",
|
|
||||||
"415": "betrayal",
|
|
||||||
"416": "persuasion",
|
|
||||||
"417": "DATA of CLN01",
|
|
||||||
"418": "authorized_il",
|
|
||||||
"419": "active_file:lv",
|
|
||||||
"42": "apprehension",
|
|
||||||
"420": "ftp/tl.S_server",
|
|
||||||
"421": "DATA of CLN-1",
|
|
||||||
"422": "DATA of CLN00",
|
|
||||||
"423": "101",
|
|
||||||
"424": "COUNSELING_REC.",
|
|
||||||
"425": "downloaded file",
|
|
||||||
"426": "DIAGNOSIS_CLN01",
|
|
||||||
"427": "DIAGNOSIS_CLN00",
|
|
||||||
"428": "RESEARCH_\"Ma\"",
|
|
||||||
"429": "ftp/poa_server",
|
|
||||||
"43": "environment",
|
|
||||||
"430": "NEWS_SHOW",
|
|
||||||
"431": "talking_F#00021",
|
|
||||||
"432": "talking_F#00381",
|
|
||||||
"433": "talking_F#01980",
|
|
||||||
"434": "talking_F#04522",
|
|
||||||
"435": "talking_F#10294",
|
|
||||||
"436": "talking_F#15413",
|
|
||||||
"437": "network_voices?",
|
|
||||||
"438": "anonymous_user",
|
|
||||||
"439": "***unknown",
|
|
||||||
"44": "individuation",
|
|
||||||
"440": "ftp/**%#\"673\"",
|
|
||||||
"441": "ftp/**76%373\"",
|
|
||||||
"442": "ftp/52\"**3\"",
|
|
||||||
"443": "ftp/%2\"53\"",
|
|
||||||
"444": "ftp/006%3",
|
|
||||||
"445": "ftp/*4451%\"",
|
|
||||||
"446": "ftp/789.235\"",
|
|
||||||
"447": "ftp/121.%%0",
|
|
||||||
"448": "ftp/078.123%\"",
|
|
||||||
"449": "ftp/\"\"%#808",
|
|
||||||
"45": "body",
|
|
||||||
"450": "RESEARCH_\"Ky\"",
|
|
||||||
"451": "decoded file:",
|
|
||||||
"452": "ftp/tl.L_server",
|
|
||||||
"453": "RESEARCH_\"Ka\"",
|
|
||||||
"454": "lain's_DIARY",
|
|
||||||
"455": "active_file:",
|
|
||||||
"456": "TOUKO's_DIARY",
|
|
||||||
"457": "decoded file:t",
|
|
||||||
"458": "",
|
|
||||||
"459": "nT APPLICATION",
|
|
||||||
"46": "look back on",
|
|
||||||
"460": "network tool",
|
|
||||||
"461": "changing site",
|
|
||||||
"462": " quarter of GP",
|
|
||||||
"463": "POLY-TAN PARTS",
|
|
||||||
"464": "mT up-date App.",
|
|
||||||
"465": "movie tool",
|
|
||||||
"466": "playing movie",
|
|
||||||
"467": "freeware",
|
|
||||||
"47": "instrument",
|
|
||||||
"48": "feeling",
|
|
||||||
"49": "oral",
|
|
||||||
"5": "state",
|
|
||||||
"50": "world",
|
|
||||||
"51": "psychiatrist",
|
|
||||||
"52": "psychotherapy",
|
|
||||||
"53": "prejudice",
|
|
||||||
"54": "favorite",
|
|
||||||
"55": "Posi_feelings",
|
|
||||||
"56": "difference",
|
|
||||||
"57": "try hard",
|
|
||||||
"58": "program",
|
|
||||||
"59": "counter",
|
|
||||||
"6": "be settled",
|
|
||||||
"60": "trap",
|
|
||||||
"61": "software",
|
|
||||||
"62": "technology",
|
|
||||||
"63": "variety",
|
|
||||||
"64": "record",
|
|
||||||
"65": "expression",
|
|
||||||
"66": "close",
|
|
||||||
"67": "will",
|
|
||||||
"68": "simplicity",
|
|
||||||
"69": "communication",
|
|
||||||
"7": "comparison",
|
|
||||||
"70": "therapy",
|
|
||||||
"71": "psychosis",
|
|
||||||
"72": "trial",
|
|
||||||
"73": "action",
|
|
||||||
"74": "conceal",
|
|
||||||
"75": "copy",
|
|
||||||
"76": "migration",
|
|
||||||
"77": "agent",
|
|
||||||
"78": "factory",
|
|
||||||
"79": "immortality",
|
|
||||||
"8": "position",
|
|
||||||
"80": "possible",
|
|
||||||
"81": "result",
|
|
||||||
"82": "tool",
|
|
||||||
"83": "Nega feelings",
|
|
||||||
"84": "EEG",
|
|
||||||
"85": "manufacture",
|
|
||||||
"86": "joint",
|
|
||||||
"87": "reaction",
|
|
||||||
"88": "compensation",
|
|
||||||
"89": "thought",
|
|
||||||
"9": "moving",
|
|
||||||
"90": "walk through",
|
|
||||||
"91": "patient",
|
|
||||||
"92": "time",
|
|
||||||
"93": "individuality",
|
|
||||||
"94": "greeting",
|
|
||||||
"95": "kind",
|
|
||||||
"96": "elegance",
|
|
||||||
"97": "personality",
|
|
||||||
"98": "regimen",
|
|
||||||
"99": "kill"
|
|
||||||
}
|
|
|
@ -25,11 +25,6 @@ const MainScene = () => {
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
const setActiveNodeHudId = useHudStore((state) => state.setId);
|
const setActiveNodeHudId = useHudStore((state) => state.setId);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLainMoveState("standing");
|
|
||||||
setActiveNodeHudId("fg_hud_1");
|
|
||||||
}, [setActiveNodeHudId, setLainMoveState]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useEffect, useMemo } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import {
|
import {
|
||||||
useLevelSelectionStore,
|
useLevelSelectionStore,
|
||||||
useLevelStore,
|
useLevelStore,
|
||||||
|
@ -16,11 +16,11 @@ import { OrbitControls } from "@react-three/drei";
|
||||||
import Images from "../components/MediaScene/Images";
|
import Images from "../components/MediaScene/Images";
|
||||||
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
||||||
import MediumLetter from "../components/TextRenderer/MediumLetter";
|
import MediumLetter from "../components/TextRenderer/MediumLetter";
|
||||||
import { a } from "@react-spring/three";
|
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import { SiteType } from "../components/MainScene/Site";
|
import { SiteType } from "../components/MainScene/Site";
|
||||||
|
|
||||||
const MediaScene = () => {
|
const MediaScene = () => {
|
||||||
|
const [textVisible, setTextVisible] = useState(false);
|
||||||
const mediaComponentMatrixIndices = useMediaStore(
|
const mediaComponentMatrixIndices = useMediaStore(
|
||||||
(state) => state.componentMatrixIndices
|
(state) => state.componentMatrixIndices
|
||||||
);
|
);
|
||||||
|
@ -28,8 +28,9 @@ const MediaScene = () => {
|
||||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||||
|
|
||||||
const activeNodeName = (site_a as SiteType)[activeLevel][activeNodeId]
|
const activeNodeData = (site_a as SiteType)[activeLevel][activeNodeId];
|
||||||
.node_name;
|
const activeNodeName = activeNodeData.node_name;
|
||||||
|
const activeNodeMedia = activeNodeData.media_file;
|
||||||
|
|
||||||
const activeMediaComponent = useMediaStore(
|
const activeMediaComponent = useMediaStore(
|
||||||
useCallback(
|
useCallback(
|
||||||
|
@ -46,6 +47,13 @@ const MediaScene = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.getElementsByTagName("canvas")[0].className =
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
"media-scene-background";
|
"media-scene-background";
|
||||||
|
setTimeout(() => {
|
||||||
|
setTextVisible(true);
|
||||||
|
}, 800);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
setTextVisible(false);
|
||||||
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -54,8 +62,6 @@ const MediaScene = () => {
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||||
<LeftSide activeMediaComponent={activeMediaComponent} />
|
<LeftSide activeMediaComponent={activeMediaComponent} />
|
||||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
|
||||||
<AudioVisualizer />
|
|
||||||
<group position={[0, 0.5, -3]}>
|
<group position={[0, 0.5, -3]}>
|
||||||
<MediaLoadingBar />
|
<MediaLoadingBar />
|
||||||
<NodeNameContainer />
|
<NodeNameContainer />
|
||||||
|
@ -66,11 +72,19 @@ const MediaScene = () => {
|
||||||
))}
|
))}
|
||||||
</group>
|
</group>
|
||||||
|
|
||||||
<group position={[0, 0, 0]}>
|
<group position={[0, 0, 0]} visible={textVisible}>
|
||||||
<YellowTextRenderer />
|
<YellowTextRenderer />
|
||||||
</group>
|
</group>
|
||||||
<Lof />
|
{activeNodeMedia.includes("XA") ? (
|
||||||
<Images />
|
<>
|
||||||
|
<AudioVisualizer />
|
||||||
|
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||||
|
<Lof />
|
||||||
|
<Images />{" "}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
</group>
|
</group>
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
|
|
|
@ -58,6 +58,7 @@ type StarfieldState = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type SiteState = {
|
type SiteState = {
|
||||||
|
currentSite: "a" | "b";
|
||||||
transformState: {
|
transformState: {
|
||||||
posY: number;
|
posY: number;
|
||||||
rotY: number;
|
rotY: number;
|
||||||
|
@ -84,8 +85,6 @@ type MiddleRingState = {
|
||||||
|
|
||||||
type MediaWordState = {
|
type MediaWordState = {
|
||||||
posStateIdx: number;
|
posStateIdx: number;
|
||||||
words: string[];
|
|
||||||
setWords: (to: string[]) => void;
|
|
||||||
setPosStateIdx: (to: number) => void;
|
setPosStateIdx: (to: number) => void;
|
||||||
resetPosStateIdx: () => void;
|
resetPosStateIdx: () => void;
|
||||||
};
|
};
|
||||||
|
@ -271,6 +270,7 @@ export const useStarfieldStore = create<StarfieldState>((set) => ({
|
||||||
export const useSiteStore = create(
|
export const useSiteStore = create(
|
||||||
combine(
|
combine(
|
||||||
{
|
{
|
||||||
|
currentSite: "a",
|
||||||
transformState: {
|
transformState: {
|
||||||
posY: 0,
|
posY: 0,
|
||||||
rotY: 0,
|
rotY: 0,
|
||||||
|
@ -372,10 +372,8 @@ export const useMediaStore = create(
|
||||||
);
|
);
|
||||||
|
|
||||||
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||||
words: ["eye", "quiet", "hallucination"],
|
|
||||||
posStateIdx: 1,
|
posStateIdx: 1,
|
||||||
setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
|
setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
|
||||||
setWords: (to) => set(() => ({ words: to })),
|
|
||||||
resetPosStateIdx: () => set(() => ({ posStateIdx: 1 })),
|
resetPosStateIdx: () => set(() => ({ posStateIdx: 1 })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
@ -390,7 +388,7 @@ export const useSSknStore = create<SSknState>((set) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useSceneStore = create<SceneState>((set) => ({
|
export const useSceneStore = create<SceneState>((set) => ({
|
||||||
currentScene: "media",
|
currentScene: "main",
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue