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 { useSpring, a } from "@react-spring/three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import * as THREE from "three";
|
||||
import Cou from "../../static/sprite/Cou.png";
|
||||
import CouActive from "../../static/sprite/Cou_active.png";
|
||||
|
|
|
@ -10,16 +10,10 @@ import GrayRing from "./GrayRing";
|
|||
import CyanCrystal from "./CyanCrystal";
|
||||
|
||||
export type NodeDataType = {
|
||||
SLPS_016_0x_offset: string;
|
||||
image_table_indices: { 1: string; 2: string; 3: string };
|
||||
is_hidden: string;
|
||||
media_file: string;
|
||||
node_name: string;
|
||||
protocol_lines: {
|
||||
1: string;
|
||||
2: string;
|
||||
3: string;
|
||||
};
|
||||
site: string;
|
||||
type: string;
|
||||
title: string;
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useLevelStore, useMediaStore, useNodeStore } from "../../store";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import image_table from "../../resources/image_table.json";
|
||||
import { LevelType } from "../MainScene/Site";
|
||||
import { LevelType, SiteType } from "../MainScene/Site";
|
||||
import site_a from "../../resources/site_a.json";
|
||||
import dummy from "../../static/sprite/dummy.png";
|
||||
import * as THREE from "three";
|
||||
|
@ -32,17 +31,16 @@ const Images = () => {
|
|||
);
|
||||
|
||||
useEffect(() => {
|
||||
const nodeName = activeLevelData[activeNodeId].node_name;
|
||||
|
||||
const images = image_table[nodeName as keyof typeof image_table];
|
||||
const images = (site_a as SiteType)[activeLevel][activeNodeId]
|
||||
.image_table_indices;
|
||||
|
||||
const imgArr: { default: string }[] = [];
|
||||
Object.values(images).forEach((img) => {
|
||||
import("../../static/media_images/site_a/" + img + ".png").then(
|
||||
Object.entries(images).forEach((img) => {
|
||||
import("../../static/media_images/a/" + img[1] + ".png").then(
|
||||
(imageSrc: { default: string }) => {
|
||||
// images are unordered by default so we insert them into the arr
|
||||
// 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) {
|
||||
setSceneImages(imgArr);
|
||||
new THREE.TextureLoader().load(imgArr[0].default, setActiveImage);
|
||||
|
@ -50,7 +48,7 @@ const Images = () => {
|
|||
}
|
||||
);
|
||||
});
|
||||
}, [activeLevelData, activeNodeId]);
|
||||
}, [activeLevel, activeLevelData, activeNodeId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mediaPercentageElapsed === 0 && sceneImages[0]) {
|
||||
|
|
|
@ -1,14 +1,33 @@
|
|||
import React, { createRef, useCallback, useRef } from "react";
|
||||
import test from "../../static/movie/LAIN01.XA[18].ogg";
|
||||
import { useMediaStore, useSceneStore } from "../../store";
|
||||
import React, {
|
||||
createRef,
|
||||
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 { SiteType } from "../MainScene/Site";
|
||||
|
||||
const MediaPlayer = () => {
|
||||
const [mediaSource, setMediaSource] = useState<any>();
|
||||
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
const setPercentageElapsed = useMediaStore(
|
||||
(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 videoRef = createRef<HTMLVideoElement>();
|
||||
|
||||
|
@ -25,12 +44,42 @@ const MediaPlayer = () => {
|
|||
}
|
||||
}, [setPercentageElapsed, videoRef]);
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
||||
const curr = requestRef.current;
|
||||
return () => cancelAnimationFrame(curr as any);
|
||||
}, [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 (
|
||||
<video
|
||||
width="800"
|
||||
|
@ -40,7 +89,7 @@ const MediaPlayer = () => {
|
|||
ref={videoRef}
|
||||
style={{ display: currentScene === "media" ? "block" : "none" }}
|
||||
>
|
||||
<source src={test} />
|
||||
<source src={mediaSource} />
|
||||
<track src={t} kind="captions" default />
|
||||
</video>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React from "react";
|
||||
import React, { useMemo } from "react";
|
||||
import TriangularPrism from "./LeftSide/TriangularPrism";
|
||||
import Cube from "./LeftSide/Cube";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
|
||||
type LeftSideProps = {
|
||||
activeMediaComponent: string;
|
||||
|
@ -16,26 +17,87 @@ const LeftSide = (props: LeftSideProps) => {
|
|||
const cubesActive = props.activeMediaComponent === "exit";
|
||||
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 (
|
||||
<group position={[0, 0, -3]}>
|
||||
<a.group
|
||||
position-x={bottomBehindGroupPos.posX}
|
||||
position-z={bottomBehindGroupPos.posZ}
|
||||
position-y={bottomBehindGroupPos.posY}
|
||||
>
|
||||
<Cube position={[-2.7, -1.6, 0.6]} active={cubesActive} />
|
||||
<TriangularPrism position={[-3.5, -1.6, 0.6]} active={!trianglesActive} />
|
||||
<TriangularPrism
|
||||
position={[-3.5, -1.6, 0.6]}
|
||||
active={!trianglesActive}
|
||||
/>
|
||||
</a.group>
|
||||
<a.group
|
||||
position-x={topBehindGroupPos.posX}
|
||||
position-z={topBehindGroupPos.posZ}
|
||||
position-y={topBehindGroupPos.posY}
|
||||
>
|
||||
<Cube position={[-3.5, -0.9, 0.6]} active={cubesActive} />
|
||||
<TriangularPrism position={[-2.7, -0.9, 0.6]} active={trianglesActive} />
|
||||
<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={[-3.5, -1.6, 1.2]} active={trianglesActive} />
|
||||
|
||||
{/*main two*/}
|
||||
<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={[-2.7, -0.9, 1.2]}
|
||||
position={[-3.5, -1.6, 1.2]}
|
||||
active={trianglesActive}
|
||||
selectable={true}
|
||||
/>
|
||||
</a.group>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,16 +1,21 @@
|
|||
import React, { useCallback, useMemo } from "react";
|
||||
import { useMediaWordStore } from "../../../store";
|
||||
import { useLevelStore, useMediaWordStore, useNodeStore } from "../../../store";
|
||||
import Word from "./RightSide/Word";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
import word_position_states from "../../../resources/word_position_states.json";
|
||||
import * as THREE from "three";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
import { SiteType } from "../../MainScene/Site";
|
||||
|
||||
type RightSideProps = {
|
||||
activeMediaComponent: string;
|
||||
};
|
||||
|
||||
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(
|
||||
(state) => state.posStateIdx
|
||||
|
@ -71,19 +76,19 @@ const RightSide = (props: RightSideProps) => {
|
|||
</line>
|
||||
</a.group>
|
||||
<Word
|
||||
word={words[0]}
|
||||
word={words[1]}
|
||||
posX={wordPositionStateSpring.fstWordPosX}
|
||||
posY={wordPositionStateSpring.fstWordPosY}
|
||||
active={props.activeMediaComponent === "fstWord"}
|
||||
/>
|
||||
<Word
|
||||
word={words[1]}
|
||||
word={words[2]}
|
||||
posX={wordPositionStateSpring.sndWordPosX}
|
||||
posY={wordPositionStateSpring.sndWordPosY}
|
||||
active={props.activeMediaComponent === "sndWord"}
|
||||
/>
|
||||
<Word
|
||||
word={words[2]}
|
||||
word={words[3]}
|
||||
posX={wordPositionStateSpring.thirdWordPosX}
|
||||
posY={wordPositionStateSpring.thirdWordPosY}
|
||||
active={props.activeMediaComponent === "thirdWord"}
|
||||
|
|
|
@ -8,23 +8,38 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
(state) => state.setNodeMatrixIndices
|
||||
);
|
||||
|
||||
const animateActiveNodeThrow = useCallback(() => {
|
||||
const animateActiveNodeThrow = useCallback(
|
||||
(siteRotY: number) => {
|
||||
setActiveNodeState(true, "interactedWith");
|
||||
|
||||
setActiveNodeState(0.3, "posZ");
|
||||
setActiveNodeState(0.9, "posX");
|
||||
const calculateCoordsBasedOnRotation = (
|
||||
x: number,
|
||||
z: number,
|
||||
rotation: number
|
||||
) => ({
|
||||
x: x * Math.cos(rotation) - z * Math.sin(rotation),
|
||||
z: x * Math.sin(rotation) + z * Math.cos(rotation),
|
||||
});
|
||||
|
||||
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
||||
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
||||
const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
|
||||
const fourthCoordSet = calculateCoordsBasedOnRotation(0, 2, siteRotY);
|
||||
|
||||
setActiveNodeState(fstCoordSet.x, "posX");
|
||||
setActiveNodeState(fstCoordSet.z, "posZ");
|
||||
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(0.2, "posZ");
|
||||
setActiveNodeState(0.5, "posX");
|
||||
setActiveNodeState(sndCoordSet.x, "posX");
|
||||
setActiveNodeState(sndCoordSet.z, "posZ");
|
||||
}, 800);
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(1.55, "posX");
|
||||
setActiveNodeState(thirdCoordSet.x, "posX");
|
||||
setActiveNodeState(-0.005, "rotZ");
|
||||
}, 2600);
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(2, "posZ");
|
||||
setActiveNodeState(0, "posX");
|
||||
setActiveNodeState(fourthCoordSet.x, "posX");
|
||||
setActiveNodeState(fourthCoordSet.z, "posZ");
|
||||
setActiveNodeState(-0.5, "rotZ");
|
||||
}, 2700);
|
||||
|
||||
|
@ -32,7 +47,9 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
setActiveNodeState(0, "rotZ");
|
||||
setActiveNodeState(false, "interactedWith");
|
||||
}, 3800);
|
||||
}, [setActiveNodeState]);
|
||||
},
|
||||
[setActiveNodeState]
|
||||
);
|
||||
|
||||
const updateActiveNode = useCallback(
|
||||
(
|
||||
|
@ -61,7 +78,8 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
matrixIdx: number;
|
||||
rowIdx: number;
|
||||
colIdx: number;
|
||||
}
|
||||
},
|
||||
newSiteRotY: number
|
||||
) => {
|
||||
switch (event) {
|
||||
case "site_up":
|
||||
|
@ -84,7 +102,7 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
case "throw_node_sskn":
|
||||
return {
|
||||
action: animateActiveNodeThrow,
|
||||
value: [0, true],
|
||||
value: [newSiteRotY],
|
||||
};
|
||||
}
|
||||
},
|
||||
|
@ -96,11 +114,13 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
const eventAction = props.eventState.event;
|
||||
const newActiveNodeId = props.eventState.newActiveNodeId;
|
||||
const newNodeMatrixIndices = props.eventState.newNodeMatrixIndices;
|
||||
const newSiteRotY = props.eventState.newSiteRotY;
|
||||
|
||||
const dispatchedObject = dispatchObject(
|
||||
eventAction,
|
||||
newActiveNodeId,
|
||||
newNodeMatrixIndices
|
||||
newNodeMatrixIndices,
|
||||
newSiteRotY
|
||||
);
|
||||
|
||||
if (dispatchedObject) {
|
||||
|
|
|
@ -51,7 +51,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
newSitePosY = selectedNodeData.newSitePosY;
|
||||
newLevel = selectedNodeData.newLevel;
|
||||
newActiveHudId = selectedNodeData.newActiveHudId;
|
||||
console.log(selectedNodeData.newActiveNodeId);
|
||||
|
||||
}
|
||||
|
||||
break;
|
||||
|
@ -70,6 +70,9 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
switch (parseInt(nodeType)) {
|
||||
case 0:
|
||||
case 2:
|
||||
case 4:
|
||||
case 3:
|
||||
case 5:
|
||||
event = eventAnimation + "media";
|
||||
newScene = "media";
|
||||
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 setActiveNodeHudId = useHudStore((state) => state.setId);
|
||||
|
||||
useEffect(() => {
|
||||
setLainMoveState("standing");
|
||||
setActiveNodeHudId("fg_hud_1");
|
||||
}, [setActiveNodeHudId, setLainMoveState]);
|
||||
|
||||
return (
|
||||
<perspectiveCamera position-z={3}>
|
||||
<Suspense fallback={null}>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useCallback, useEffect, useMemo } from "react";
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
useLevelSelectionStore,
|
||||
useLevelStore,
|
||||
|
@ -16,11 +16,11 @@ import { OrbitControls } from "@react-three/drei";
|
|||
import Images from "../components/MediaScene/Images";
|
||||
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
||||
import MediumLetter from "../components/TextRenderer/MediumLetter";
|
||||
import { a } from "@react-spring/three";
|
||||
import site_a from "../resources/site_a.json";
|
||||
import { SiteType } from "../components/MainScene/Site";
|
||||
|
||||
const MediaScene = () => {
|
||||
const [textVisible, setTextVisible] = useState(false);
|
||||
const mediaComponentMatrixIndices = useMediaStore(
|
||||
(state) => state.componentMatrixIndices
|
||||
);
|
||||
|
@ -28,8 +28,9 @@ const MediaScene = () => {
|
|||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
|
||||
const activeNodeName = (site_a as SiteType)[activeLevel][activeNodeId]
|
||||
.node_name;
|
||||
const activeNodeData = (site_a as SiteType)[activeLevel][activeNodeId];
|
||||
const activeNodeName = activeNodeData.node_name;
|
||||
const activeNodeMedia = activeNodeData.media_file;
|
||||
|
||||
const activeMediaComponent = useMediaStore(
|
||||
useCallback(
|
||||
|
@ -46,6 +47,13 @@ const MediaScene = () => {
|
|||
useEffect(() => {
|
||||
document.getElementsByTagName("canvas")[0].className =
|
||||
"media-scene-background";
|
||||
setTimeout(() => {
|
||||
setTextVisible(true);
|
||||
}, 800);
|
||||
|
||||
return () => {
|
||||
setTextVisible(false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
@ -54,8 +62,6 @@ const MediaScene = () => {
|
|||
<OrbitControls />
|
||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||
<LeftSide activeMediaComponent={activeMediaComponent} />
|
||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||
<AudioVisualizer />
|
||||
<group position={[0, 0.5, -3]}>
|
||||
<MediaLoadingBar />
|
||||
<NodeNameContainer />
|
||||
|
@ -66,11 +72,19 @@ const MediaScene = () => {
|
|||
))}
|
||||
</group>
|
||||
|
||||
<group position={[0, 0, 0]}>
|
||||
<group position={[0, 0, 0]} visible={textVisible}>
|
||||
<YellowTextRenderer />
|
||||
</group>
|
||||
{activeNodeMedia.includes("XA") ? (
|
||||
<>
|
||||
<AudioVisualizer />
|
||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||
<Lof />
|
||||
<Images />
|
||||
<Images />{" "}
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</group>
|
||||
</perspectiveCamera>
|
||||
);
|
||||
|
|
|
@ -58,6 +58,7 @@ type StarfieldState = {
|
|||
};
|
||||
|
||||
type SiteState = {
|
||||
currentSite: "a" | "b";
|
||||
transformState: {
|
||||
posY: number;
|
||||
rotY: number;
|
||||
|
@ -84,8 +85,6 @@ type MiddleRingState = {
|
|||
|
||||
type MediaWordState = {
|
||||
posStateIdx: number;
|
||||
words: string[];
|
||||
setWords: (to: string[]) => void;
|
||||
setPosStateIdx: (to: number) => void;
|
||||
resetPosStateIdx: () => void;
|
||||
};
|
||||
|
@ -271,6 +270,7 @@ export const useStarfieldStore = create<StarfieldState>((set) => ({
|
|||
export const useSiteStore = create(
|
||||
combine(
|
||||
{
|
||||
currentSite: "a",
|
||||
transformState: {
|
||||
posY: 0,
|
||||
rotY: 0,
|
||||
|
@ -372,10 +372,8 @@ export const useMediaStore = create(
|
|||
);
|
||||
|
||||
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||
words: ["eye", "quiet", "hallucination"],
|
||||
posStateIdx: 1,
|
||||
setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
|
||||
setWords: (to) => set(() => ({ words: to })),
|
||||
resetPosStateIdx: () => set(() => ({ posStateIdx: 1 })),
|
||||
}));
|
||||
|
||||
|
@ -390,7 +388,7 @@ export const useSSknStore = create<SSknState>((set) => ({
|
|||
}));
|
||||
|
||||
export const useSceneStore = create<SceneState>((set) => ({
|
||||
currentScene: "media",
|
||||
currentScene: "main",
|
||||
setScene: (to) => set(() => ({ currentScene: to })),
|
||||
}));
|
||||
|
||||
|
|
Loading…
Reference in a new issue