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 { a, useSpring } from "@react-spring/three";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { grayPlanesPosYAtom, grayPlanesVisibleAtom } from "./GrayPlanesAtom";
|
||||
import {
|
||||
grayPlanesPosYAtom,
|
||||
grayPlanesRotYAtom,
|
||||
grayPlanesVisibleAtom,
|
||||
} from "./GrayPlanesAtom";
|
||||
|
||||
const GrayPlanes = memo(() => {
|
||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||
|
||||
const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom);
|
||||
const grayPlaneRotY = useRecoilValue(grayPlanesRotYAtom);
|
||||
const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
|
||||
|
||||
const grayPlanePoses = [
|
||||
|
@ -34,6 +39,7 @@ const GrayPlanes = memo(() => {
|
|||
|
||||
const grayPlaneState = useSpring({
|
||||
grayPlanePosY: grayPlanePosY,
|
||||
grayPlaneRotY: grayPlaneRotY,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
|
||||
|
@ -42,6 +48,7 @@ const GrayPlanes = memo(() => {
|
|||
position={[0.1, 0, -2]}
|
||||
position-y={grayPlaneState.grayPlanePosY}
|
||||
rotation={[0, 0, 0]}
|
||||
rotation-y={grayPlaneState.grayPlaneRotY}
|
||||
ref={grayPlaneGroupRef}
|
||||
visible={grayPlanesVisible}
|
||||
>
|
||||
|
|
|
@ -5,6 +5,11 @@ export const grayPlanesPosYAtom = atom({
|
|||
default: 0,
|
||||
});
|
||||
|
||||
export const grayPlanesRotYAtom = atom({
|
||||
key: "grayPlanesRotYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const grayPlanesVisibleAtom = atom({
|
||||
key: "grayPlanesVisibleAtom",
|
||||
default: false,
|
||||
|
|
|
@ -22,12 +22,15 @@ import {
|
|||
starfieldPosYAtom,
|
||||
starfieldRotYAtom,
|
||||
} from "./Starfield/StarfieldAtom";
|
||||
import { BlueOrbHuds} from "./HUD/HUDElement";
|
||||
import { BlueOrbHuds } from "./HUD/HUDElement";
|
||||
import {
|
||||
orthoCamPosYAtom,
|
||||
orthoCamRotYAtom,
|
||||
} from "./OrthoCamera/OrthoCameraAtom";
|
||||
import { grayPlanesPosYAtom } from "./GrayPlanes/GrayPlanesAtom";
|
||||
import {
|
||||
grayPlanesPosYAtom,
|
||||
grayPlanesRotYAtom,
|
||||
} from "./GrayPlanes/GrayPlanesAtom";
|
||||
import {
|
||||
middleRingNoiseAtom,
|
||||
middleRingPosYAtom,
|
||||
|
@ -57,7 +60,9 @@ type LainAnimations = {
|
|||
};
|
||||
|
||||
const InputHandler = () => {
|
||||
const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState(currentBlueOrbAtom);
|
||||
const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState(
|
||||
currentBlueOrbAtom
|
||||
);
|
||||
|
||||
const [lainMoving, setLainMoving] = useRecoilState(lainMovingAtom);
|
||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
||||
|
@ -77,6 +82,7 @@ const InputHandler = () => {
|
|||
const setLainPosY = useSetRecoilState(lainPosYAtom);
|
||||
|
||||
const setGrayPlanePosY = useSetRecoilState(grayPlanesPosYAtom);
|
||||
const setGrayPlaneRotY = useSetRecoilState(grayPlanesRotYAtom);
|
||||
|
||||
const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
|
||||
const setStarfieldRotY = useSetRecoilState(starfieldRotYAtom);
|
||||
|
@ -120,8 +126,9 @@ const InputHandler = () => {
|
|||
setCamRotY((prev: number) => prev + val);
|
||||
setStarfieldRotY((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 => {
|
||||
|
|
|
@ -72,14 +72,11 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
|||
}
|
||||
|
||||
// frag color
|
||||
vec4 color(vec2 vUv, float step, bool textureexists, int quadnum) {
|
||||
vec4 color(vec2 vUv, float step, bool textureexists) {
|
||||
if (!textureexists) {
|
||||
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 {
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
@ -91,67 +88,59 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
|||
float thick = 1.0;
|
||||
float slopefactor = 1.0;
|
||||
|
||||
int halfc = int(step)/2;
|
||||
|
||||
// segment within circle
|
||||
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
|
||||
int quadel = int(segment) % quadlen;
|
||||
|
||||
// which quad
|
||||
int quadnum = int(segment) / quadlen;
|
||||
|
||||
int thinperiod = 48;
|
||||
|
||||
if (quadel < thinperiod-1 && istop(vUv.y, thin)) {
|
||||
if (halfel < thinperiod-1 && istop(vUv.y, thin)) {
|
||||
// thin line top
|
||||
gl_FragColor = color(vUv, step, false, quadnum);
|
||||
} else if (quadel == thinperiod - 1) {
|
||||
gl_FragColor = color(vUv, step, false);
|
||||
} else if (halfel == thinperiod - 1) {
|
||||
// thin line and corner
|
||||
float dist = tolocal(vUv.x, 1, step);
|
||||
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))) {
|
||||
gl_FragColor = color(vUv, step, false, quadnum);
|
||||
if (istop(vUv.y, thin) || (1.0-vUv.y < val-(1.0-thin*slopefactor))) {
|
||||
gl_FragColor = color(vUv, step, false);
|
||||
} else {
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
}
|
||||
} else if (quadel == thinperiod) {
|
||||
} else if (halfel == thinperiod) {
|
||||
// slope down
|
||||
float dist = tolocal(vUv.x, 1, step);
|
||||
float val = 1.0-slope(dist, thin);
|
||||
if (vUv.y < val && vUv.y > val-thin*slopefactor) {
|
||||
gl_FragColor = color(vUv, step, false, quadnum);
|
||||
gl_FragColor = color(vUv, step, false);
|
||||
} else {
|
||||
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
|
||||
gl_FragColor = vec4(0.325,0.325,0.698, 1);
|
||||
} else if (quadel == thinperiod + 2) {
|
||||
} else if (halfel == thinperiod + 2) {
|
||||
// slope up
|
||||
float dist = tolocal(vUv.x, 1, step);
|
||||
float val = 1.0-slope(1.0-dist, thin);
|
||||
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 {
|
||||
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
|
||||
gl_FragColor = color(vUv, step, true, quadnum);
|
||||
} else if (quadel == thinperiod+7) {
|
||||
gl_FragColor = color(vUv, step, true);
|
||||
} else if (halfel == thinperiod+7) {
|
||||
// slope up
|
||||
float dist = tolocal(vUv.x, 1, step);
|
||||
float val = slope(dist, thin);
|
||||
if (vUv.y > val) {
|
||||
gl_FragColor = color(vUv, step, true, quadnum);
|
||||
gl_FragColor = color(vUv, step, true);
|
||||
} else {
|
||||
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 {
|
||||
// transparent
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
|
@ -159,9 +148,9 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
|||
}
|
||||
`;
|
||||
|
||||
// useFrame(() => {
|
||||
// purpleRingRef.current!.rotation.y += 0.01;
|
||||
// });
|
||||
useFrame(() => {
|
||||
purpleRingRef.current!.rotation.y += 0.005;
|
||||
});
|
||||
|
||||
return (
|
||||
<mesh
|
||||
|
|
|
@ -17,25 +17,25 @@ const Site = memo(() => {
|
|||
<GrayRing grayRingPosY={1.59} />
|
||||
<PurpleRing purpleRingPosY={0.4} />
|
||||
<GrayRing grayRingPosY={-0.28} />
|
||||
{/*{Object.values(blue_orbs).map((sprite) => {*/}
|
||||
{/* return (*/}
|
||||
{/* <BlueOrb*/}
|
||||
{/* position={sprite.position as [number, number, number]}*/}
|
||||
{/* scale={sprite.scale as [number, number, number]}*/}
|
||||
{/* rotation={*/}
|
||||
{/* sprite.rotation as [*/}
|
||||
{/* number,*/}
|
||||
{/* number,*/}
|
||||
{/* number,*/}
|
||||
{/* (string | undefined)?*/}
|
||||
{/* ]*/}
|
||||
{/* }*/}
|
||||
{/* sprite={sprite.sprite}*/}
|
||||
{/* key={sprite.id}*/}
|
||||
{/* active={sprite.id === currentBlueOrb}*/}
|
||||
{/* />*/}
|
||||
{/* );*/}
|
||||
{/*})}*/}
|
||||
{Object.values(blue_orbs).map((sprite) => {
|
||||
return (
|
||||
<BlueOrb
|
||||
position={sprite.position as [number, number, number]}
|
||||
scale={sprite.scale as [number, number, number]}
|
||||
rotation={
|
||||
sprite.rotation as [
|
||||
number,
|
||||
number,
|
||||
number,
|
||||
(string | undefined)?
|
||||
]
|
||||
}
|
||||
sprite={sprite.sprite}
|
||||
key={sprite.id}
|
||||
active={sprite.id === currentBlueOrb}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -2,7 +2,6 @@ import React from "react";
|
|||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
import { RecoilRoot } from "recoil";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
|
|
Loading…
Reference in a new issue