mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

adding node rip animatioNn

Browse source
This commit is contained in:
ad044 2021-01-08 20:47:23 +04:00
parent 2c4dff77b3
commit 62e5be1d52
9 changed files with 112 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/MainScene/SyncedComponentLoader.tsx
View file

@ -9,7 +9,7 @@ import Starfield from "./SyncedComponents/Starfield";
import Site from "./SyncedComponents/Site"; import Site from "./SyncedComponents/Site";
import MiddleRing from "./SyncedComponents/MiddleRing"; import MiddleRing from "./SyncedComponents/MiddleRing";
import { a } from "@react-spring/three"; import { a } from "@react-spring/three";
import NodeExplosion from "./SyncedComponents/Site/NodeExplosion"; import NodeExplosion from "./SyncedComponents/Site/NodeAnimations/NodeExplosion";
type SyncedComponentLoaderProps = { type SyncedComponentLoaderProps = {
paused: boolean; paused: boolean;

6
src/components/MainScene/SyncedComponents/Site/NodeExplosion.tsx → src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion.tsx
View file

@ -1,10 +1,10 @@
import React, { useEffect, useMemo, useRef, useState } from "react"; import React, { useEffect, useMemo, useRef, useState } from "react";
import ExplosionLine from "./NodeExplosion/ExplosionLine"; import ExplosionLine from "./NodeExplosion/ExplosionLine";
import node_explosion_line_positions from "../../../../resources/node_explosion_line_positions.json"; import node_explosion_line_positions from "../../../../../resources/node_explosion_line_positions.json";
import { useFrame } from "react-three-fiber"; import { useFrame } from "react-three-fiber";
import GoldNode from "./NodeExplosion/GoldNode"; import GoldNode from "./NodeExplosion/GoldNode";
import { useNodeStore } from "../../../../store"; import { useNodeStore } from "../../../../../store";
const NodeExplosion = () => { const NodeExplosion = () => {
const explosionVisible = useNodeStore( const explosionVisible = useNodeStore(
@ -39,9 +39,7 @@ const NodeExplosion = () => {
useEffect(() => { useEffect(() => {
if (explosionVisible) { if (explosionVisible) {
setTimeout(() => {
setShouldRotate(true); setShouldRotate(true);
}, 300);
setTimeout(() => { setTimeout(() => {
setShouldAnimate(true); setShouldAnimate(true);
}, 1100); }, 1100);

4
src/components/MainScene/SyncedComponents/Site/NodeExplosion/ExplosionLine.tsx → src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/ExplosionLine.tsx
View file

@ -44,7 +44,7 @@ const ExplosionLine = (props: LineProps) => {
float alpha = smoothstep(1.0, 0.0, vUv.y); float alpha = smoothstep(1.0, 0.0, vUv.y);
float colorMix = smoothstep(1.0, 2.0, 1.8); float colorMix = smoothstep(1.0, 2.0, 1.8);
gl_FragColor = vec4(mix(color1, color2, colorMix), alpha) * 0.7; gl_FragColor = vec4(mix(color1, color2, colorMix), alpha) * 0.6;
} }
`; `;
@ -53,7 +53,7 @@ const ExplosionLine = (props: LineProps) => {
rotation={props.rotation as [number, number, number]} rotation={props.rotation as [number, number, number]}
position={props.position as [number, number, number]} position={props.position as [number, number, number]}
scale={[0.01, props.length, 0]} scale={[0.01, props.length, 0]}
renderOrder={-1} renderOrder={2}
> >
<boxBufferGeometry attach="geometry" args={[1, 1, 1]} /> <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
<a.shaderMaterial <a.shaderMaterial

54
src/components/MainScene/SyncedComponents/Site/NodeExplosion/GoldNode.tsx → src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx
View file

@ -2,28 +2,28 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import * as THREE from "three"; import * as THREE from "three";
import { useFrame, useLoader } from "react-three-fiber"; import { useFrame, useLoader } from "react-three-fiber";
import Cou from "../../../../../static/sprite/Cou.png"; import Cou from "../../../../../../static/sprite/Cou.png";
import CouGold from "../../../../../static/sprite/Cou_gold.png"; import CouGold from "../../../../../../static/sprite/Cou_gold.png";
import Dc from "../../../../../static/sprite/Dc.png"; import Dc from "../../../../../../static/sprite/Dc.png";
import DcGold from "../../../../../static/sprite/Dc_gold.png"; import DcGold from "../../../../../../static/sprite/Dc_gold.png";
import SSkn from "../../../../../static/sprite/SSkn.png"; import SSkn from "../../../../../../static/sprite/SSkn.png";
import SSKnGold from "../../../../../static/sprite/SSkn_gold.png"; import SSKnGold from "../../../../../../static/sprite/SSkn_gold.png";
import Tda from "../../../../../static/sprite/Tda.png"; import Tda from "../../../../../../static/sprite/Tda.png";
import TdaGold from "../../../../../static/sprite/Tda_gold.png"; import TdaGold from "../../../../../../static/sprite/Tda_gold.png";
import Dia from "../../../../../static/sprite/Dia.png"; import Dia from "../../../../../../static/sprite/Dia.png";
import DiaGold from "../../../../../static/sprite/Dia_gold.png"; import DiaGold from "../../../../../../static/sprite/Dia_gold.png";
import Lda from "../../../../../static/sprite/Lda.png"; import Lda from "../../../../../../static/sprite/Lda.png";
import LdaGold from "../../../../../static/sprite/Lda_gold.png"; import LdaGold from "../../../../../../static/sprite/Lda_gold.png";
import MULTI from "../../../../../static/sprite/MULTI.png"; import MULTI from "../../../../../../static/sprite/MULTI.png";
import MULTIGold from "../../../../../static/sprite/MULTI_gold.png"; import MULTIGold from "../../../../../../static/sprite/MULTI_gold.png";
import { import {
useLevelStore, useLevelStore,
useNodeStore, useNodeStore,
useSiteStore, useSiteStore,
} from "../../../../../store"; } from "../../../../../../store";
import site_a from "../../../../../resources/site_a.json"; import site_a from "../../../../../../resources/site_a.json";
import site_b from "../../../../../resources/site_b.json"; import site_b from "../../../../../../resources/site_b.json";
import { SiteType } from "../../Site"; import { SiteType } from "../../../Site";
type GLTFResult = GLTF & { type GLTFResult = GLTF & {
nodes: { nodes: {
@ -88,27 +88,27 @@ const GoldNode = (props: GoldNodeProps) => {
useEffect(() => { useEffect(() => {
if (r.current && !props.visible) { if (r.current && !props.visible) {
r.current.rotation.y = -1.2; r.current.rotation.x = Math.PI / 2;
r.current.rotation.z = 0; r.current.rotation.y = 0;
r.current.rotation.z = Math.PI / 2 - 0.3;
} }
}, [props.visible]); }, [props.visible]);
useFrame(() => { useFrame(() => {
if (r.current && props.visible) { if (r.current && props.visible) {
r.current.rotation.y -= 0.01; r.current.rotation.y -= 0.03;
r.current.rotation.z += 0.01; r.current.rotation.z += 0.03;
} }
}); });
return ( return (
<mesh <mesh
// geometry={nodes.Cube.geometry} geometry={nodes.Cube.geometry}
position={[-0.18, -0.45, 0]} position={[-0.155, -0.45, 0]}
rotation={[0, -1.2, 0]} rotation={[Math.PI / 2, 0, Math.PI / 2 - 0.3]}
scale={[0.24, 0.19, 0.34]} scale={[-0.1 / 1.15, 0.2 / 1.35, 0.1 / 1.15]}
ref={r} ref={r}
> >
<boxBufferGeometry attach="geometry" />
<meshBasicMaterial <meshBasicMaterial
attach="material" attach="material"
map={props.goldTexture ? goldTex : regularTex} map={props.goldTexture ? goldTex : regularTex}

27
src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip.tsx Normal file
View file

@ -0,0 +1,27 @@
import React from "react";
import TriangleNode from "./NodeRip/TriangleNode";
const NodeRip = () => {
return (
<>
<TriangleNode
rotation={[1.3, 1.6, 0]}
pivotRotation={[0, -Math.PI / 4 - 0.5, 0]}
/>
<TriangleNode
rotation={[0.4, 0.3, 0]}
pivotRotation={[0, -Math.PI / 8, 0]}
/>
<TriangleNode
rotation={[1.6, 2.6, 0]}
pivotRotation={[0, Math.PI / 4 + 0.5, 0]}
/>
<TriangleNode
rotation={[-0.7, 1.8, 0]}
pivotRotation={[0, Math.PI / 8, 0]}
/>
</>
);
};
export default NodeRip;

37
src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip/TriangleNode.tsx Normal file
View file

@ -0,0 +1,37 @@
import React, { useRef } from "react";
import MULTI from "../../../../../../static/sprite/MULTI.png";
import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
type TriangleNodeProps = {
rotation: number[];
pivotRotation: number[];
};
const TriangleNode = (props: TriangleNodeProps) => {
const tex = useLoader(THREE.TextureLoader, MULTI);
const triangleNodeRef = useRef<THREE.Object3D>();
useFrame(() => {
if (triangleNodeRef.current) {
triangleNodeRef.current.position.z += 0.01;
}
});
return (
<group rotation={props.pivotRotation as [number, number, number]}>
<mesh
position={[-0.1, -0.2, 0.1]}
rotation={props.rotation as [number, number, number]}
scale={[0.1, 0.1, 0.1]}
ref={triangleNodeRef}
>
<coneBufferGeometry attach="geometry" args={[1, 2, 3]} />
<meshBasicMaterial attach="material" map={tex} transparent={true} />
</mesh>
</group>
);
};
export default TriangleNode;

2
src/core/StateManagers/MainSceneManagers/NodeManager.tsx
View file

@ -102,10 +102,10 @@ const NodeManager = (props: StateManagerProps) => {
setTimeout(() => { setTimeout(() => {
setActiveNodeState(true, "exploding"); setActiveNodeState(true, "exploding");
setActiveNodeState(false, "visible");
}, 1200); }, 1200);
setTimeout(() => { setTimeout(() => {
setActiveNodeState(false, "visible");
setActiveNodeState(false, "interactedWith"); setActiveNodeState(false, "interactedWith");
setActiveNodeState(0, "rotZ"); setActiveNodeState(0, "rotZ");
setActiveNodeState(0, "rotX"); setActiveNodeState(0, "rotX");

22
src/resources/node_explosion_line_positions.json
View file

@ -1,7 +1,7 @@
{ {
"1": [ "1": [
{ {
"position": [0, 0.2, 0], "position": [0.1, 0.2, 0],
"rotation": [0, 0, -0.25], "rotation": [0, 0, -0.25],
"color": "red", "color": "red",
"length": 1.5 "length": 1.5
@ -13,7 +13,7 @@
"length": 1 "length": 1
}, },
{ {
"position": [-0.4, -0.6, 0], "position": [-0.4, -0.8, 0],
"rotation": [0, 0, -4], "rotation": [0, 0, -4],
"color": "yellow", "color": "yellow",
"length": 1 "length": 1
@ -27,31 +27,31 @@
], ],
"2": [ "2": [
{ {
"position": [0.4, -0.1, 0], "position": [0.6, -0.1, 0],
"rotation": [0, 0, -1], "rotation": [0, 0, -1],
"length": 1.5, "length": 1.5,
"color": "yellow" "color": "yellow"
}, },
{ {
"position": [0.47, -0.18, 0], "position": [0.65, -0.18, 0],
"rotation": [0, 0, -1.1], "rotation": [0, 0, -1.1],
"length": 1.6, "length": 1.6,
"color": "red" "color": "red"
}, },
{ {
"position": [0.45, -0.25, 0], "position": [0.7, -0.2, 0],
"rotation": [0, 0, -1.2], "rotation": [0, 0, -1.2],
"length": 1.6, "length": 1.6,
"color": "yellow" "color": "yellow"
}, },
{ {
"position": [0, -0.75, 0], "position": [0.1, -0.75, 0],
"rotation": [0, 0, -2.5], "rotation": [0, 0, -2.5],
"length": 0.8, "length": 0.8,
"color": "red" "color": "red"
}, },
{ {
"position": [-0.25, -0.75, 0], "position": [-0.15, -0.8, 0],
"rotation": [0, 0, -3.5], "rotation": [0, 0, -3.5],
"length": 0.8, "length": 0.8,
"color": "yellow" "color": "yellow"
@ -65,25 +65,25 @@
"color": "yellow" "color": "yellow"
}, },
{ {
"position": [0.4, -0.1, 0], "position": [0.5, -0.1, 0],
"rotation": [0, 0, -0.95], "rotation": [0, 0, -0.95],
"length": 1.5, "length": 1.5,
"color": "red" "color": "red"
}, },
{ {
"position": [0.47, -0.18, 0], "position": [0.57, -0.08, 0],
"rotation": [0, 0, -1.05], "rotation": [0, 0, -1.05],
"length": 1.6, "length": 1.6,
"color": "red" "color": "red"
}, },
{ {
"position": [0.45, -0.25, 0], "position": [0.55, -0.15, 0],
"rotation": [0, 0, -1.15], "rotation": [0, 0, -1.15],
"length": 1.5, "length": 1.5,
"color": "red" "color": "red"
}, },
{ {
"position": [0.5, -0.6, 0], "position": [0.6, -0.6, 0],
"rotation": [0, 0, -1.7], "rotation": [0, 0, -1.7],
"length": 1.5, "length": 1.5,
"color": "red" "color": "red"

4
src/scenes/MainScene.tsx
View file

@ -9,7 +9,8 @@ import { useMainSceneStore } from "../store";
import Pause from "../components/MainScene/PauseSubscene/Pause"; import Pause from "../components/MainScene/PauseSubscene/Pause";
import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader"; import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection"; import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection";
import NodeExplosion from "../components/MainScene/SyncedComponents/Site/NodeExplosion"; import NodeExplosion from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion";
import NodeRip from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip";
const MainScene = () => { const MainScene = () => {
const currentSubscene = useMainSceneStore((state) => state.subscene); const currentSubscene = useMainSceneStore((state) => state.subscene);
@ -38,6 +39,7 @@ const MainScene = () => {
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} /> <pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} /> <pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
<NodeExplosion /> <NodeExplosion />
<NodeRip />
</a.group> </a.group>
<Lain shouldIntro={shouldIntro} /> <Lain shouldIntro={shouldIntro} />
</Suspense> </Suspense>