mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
better code for purple ring, working on gray planes rotation
This commit is contained in:
parent
6ea6f36722
commit
a91b5093b7
6 changed files with 68 additions and 61 deletions
|
@ -3,12 +3,17 @@ import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useRecoilValue } from "recoil";
|
import { useRecoilValue } from "recoil";
|
||||||
import { grayPlanesPosYAtom, grayPlanesVisibleAtom } from "./GrayPlanesAtom";
|
import {
|
||||||
|
grayPlanesPosYAtom,
|
||||||
|
grayPlanesRotYAtom,
|
||||||
|
grayPlanesVisibleAtom,
|
||||||
|
} from "./GrayPlanesAtom";
|
||||||
|
|
||||||
const GrayPlanes = memo(() => {
|
const GrayPlanes = memo(() => {
|
||||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom);
|
const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom);
|
||||||
|
const grayPlaneRotY = useRecoilValue(grayPlanesRotYAtom);
|
||||||
const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
|
const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
|
||||||
|
|
||||||
const grayPlanePoses = [
|
const grayPlanePoses = [
|
||||||
|
@ -34,6 +39,7 @@ const GrayPlanes = memo(() => {
|
||||||
|
|
||||||
const grayPlaneState = useSpring({
|
const grayPlaneState = useSpring({
|
||||||
grayPlanePosY: grayPlanePosY,
|
grayPlanePosY: grayPlanePosY,
|
||||||
|
grayPlaneRotY: grayPlaneRotY,
|
||||||
config: { duration: 1200 },
|
config: { duration: 1200 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -42,6 +48,7 @@ const GrayPlanes = memo(() => {
|
||||||
position={[0.1, 0, -2]}
|
position={[0.1, 0, -2]}
|
||||||
position-y={grayPlaneState.grayPlanePosY}
|
position-y={grayPlaneState.grayPlanePosY}
|
||||||
rotation={[0, 0, 0]}
|
rotation={[0, 0, 0]}
|
||||||
|
rotation-y={grayPlaneState.grayPlaneRotY}
|
||||||
ref={grayPlaneGroupRef}
|
ref={grayPlaneGroupRef}
|
||||||
visible={grayPlanesVisible}
|
visible={grayPlanesVisible}
|
||||||
>
|
>
|
||||||
|
|
|
@ -5,6 +5,11 @@ export const grayPlanesPosYAtom = atom({
|
||||||
default: 0,
|
default: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const grayPlanesRotYAtom = atom({
|
||||||
|
key: "grayPlanesRotYAtom",
|
||||||
|
default: 0,
|
||||||
|
});
|
||||||
|
|
||||||
export const grayPlanesVisibleAtom = atom({
|
export const grayPlanesVisibleAtom = atom({
|
||||||
key: "grayPlanesVisibleAtom",
|
key: "grayPlanesVisibleAtom",
|
||||||
default: false,
|
default: false,
|
||||||
|
|
|
@ -22,12 +22,15 @@ import {
|
||||||
starfieldPosYAtom,
|
starfieldPosYAtom,
|
||||||
starfieldRotYAtom,
|
starfieldRotYAtom,
|
||||||
} from "./Starfield/StarfieldAtom";
|
} from "./Starfield/StarfieldAtom";
|
||||||
import { BlueOrbHuds} from "./HUD/HUDElement";
|
import { BlueOrbHuds } from "./HUD/HUDElement";
|
||||||
import {
|
import {
|
||||||
orthoCamPosYAtom,
|
orthoCamPosYAtom,
|
||||||
orthoCamRotYAtom,
|
orthoCamRotYAtom,
|
||||||
} from "./OrthoCamera/OrthoCameraAtom";
|
} from "./OrthoCamera/OrthoCameraAtom";
|
||||||
import { grayPlanesPosYAtom } from "./GrayPlanes/GrayPlanesAtom";
|
import {
|
||||||
|
grayPlanesPosYAtom,
|
||||||
|
grayPlanesRotYAtom,
|
||||||
|
} from "./GrayPlanes/GrayPlanesAtom";
|
||||||
import {
|
import {
|
||||||
middleRingNoiseAtom,
|
middleRingNoiseAtom,
|
||||||
middleRingPosYAtom,
|
middleRingPosYAtom,
|
||||||
|
@ -57,7 +60,9 @@ type LainAnimations = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const InputHandler = () => {
|
const InputHandler = () => {
|
||||||
const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState(currentBlueOrbAtom);
|
const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState(
|
||||||
|
currentBlueOrbAtom
|
||||||
|
);
|
||||||
|
|
||||||
const [lainMoving, setLainMoving] = useRecoilState(lainMovingAtom);
|
const [lainMoving, setLainMoving] = useRecoilState(lainMovingAtom);
|
||||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
||||||
|
@ -77,6 +82,7 @@ const InputHandler = () => {
|
||||||
const setLainPosY = useSetRecoilState(lainPosYAtom);
|
const setLainPosY = useSetRecoilState(lainPosYAtom);
|
||||||
|
|
||||||
const setGrayPlanePosY = useSetRecoilState(grayPlanesPosYAtom);
|
const setGrayPlanePosY = useSetRecoilState(grayPlanesPosYAtom);
|
||||||
|
const setGrayPlaneRotY = useSetRecoilState(grayPlanesRotYAtom);
|
||||||
|
|
||||||
const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
|
const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
|
||||||
const setStarfieldRotY = useSetRecoilState(starfieldRotYAtom);
|
const setStarfieldRotY = useSetRecoilState(starfieldRotYAtom);
|
||||||
|
@ -120,8 +126,9 @@ const InputHandler = () => {
|
||||||
setCamRotY((prev: number) => prev + val);
|
setCamRotY((prev: number) => prev + val);
|
||||||
setStarfieldRotY((prev: number) => prev - val);
|
setStarfieldRotY((prev: number) => prev - val);
|
||||||
setOrthoCamRotY((prev: number) => prev - val);
|
setOrthoCamRotY((prev: number) => prev - val);
|
||||||
|
setGrayPlaneRotY((prev: number) => prev - val);
|
||||||
},
|
},
|
||||||
[setCamRotY, setStarfieldRotY, setOrthoCamRotY]
|
[setCamRotY, setStarfieldRotY, setOrthoCamRotY, setGrayPlaneRotY]
|
||||||
);
|
);
|
||||||
|
|
||||||
const getMove = (currentLoc: string, key: string): string => {
|
const getMove = (currentLoc: string, key: string): string => {
|
||||||
|
|
|
@ -72,14 +72,11 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// frag color
|
// frag color
|
||||||
vec4 color(vec2 vUv, float step, bool textureexists, int quadnum) {
|
vec4 color(vec2 vUv, float step, bool textureexists) {
|
||||||
if (!textureexists) {
|
if (!textureexists) {
|
||||||
return vec4(0.325,0.325,0.698, 1);
|
return vec4(0.325,0.325,0.698, 1);
|
||||||
} else if (quadnum == 1) {
|
|
||||||
float dist = 1.0-tolocal(1.0-vUv.x+0.5, 6, step);
|
|
||||||
return texture2D(siteA, vec2(dist, vUv.y));
|
|
||||||
} else {
|
} else {
|
||||||
float dist = 1.0-tolocal(1.0-vUv.x, 6, step);
|
float dist = 1.0-tolocal(0.5 - mod(vUv.x, 0.5), 6, step);
|
||||||
return texture2D(siteA, vec2(dist, vUv.y));
|
return texture2D(siteA, vec2(dist, vUv.y));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -91,67 +88,59 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
||||||
float thick = 1.0;
|
float thick = 1.0;
|
||||||
float slopefactor = 1.0;
|
float slopefactor = 1.0;
|
||||||
|
|
||||||
|
int halfc = int(step)/2;
|
||||||
|
|
||||||
// segment within circle
|
// segment within circle
|
||||||
int segment = int(floor(vUv.x * step));
|
int segment = int(floor(vUv.x * step));
|
||||||
|
int thinperiod = halfc-8;
|
||||||
|
|
||||||
int quadlen = int(step)/2;
|
int halfel = segment % halfc;
|
||||||
|
|
||||||
// segment within circle's quad
|
if (halfel < thinperiod-1 && istop(vUv.y, thin)) {
|
||||||
int quadel = int(segment) % quadlen;
|
|
||||||
|
|
||||||
// which quad
|
|
||||||
int quadnum = int(segment) / quadlen;
|
|
||||||
|
|
||||||
int thinperiod = 48;
|
|
||||||
|
|
||||||
if (quadel < thinperiod-1 && istop(vUv.y, thin)) {
|
|
||||||
// thin line top
|
// thin line top
|
||||||
gl_FragColor = color(vUv, step, false, quadnum);
|
gl_FragColor = color(vUv, step, false);
|
||||||
} else if (quadel == thinperiod - 1) {
|
} else if (halfel == thinperiod - 1) {
|
||||||
// thin line and corner
|
// thin line and corner
|
||||||
float dist = tolocal(vUv.x, 1, step);
|
float dist = tolocal(vUv.x, 1, step);
|
||||||
float val = 1.0-slope(1.0-dist, thin);
|
float val = 1.0-slope(1.0-dist, thin);
|
||||||
if (istop(vUv.y, thin) || (dist > 1.0-thin*slopefactor && 1.0-vUv.y < val-(1.0-thin*slopefactor))) {
|
if (istop(vUv.y, thin) || (1.0-vUv.y < val-(1.0-thin*slopefactor))) {
|
||||||
gl_FragColor = color(vUv, step, false, quadnum);
|
gl_FragColor = color(vUv, step, false);
|
||||||
} else {
|
} else {
|
||||||
gl_FragColor = vec4(0, 0, 0, 0);
|
gl_FragColor = vec4(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
} else if (quadel == thinperiod) {
|
} else if (halfel == thinperiod) {
|
||||||
// slope down
|
// slope down
|
||||||
float dist = tolocal(vUv.x, 1, step);
|
float dist = tolocal(vUv.x, 1, step);
|
||||||
float val = 1.0-slope(dist, thin);
|
float val = 1.0-slope(dist, thin);
|
||||||
if (vUv.y < val && vUv.y > val-thin*slopefactor) {
|
if (vUv.y < val && vUv.y > val-thin*slopefactor) {
|
||||||
gl_FragColor = color(vUv, step, false, quadnum);
|
gl_FragColor = color(vUv, step, false);
|
||||||
} else {
|
} else {
|
||||||
gl_FragColor = vec4(0, 0, 0, 0);
|
gl_FragColor = vec4(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
} else if (quadel == thinperiod+1 && isbottom(vUv.y, thin)) {
|
} else if (halfel == thinperiod+1 && isbottom(vUv.y, thin)) {
|
||||||
// thin line bottom
|
// thin line bottom
|
||||||
gl_FragColor = vec4(0.325,0.325,0.698, 1);
|
gl_FragColor = vec4(0.325,0.325,0.698, 1);
|
||||||
} else if (quadel == thinperiod + 2) {
|
} else if (halfel == thinperiod + 2) {
|
||||||
// slope up
|
// slope up
|
||||||
float dist = tolocal(vUv.x, 1, step);
|
float dist = tolocal(vUv.x, 1, step);
|
||||||
float val = 1.0-slope(1.0-dist, thin);
|
float val = 1.0-slope(1.0-dist, thin);
|
||||||
if ((isbottom(vUv.y, thin) && dist < thin*slopefactor) || (vUv.y < val)) {
|
if ((isbottom(vUv.y, thin) && dist < thin*slopefactor) || (vUv.y < val)) {
|
||||||
gl_FragColor = color(vUv, step, true, quadnum);
|
gl_FragColor = color(vUv, step, true);
|
||||||
} else {
|
} else {
|
||||||
gl_FragColor = vec4(0, 0, 0, 0);
|
gl_FragColor = vec4(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
} else if (quadel > thinperiod + 2 && quadel < thinperiod+7) {
|
} else if (halfel > thinperiod + 2 && halfel < thinperiod+7) {
|
||||||
// thick part
|
// thick part
|
||||||
gl_FragColor = color(vUv, step, true, quadnum);
|
gl_FragColor = color(vUv, step, true);
|
||||||
} else if (quadel == thinperiod+7) {
|
} else if (halfel == thinperiod+7) {
|
||||||
// slope up
|
// slope up
|
||||||
float dist = tolocal(vUv.x, 1, step);
|
float dist = tolocal(vUv.x, 1, step);
|
||||||
float val = slope(dist, thin);
|
float val = slope(dist, thin);
|
||||||
if (vUv.y > val) {
|
if (vUv.y > val) {
|
||||||
gl_FragColor = color(vUv, step, true, quadnum);
|
gl_FragColor = color(vUv, step, true);
|
||||||
} else {
|
} else {
|
||||||
gl_FragColor = vec4(0, 0, 0, 0);
|
gl_FragColor = vec4(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
} else if (quadel > thinperiod+7 && istop(vUv.y, thin)) {
|
|
||||||
// thin line top
|
|
||||||
gl_FragColor = color(vUv, step, false, quadnum);
|
|
||||||
} else {
|
} else {
|
||||||
// transparent
|
// transparent
|
||||||
gl_FragColor = vec4(0, 0, 0, 0);
|
gl_FragColor = vec4(0, 0, 0, 0);
|
||||||
|
@ -159,9 +148,9 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// useFrame(() => {
|
useFrame(() => {
|
||||||
// purpleRingRef.current!.rotation.y += 0.01;
|
purpleRingRef.current!.rotation.y += 0.005;
|
||||||
// });
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<mesh
|
<mesh
|
||||||
|
|
|
@ -17,25 +17,25 @@ const Site = memo(() => {
|
||||||
<GrayRing grayRingPosY={1.59} />
|
<GrayRing grayRingPosY={1.59} />
|
||||||
<PurpleRing purpleRingPosY={0.4} />
|
<PurpleRing purpleRingPosY={0.4} />
|
||||||
<GrayRing grayRingPosY={-0.28} />
|
<GrayRing grayRingPosY={-0.28} />
|
||||||
{/*{Object.values(blue_orbs).map((sprite) => {*/}
|
{Object.values(blue_orbs).map((sprite) => {
|
||||||
{/* return (*/}
|
return (
|
||||||
{/* <BlueOrb*/}
|
<BlueOrb
|
||||||
{/* position={sprite.position as [number, number, number]}*/}
|
position={sprite.position as [number, number, number]}
|
||||||
{/* scale={sprite.scale as [number, number, number]}*/}
|
scale={sprite.scale as [number, number, number]}
|
||||||
{/* rotation={*/}
|
rotation={
|
||||||
{/* sprite.rotation as [*/}
|
sprite.rotation as [
|
||||||
{/* number,*/}
|
number,
|
||||||
{/* number,*/}
|
number,
|
||||||
{/* number,*/}
|
number,
|
||||||
{/* (string | undefined)?*/}
|
(string | undefined)?
|
||||||
{/* ]*/}
|
]
|
||||||
{/* }*/}
|
}
|
||||||
{/* sprite={sprite.sprite}*/}
|
sprite={sprite.sprite}
|
||||||
{/* key={sprite.id}*/}
|
key={sprite.id}
|
||||||
{/* active={sprite.id === currentBlueOrb}*/}
|
active={sprite.id === currentBlueOrb}
|
||||||
{/* />*/}
|
/>
|
||||||
{/* );*/}
|
);
|
||||||
{/*})}*/}
|
})}
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -2,7 +2,6 @@ import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import * as serviceWorker from "./serviceWorker";
|
import * as serviceWorker from "./serviceWorker";
|
||||||
import { RecoilRoot } from "recoil";
|
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
|
Loading…
Reference in a new issue