mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
gate scene intro done
This commit is contained in:
parent
ea87f6f97f
commit
4f1ea774f7
14 changed files with 755 additions and 75 deletions
|
@ -1,54 +1,37 @@
|
|||
import React, { useMemo } from "react";
|
||||
import React from "react";
|
||||
import gateText from "../../static/sprite/gate_pass.png";
|
||||
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
|
||||
import gateBlueBinarySingularOne from "../../static/sprite/blue_binary_singular_one.png";
|
||||
import gateBlueBinarySingularZero from "../../static/sprite/blue_binary_singular_zero.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import GateMiddleObject from "./GateMiddleObject";
|
||||
|
||||
const GateMiddle = () => {
|
||||
const uniforms = useMemo(
|
||||
() => ({
|
||||
color1: {
|
||||
value: new THREE.Color("white"),
|
||||
},
|
||||
color2: {
|
||||
value: new THREE.Color("red"),
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShader = `
|
||||
uniform vec3 color1;
|
||||
uniform vec3 color2;
|
||||
uniform float alpha;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
float alpha = smoothstep(0.0, 1.0, vUv.y);
|
||||
float colorMix = smoothstep(1.0, 2.0, 1.8);
|
||||
|
||||
gl_FragColor = vec4(mix(color1, color2, colorMix), alpha);
|
||||
}
|
||||
`;
|
||||
const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
|
||||
const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
|
||||
|
||||
return (
|
||||
<>
|
||||
<mesh scale={[2,2,2]}>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<shaderMaterial
|
||||
<sprite scale={[1.5, 0.24, 0]} position={[0, 1.1, 0.07]} renderOrder={3}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
vertexShader={vertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
uniforms={uniforms}
|
||||
map={gatePassTexture}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</mesh>
|
||||
</sprite>
|
||||
|
||||
<sprite scale={[4.2, 0.01, 0]} position={[0, 0.98, 0.07]} renderOrder={3}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={gatePassUnderline}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</sprite>
|
||||
|
||||
<GateMiddleObject />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
86
src/components/GateScene/GateMiddleObject.tsx
Normal file
86
src/components/GateScene/GateMiddleObject.tsx
Normal file
|
@ -0,0 +1,86 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import BlueZero from "./GateMiddleObject/BlueZero";
|
||||
import BlueOne from "./GateMiddleObject/BlueOne";
|
||||
import { a, useSpring, useSprings } from "@react-spring/three";
|
||||
import blue_digit_positions from "../../resources/blue_digit_positions.json";
|
||||
import Mirror from "./GateMiddleObject/Mirror";
|
||||
|
||||
const GateMiddleObject = () => {
|
||||
const [middleGroupPos, setMiddleGroupPos] = useState<number[]>();
|
||||
|
||||
const [springs, set] = useSprings(44, (intIdx) => {
|
||||
const idx = intIdx.toString();
|
||||
return {
|
||||
type: blue_digit_positions[idx as keyof typeof blue_digit_positions].type,
|
||||
posX:
|
||||
blue_digit_positions[idx as keyof typeof blue_digit_positions]
|
||||
.initial_x,
|
||||
posY:
|
||||
blue_digit_positions[idx as keyof typeof blue_digit_positions]
|
||||
.initial_y,
|
||||
visibility: false,
|
||||
config: { duration: 150 },
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
set((intIdx) => {
|
||||
const idx = intIdx.toString();
|
||||
return {
|
||||
posX:
|
||||
blue_digit_positions[idx as keyof typeof blue_digit_positions]
|
||||
.final_x,
|
||||
posY:
|
||||
blue_digit_positions[idx as keyof typeof blue_digit_positions]
|
||||
.final_y,
|
||||
delay:
|
||||
blue_digit_positions[idx as keyof typeof blue_digit_positions].delay,
|
||||
visibility: true,
|
||||
};
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setMiddleGroupPos([-0.15, -0.2, -0.1]);
|
||||
}, 1400);
|
||||
}, [set]);
|
||||
|
||||
const middleObjectGroupState = useSpring({
|
||||
posX: middleGroupPos ? middleGroupPos[0] : 0,
|
||||
posY: middleGroupPos ? middleGroupPos[1] : 0,
|
||||
posZ: middleGroupPos ? middleGroupPos[2] : 0,
|
||||
config: { duration: 900 },
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<a.group
|
||||
position-x={middleObjectGroupState.posX}
|
||||
position-y={middleObjectGroupState.posY}
|
||||
position-z={middleObjectGroupState.posZ}
|
||||
>
|
||||
{springs.map((item, idx) => {
|
||||
if (item.type) {
|
||||
return item.type.get() === 1 ? (
|
||||
<BlueOne
|
||||
posX={item.posX}
|
||||
posY={item.posY}
|
||||
key={idx}
|
||||
visibility={item.visibility}
|
||||
/>
|
||||
) : (
|
||||
<BlueZero
|
||||
posX={item.posX}
|
||||
posY={item.posY}
|
||||
key={idx}
|
||||
visibility={item.visibility}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</a.group>
|
||||
<Mirror />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GateMiddleObject;
|
78
src/components/GateScene/GateMiddleObject/BlueOne.tsx
Normal file
78
src/components/GateScene/GateMiddleObject/BlueOne.tsx
Normal file
|
@ -0,0 +1,78 @@
|
|||
import React, {useEffect, useMemo, useRef} from "react";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import gateBlueBinarySingularOne from "../../../static/sprite/blue_binary_singular_one.png";
|
||||
import { a, SpringValue } from "@react-spring/three";
|
||||
|
||||
type BlueOneProps = {
|
||||
posX: SpringValue<number>;
|
||||
posY: SpringValue<number>;
|
||||
visibility: SpringValue<boolean>;
|
||||
};
|
||||
|
||||
const BlueOne = (props: BlueOneProps) => {
|
||||
const gateBlueBinarySingularOneTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
gateBlueBinarySingularOne
|
||||
);
|
||||
|
||||
const matRef = useRef<THREE.ShaderMaterial>();
|
||||
|
||||
const uniforms = useMemo(
|
||||
() => ({
|
||||
oneTex: { type: "t", value: gateBlueBinarySingularOneTex },
|
||||
brightnessMultiplier: { value: 1.5 },
|
||||
}),
|
||||
[gateBlueBinarySingularOneTex]
|
||||
);
|
||||
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShaderOne = `
|
||||
uniform sampler2D oneTex;
|
||||
uniform float brightnessMultiplier;
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
gl_FragColor = texture2D(oneTex, vUv) * brightnessMultiplier;
|
||||
}
|
||||
`;
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (matRef.current) {
|
||||
matRef.current.uniforms.brightnessMultiplier.value = 3.5;
|
||||
}
|
||||
}, 1400);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<a.mesh
|
||||
scale={[0.04, 0.1, 0]}
|
||||
position-x={props.posX}
|
||||
position-y={props.posY}
|
||||
renderOrder={3}
|
||||
visible={props.visibility}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<shaderMaterial
|
||||
fragmentShader={fragmentShaderOne}
|
||||
vertexShader={vertexShader}
|
||||
uniforms={uniforms}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
ref={matRef}
|
||||
/>
|
||||
</a.mesh>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlueOne;
|
79
src/components/GateScene/GateMiddleObject/BlueZero.tsx
Normal file
79
src/components/GateScene/GateMiddleObject/BlueZero.tsx
Normal file
|
@ -0,0 +1,79 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import gateBlueBinarySingularZero from "../../../static/sprite/blue_binary_singular_zero.png";
|
||||
import { a, SpringValue } from "@react-spring/three";
|
||||
|
||||
type BlueZeroProps = {
|
||||
posX: SpringValue<number>;
|
||||
posY: SpringValue<number>;
|
||||
visibility: SpringValue<boolean>;
|
||||
};
|
||||
|
||||
const BlueZero = (props: BlueZeroProps) => {
|
||||
const gateBlueBinarySingularZeroTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
gateBlueBinarySingularZero
|
||||
);
|
||||
|
||||
const matRef = useRef<THREE.ShaderMaterial>();
|
||||
|
||||
const uniforms = useMemo(
|
||||
() => ({
|
||||
zeroTex: { type: "t", value: gateBlueBinarySingularZeroTex },
|
||||
brightnessMultiplier: { value: 1.5 },
|
||||
}),
|
||||
[gateBlueBinarySingularZeroTex]
|
||||
);
|
||||
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShaderZero = `
|
||||
uniform sampler2D zeroTex;
|
||||
uniform float brightnessMultiplier;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
gl_FragColor = texture2D(zeroTex, vUv) * brightnessMultiplier;
|
||||
}
|
||||
`;
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (matRef.current) {
|
||||
matRef.current.uniforms.brightnessMultiplier.value = 3.5;
|
||||
}
|
||||
}, 1400);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<a.mesh
|
||||
scale={[0.08, 0.1, 0]}
|
||||
position-x={props.posX}
|
||||
position-y={props.posY}
|
||||
renderOrder={3}
|
||||
visible={props.visibility}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<shaderMaterial
|
||||
fragmentShader={fragmentShaderZero}
|
||||
vertexShader={vertexShader}
|
||||
uniforms={uniforms}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
ref={matRef}
|
||||
/>
|
||||
</a.mesh>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlueZero;
|
38
src/components/GateScene/GateMiddleObject/Mirror.tsx
Normal file
38
src/components/GateScene/GateMiddleObject/Mirror.tsx
Normal file
|
@ -0,0 +1,38 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import gateMirrorTexture from "../../../static/sprite/gate_object_texture.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
const Mirror = () => {
|
||||
const gateMirrorTex = useLoader(THREE.TextureLoader, gateMirrorTexture);
|
||||
const mirrorRef = useRef<THREE.Object3D>();
|
||||
|
||||
const textureMemo = useMemo(() => {
|
||||
gateMirrorTex.wrapS = THREE.RepeatWrapping;
|
||||
gateMirrorTex.wrapT = THREE.RepeatWrapping;
|
||||
|
||||
return gateMirrorTex;
|
||||
}, [gateMirrorTex]);
|
||||
|
||||
useFrame(() => {
|
||||
if (mirrorRef.current) {
|
||||
mirrorRef.current.rotation.y += 0.03;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group ref={mirrorRef} position={[-0.1, -0.2, -0.2]}>
|
||||
<mesh renderOrder={4} position={[0.2, 0.2, 0.2]} scale={[0.4, 1, 0.05]}>
|
||||
<boxBufferGeometry attach="geometry"></boxBufferGeometry>
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
map={textureMemo}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
></meshBasicMaterial>
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
export default Mirror;
|
|
@ -2,49 +2,107 @@ import React, { useMemo, useRef } from "react";
|
|||
import blueBinary from "../../static/sprite/blue_binary.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { OrbitControls } from "drei";
|
||||
|
||||
const GateSide = () => {
|
||||
const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);
|
||||
|
||||
// this is really fucking weird
|
||||
const texture = useMemo(() => {
|
||||
blueBinaryTex.wrapS = THREE.RepeatWrapping;
|
||||
blueBinaryTex.wrapT = THREE.RepeatWrapping;
|
||||
blueBinaryTex.repeat.set(5, 5);
|
||||
|
||||
return blueBinaryTex;
|
||||
}, [blueBinaryTex]);
|
||||
|
||||
useFrame(() => {
|
||||
if (Date.now() % 2 === 0) {
|
||||
texture.offset.y += 0.5;
|
||||
if (Date.now() % 2 === 0 && matRef.current) {
|
||||
matRef.current.uniforms.offset.value += 0.5;
|
||||
}
|
||||
});
|
||||
|
||||
const matRef = useRef<THREE.ShaderMaterial>();
|
||||
|
||||
const uniforms = useMemo(
|
||||
() => ({
|
||||
tex1: { type: "t", value: texture },
|
||||
offset: { value: 0 },
|
||||
}),
|
||||
[texture]
|
||||
);
|
||||
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShaderLeft = `
|
||||
uniform sampler2D tex1;
|
||||
uniform float alpha;
|
||||
uniform float offset;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
float alpha = smoothstep(0.7, 1.0, vUv.x);
|
||||
|
||||
vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
|
||||
|
||||
gl_FragColor = mix(t1, vec4(0,0,0,0), alpha);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShaderRight = `
|
||||
uniform sampler2D tex1;
|
||||
uniform float alpha;
|
||||
uniform float offset;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
float alpha = smoothstep(0.3, 1.0, vUv.x);
|
||||
|
||||
vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
|
||||
|
||||
gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 1.4;
|
||||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<OrbitControls />
|
||||
<mesh
|
||||
rotation={[0, 0.2, 0]}
|
||||
position={[-1.7, 0, 1.5]}
|
||||
position={[-1.4, 0, 1.5]}
|
||||
scale={[3, 1.5, 0]}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<meshBasicMaterial
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
map={texture}
|
||||
uniforms={uniforms}
|
||||
vertexShader={vertexShader}
|
||||
fragmentShader={fragmentShaderLeft}
|
||||
transparent={true}
|
||||
opacity={0.6}
|
||||
ref={matRef}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh
|
||||
rotation={[0, -0.2, 0]}
|
||||
position={[1.7, 0, 1.5]}
|
||||
position={[0.05, 0, 1.3]}
|
||||
scale={[3, 1.5, 0]}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<meshBasicMaterial
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
map={texture}
|
||||
uniforms={uniforms}
|
||||
vertexShader={vertexShader}
|
||||
fragmentShader={fragmentShaderRight}
|
||||
transparent={true}
|
||||
opacity={0.6}
|
||||
ref={matRef}
|
||||
/>
|
||||
</mesh>
|
||||
</>
|
||||
|
|
|
@ -27,7 +27,7 @@ type BlueOrbContructorProps = {
|
|||
level: string;
|
||||
};
|
||||
|
||||
const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
||||
const BlueOrb = (props: BlueOrbContructorProps) => {
|
||||
// the game only has a couple of sprite that it displays in the hub
|
||||
// dynamically importnig them would be worse for performance,
|
||||
// so we import all of them here and then use this function to
|
||||
|
@ -216,6 +216,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
|||
)}
|
||||
</group>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
export default BlueOrb;
|
||||
|
|
|
@ -39,24 +39,24 @@ const Site = memo(() => {
|
|||
{Object.entries(site_a).map((blueOrb) => {
|
||||
if (
|
||||
// (blueOrb as any)[1]["unlocked_by"] === "-1" &&
|
||||
activeLevels.includes((blueOrb as any)[0].substr(0, 2))
|
||||
activeLevels.includes(blueOrb[0].substr(0, 2))
|
||||
)
|
||||
return (
|
||||
<BlueOrb
|
||||
sprite={(blueOrb as any)[1]["node_name"]}
|
||||
sprite={blueOrb[1].node_name}
|
||||
position={
|
||||
(blue_orb_positions as any)[(blueOrb as any)[0].substr(2)][
|
||||
"position"
|
||||
]
|
||||
blue_orb_positions[
|
||||
blueOrb[0].substr(2) as keyof typeof blue_orb_positions
|
||||
].position
|
||||
}
|
||||
rotation={
|
||||
(blue_orb_positions as any)[(blueOrb as any)[0].substr(2)][
|
||||
"rotation"
|
||||
]
|
||||
blue_orb_positions[
|
||||
blueOrb[0].substr(2) as keyof typeof blue_orb_positions
|
||||
].rotation
|
||||
}
|
||||
key={(blueOrb as any)[1]["node_name"]}
|
||||
active={(blueOrb as any)[0] === activeBlueOrbId}
|
||||
level={(blueOrb as any)[0].substr(0, 2)}
|
||||
key={blueOrb[1].node_name}
|
||||
active={blueOrb[0] === activeBlueOrbId}
|
||||
level={blueOrb[0].substr(0, 2)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
|
|
@ -28,7 +28,6 @@ const GreenTextManager = (props: StateManagerProps) => {
|
|||
|
||||
const toggleAndSetGreenText = useCallback(
|
||||
(newActiveBlueOrbId: string, newActiveHudId: string, delay: number) => {
|
||||
console.log('s')
|
||||
const targetGreenText =
|
||||
site_a[newActiveBlueOrbId as keyof typeof site_a].title;
|
||||
|
||||
|
|
|
@ -14,7 +14,6 @@ const MediaImageManager = (props: StateManagerProps) => {
|
|||
site_a[newActiveBlueOrbId as keyof typeof site_a].node_name;
|
||||
const images = image_table[node_name as keyof typeof image_table];
|
||||
|
||||
console.log(newActiveBlueOrbId);
|
||||
Object.values(images).forEach((img) => {
|
||||
switch (img.substr(img.length - 1)) {
|
||||
case "0":
|
||||
|
@ -64,9 +63,6 @@ const MediaImageManager = (props: StateManagerProps) => {
|
|||
if (props.eventState) {
|
||||
const eventAction = props.eventState.event;
|
||||
const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId;
|
||||
|
||||
console.log(eventAction);
|
||||
console.log(newActiveBlueOrbId);
|
||||
const dispatchedObject = dispatchObject(eventAction, newActiveBlueOrbId);
|
||||
|
||||
if (dispatchedObject) {
|
||||
|
|
|
@ -99,7 +99,6 @@ const YellowTextManager = (props: any) => {
|
|||
|
||||
setTimeout(() => {
|
||||
// animate it to new pos x/y
|
||||
console.log(newActiveHudId);
|
||||
setYellowTextPosX(
|
||||
blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds]
|
||||
.big_text[0]
|
||||
|
|
|
@ -4,7 +4,7 @@ import * as THREE from "three";
|
|||
import { useLoader } from "react-three-fiber";
|
||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, { useMemo } from "react";
|
||||
import React, {useEffect, useMemo} from "react";
|
||||
import { LetterProps } from "./TextRenderer";
|
||||
|
||||
interface BigLetterProps extends LetterProps {
|
||||
|
|
364
src/resources/blue_digit_positions.json
Normal file
364
src/resources/blue_digit_positions.json
Normal file
|
@ -0,0 +1,364 @@
|
|||
{
|
||||
"0": {
|
||||
"type": 1,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.0,
|
||||
"final_y": 0.7,
|
||||
"delay": 50
|
||||
},
|
||||
"1": {
|
||||
"type": 1,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": 0.7,
|
||||
"delay": 100
|
||||
},
|
||||
"2": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.2,
|
||||
"final_y": 0.7,
|
||||
"delay": 1200
|
||||
},
|
||||
"3": {
|
||||
"type": 0,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.3,
|
||||
"final_y": 0.7,
|
||||
"delay": 150
|
||||
},
|
||||
|
||||
"4": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.0,
|
||||
"final_y": 0.6,
|
||||
"delay": 600
|
||||
},
|
||||
"5": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": 0.6,
|
||||
"delay": 500
|
||||
},
|
||||
"6": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.2,
|
||||
"final_y": 0.6,
|
||||
"delay": 400
|
||||
},
|
||||
"7": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.3,
|
||||
"final_y": 0.6,
|
||||
"delay": 300
|
||||
},
|
||||
|
||||
"8": {
|
||||
"type": 1,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.0,
|
||||
"final_y": 0.5,
|
||||
"delay": 150
|
||||
},
|
||||
"9": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": 0.5,
|
||||
"delay": 900
|
||||
},
|
||||
"10": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.6,
|
||||
"final_x": 0.2,
|
||||
"final_y": 0.5,
|
||||
"delay": 50
|
||||
},
|
||||
"11": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.3,
|
||||
"final_y": 0.5,
|
||||
"delay": 250
|
||||
},
|
||||
|
||||
"12": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.4,
|
||||
"final_x": 0.0,
|
||||
"final_y": 0.4,
|
||||
"delay": 200
|
||||
},
|
||||
"13": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": 0.4,
|
||||
"delay": 200
|
||||
},
|
||||
"14": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.3,
|
||||
"final_x": 0.2,
|
||||
"final_y": 0.4,
|
||||
"delay": 300
|
||||
},
|
||||
"15": {
|
||||
"type": 0,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.3,
|
||||
"final_y": 0.4,
|
||||
"delay": 400
|
||||
},
|
||||
|
||||
"16": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.4,
|
||||
"final_x": 0.0,
|
||||
"final_y": 0.3,
|
||||
"delay": 650
|
||||
},
|
||||
"17": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": 0.3,
|
||||
"delay": 400
|
||||
},
|
||||
"18": {
|
||||
"type": 0,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.4,
|
||||
"final_x": 0.2,
|
||||
"final_y": 0.3,
|
||||
"delay": 300
|
||||
},
|
||||
"19": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.3,
|
||||
"final_x": 0.3,
|
||||
"final_y": 0.3,
|
||||
"delay": 1000
|
||||
},
|
||||
|
||||
"20": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.4,
|
||||
"final_x": 0.0,
|
||||
"final_y": 0.2,
|
||||
"delay": 800
|
||||
},
|
||||
"21": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": 0.2,
|
||||
"delay": 700
|
||||
},
|
||||
"22": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.4,
|
||||
"final_x": 0.2,
|
||||
"final_y": 0.2,
|
||||
"delay": 600
|
||||
},
|
||||
"23": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": -0.3,
|
||||
"final_x": 0.3,
|
||||
"final_y": 0.2,
|
||||
"delay": 500
|
||||
},
|
||||
|
||||
"24": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.4,
|
||||
"final_x": 0.0,
|
||||
"final_y": 0.1,
|
||||
"delay": 900
|
||||
},
|
||||
"25": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": 0.1,
|
||||
"delay": 800
|
||||
},
|
||||
"26": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": -0.4,
|
||||
"final_x": 0.2,
|
||||
"final_y": 0.1,
|
||||
"delay": 700
|
||||
},
|
||||
"27": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.3,
|
||||
"final_x": 0.3,
|
||||
"final_y": 0.1,
|
||||
"delay": 600
|
||||
},
|
||||
|
||||
"28": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.4,
|
||||
"final_x": 0.0,
|
||||
"final_y": 0.0,
|
||||
"delay": 300
|
||||
},
|
||||
"29": {
|
||||
"type": 1,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": 0.0,
|
||||
"delay": 1100
|
||||
},
|
||||
"30": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": -0.4,
|
||||
"final_x": 0.2,
|
||||
"final_y": 0.0,
|
||||
"delay": 700
|
||||
},
|
||||
"31": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.3,
|
||||
"final_x": 0.3,
|
||||
"final_y": 0.0,
|
||||
"delay": 900
|
||||
},
|
||||
|
||||
"32": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.2,
|
||||
"final_x": 0.0,
|
||||
"final_y": -0.1,
|
||||
"delay": 500
|
||||
},
|
||||
"33": {
|
||||
"type": 1,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": -0.1,
|
||||
"delay": 300
|
||||
},
|
||||
"34": {
|
||||
"type": 1,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.2,
|
||||
"final_y": -0.1,
|
||||
"delay": 800
|
||||
},
|
||||
"35": {
|
||||
"type": 1,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.3,
|
||||
"final_x": 0.3,
|
||||
"final_y": -0.1,
|
||||
"delay": 900
|
||||
},
|
||||
|
||||
"36": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": -0.4,
|
||||
"final_x": 0.0,
|
||||
"final_y": -0.2,
|
||||
"delay": 1000
|
||||
},
|
||||
"37": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": -0.2,
|
||||
"delay": 900
|
||||
},
|
||||
"38": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.2,
|
||||
"final_y": -0.2,
|
||||
"delay": 400
|
||||
},
|
||||
"39": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": -0.4,
|
||||
"final_x": 0.3,
|
||||
"final_y": -0.2,
|
||||
"delay": 500
|
||||
},
|
||||
|
||||
"40": {
|
||||
"type": 1,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": -0.4,
|
||||
"final_x": 0.0,
|
||||
"final_y": -0.3,
|
||||
"delay": 400
|
||||
},
|
||||
"41": {
|
||||
"type": 0,
|
||||
"initial_x": 1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.1,
|
||||
"final_y": -0.3,
|
||||
"delay": 1000
|
||||
},
|
||||
"42": {
|
||||
"type": 0,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": 0.8,
|
||||
"final_x": 0.2,
|
||||
"final_y": -0.3,
|
||||
"delay": 900
|
||||
},
|
||||
"43": {
|
||||
"type": 1,
|
||||
"initial_x": -1.0,
|
||||
"initial_y": -0.4,
|
||||
"final_x": 0.3,
|
||||
"final_y": -0.3,
|
||||
"delay": 1100
|
||||
}
|
||||
}
|
|
@ -57,7 +57,7 @@ const MainScene = () => {
|
|||
<HUD />
|
||||
<TextRenderer />
|
||||
<YellowOrb />
|
||||
{/*<Starfield />*/}
|
||||
<Starfield />
|
||||
<GrayPlanes />
|
||||
<Lights />
|
||||
<MiddleRing />
|
||||
|
|
Loading…
Reference in a new issue