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 * as THREE from "three";
|
||||||
|
import GateMiddleObject from "./GateMiddleObject";
|
||||||
|
|
||||||
const GateMiddle = () => {
|
const GateMiddle = () => {
|
||||||
const uniforms = useMemo(
|
const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
|
||||||
() => ({
|
const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
|
||||||
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);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<mesh scale={[2,2,2]}>
|
<sprite scale={[1.5, 0.24, 0]} position={[0, 1.1, 0.07]} renderOrder={3}>
|
||||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
<spriteMaterial
|
||||||
<shaderMaterial
|
|
||||||
attach="material"
|
attach="material"
|
||||||
vertexShader={vertexShader}
|
map={gatePassTexture}
|
||||||
fragmentShader={fragmentShader}
|
transparent={true}
|
||||||
uniforms={uniforms}
|
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 blueBinary from "../../static/sprite/blue_binary.png";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
import { OrbitControls } from "drei";
|
||||||
|
|
||||||
const GateSide = () => {
|
const GateSide = () => {
|
||||||
const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);
|
const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);
|
||||||
|
|
||||||
|
// this is really fucking weird
|
||||||
const texture = useMemo(() => {
|
const texture = useMemo(() => {
|
||||||
blueBinaryTex.wrapS = THREE.RepeatWrapping;
|
blueBinaryTex.wrapS = THREE.RepeatWrapping;
|
||||||
blueBinaryTex.wrapT = THREE.RepeatWrapping;
|
blueBinaryTex.wrapT = THREE.RepeatWrapping;
|
||||||
blueBinaryTex.repeat.set(5, 5);
|
blueBinaryTex.repeat.set(5, 5);
|
||||||
|
|
||||||
return blueBinaryTex;
|
return blueBinaryTex;
|
||||||
}, [blueBinaryTex]);
|
}, [blueBinaryTex]);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (Date.now() % 2 === 0) {
|
if (Date.now() % 2 === 0 && matRef.current) {
|
||||||
texture.offset.y += 0.5;
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<OrbitControls />
|
||||||
<mesh
|
<mesh
|
||||||
rotation={[0, 0.2, 0]}
|
rotation={[0, 0.2, 0]}
|
||||||
position={[-1.7, 0, 1.5]}
|
position={[-1.4, 0, 1.5]}
|
||||||
scale={[3, 1.5, 0]}
|
scale={[3, 1.5, 0]}
|
||||||
>
|
>
|
||||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||||
<meshBasicMaterial
|
<shaderMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={texture}
|
uniforms={uniforms}
|
||||||
|
vertexShader={vertexShader}
|
||||||
|
fragmentShader={fragmentShaderLeft}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
opacity={0.6}
|
ref={matRef}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
<mesh
|
<mesh
|
||||||
rotation={[0, -0.2, 0]}
|
rotation={[0, -0.2, 0]}
|
||||||
position={[1.7, 0, 1.5]}
|
position={[0.05, 0, 1.3]}
|
||||||
scale={[3, 1.5, 0]}
|
scale={[3, 1.5, 0]}
|
||||||
>
|
>
|
||||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||||
<meshBasicMaterial
|
<shaderMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={texture}
|
uniforms={uniforms}
|
||||||
|
vertexShader={vertexShader}
|
||||||
|
fragmentShader={fragmentShaderRight}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
opacity={0.6}
|
ref={matRef}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -27,7 +27,7 @@ type BlueOrbContructorProps = {
|
||||||
level: string;
|
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
|
// the game only has a couple of sprite that it displays in the hub
|
||||||
// dynamically importnig them would be worse for performance,
|
// dynamically importnig them would be worse for performance,
|
||||||
// so we import all of them here and then use this function to
|
// so we import all of them here and then use this function to
|
||||||
|
@ -216,6 +216,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
||||||
)}
|
)}
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
});
|
};
|
||||||
|
|
||||||
export default BlueOrb;
|
export default BlueOrb;
|
||||||
|
|
|
@ -39,24 +39,24 @@ const Site = memo(() => {
|
||||||
{Object.entries(site_a).map((blueOrb) => {
|
{Object.entries(site_a).map((blueOrb) => {
|
||||||
if (
|
if (
|
||||||
// (blueOrb as any)[1]["unlocked_by"] === "-1" &&
|
// (blueOrb as any)[1]["unlocked_by"] === "-1" &&
|
||||||
activeLevels.includes((blueOrb as any)[0].substr(0, 2))
|
activeLevels.includes(blueOrb[0].substr(0, 2))
|
||||||
)
|
)
|
||||||
return (
|
return (
|
||||||
<BlueOrb
|
<BlueOrb
|
||||||
sprite={(blueOrb as any)[1]["node_name"]}
|
sprite={blueOrb[1].node_name}
|
||||||
position={
|
position={
|
||||||
(blue_orb_positions as any)[(blueOrb as any)[0].substr(2)][
|
blue_orb_positions[
|
||||||
"position"
|
blueOrb[0].substr(2) as keyof typeof blue_orb_positions
|
||||||
]
|
].position
|
||||||
}
|
}
|
||||||
rotation={
|
rotation={
|
||||||
(blue_orb_positions as any)[(blueOrb as any)[0].substr(2)][
|
blue_orb_positions[
|
||||||
"rotation"
|
blueOrb[0].substr(2) as keyof typeof blue_orb_positions
|
||||||
]
|
].rotation
|
||||||
}
|
}
|
||||||
key={(blueOrb as any)[1]["node_name"]}
|
key={blueOrb[1].node_name}
|
||||||
active={(blueOrb as any)[0] === activeBlueOrbId}
|
active={blueOrb[0] === activeBlueOrbId}
|
||||||
level={(blueOrb as any)[0].substr(0, 2)}
|
level={blueOrb[0].substr(0, 2)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -28,7 +28,6 @@ const GreenTextManager = (props: StateManagerProps) => {
|
||||||
|
|
||||||
const toggleAndSetGreenText = useCallback(
|
const toggleAndSetGreenText = useCallback(
|
||||||
(newActiveBlueOrbId: string, newActiveHudId: string, delay: number) => {
|
(newActiveBlueOrbId: string, newActiveHudId: string, delay: number) => {
|
||||||
console.log('s')
|
|
||||||
const targetGreenText =
|
const targetGreenText =
|
||||||
site_a[newActiveBlueOrbId as keyof typeof site_a].title;
|
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;
|
site_a[newActiveBlueOrbId as keyof typeof site_a].node_name;
|
||||||
const images = image_table[node_name as keyof typeof image_table];
|
const images = image_table[node_name as keyof typeof image_table];
|
||||||
|
|
||||||
console.log(newActiveBlueOrbId);
|
|
||||||
Object.values(images).forEach((img) => {
|
Object.values(images).forEach((img) => {
|
||||||
switch (img.substr(img.length - 1)) {
|
switch (img.substr(img.length - 1)) {
|
||||||
case "0":
|
case "0":
|
||||||
|
@ -64,9 +63,6 @@ const MediaImageManager = (props: StateManagerProps) => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventAction = props.eventState.event;
|
const eventAction = props.eventState.event;
|
||||||
const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId;
|
const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId;
|
||||||
|
|
||||||
console.log(eventAction);
|
|
||||||
console.log(newActiveBlueOrbId);
|
|
||||||
const dispatchedObject = dispatchObject(eventAction, newActiveBlueOrbId);
|
const dispatchedObject = dispatchObject(eventAction, newActiveBlueOrbId);
|
||||||
|
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
|
|
|
@ -99,7 +99,6 @@ const YellowTextManager = (props: any) => {
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// animate it to new pos x/y
|
// animate it to new pos x/y
|
||||||
console.log(newActiveHudId);
|
|
||||||
setYellowTextPosX(
|
setYellowTextPosX(
|
||||||
blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds]
|
blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds]
|
||||||
.big_text[0]
|
.big_text[0]
|
||||||
|
|
|
@ -4,7 +4,7 @@ import * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import React, { useMemo } from "react";
|
import React, {useEffect, useMemo} from "react";
|
||||||
import { LetterProps } from "./TextRenderer";
|
import { LetterProps } from "./TextRenderer";
|
||||||
|
|
||||||
interface BigLetterProps extends LetterProps {
|
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 />
|
<HUD />
|
||||||
<TextRenderer />
|
<TextRenderer />
|
||||||
<YellowOrb />
|
<YellowOrb />
|
||||||
{/*<Starfield />*/}
|
<Starfield />
|
||||||
<GrayPlanes />
|
<GrayPlanes />
|
||||||
<Lights />
|
<Lights />
|
||||||
<MiddleRing />
|
<MiddleRing />
|
||||||
|
|
Loading…
Reference in a new issue