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

added floating sprites

Browse source
This commit is contained in:
ad044 2020-08-27 17:23:55 +04:00
parent af26c3563c
commit c226845717
7 changed files with 119 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/index.html
View file

@ -12,7 +12,10 @@
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<noscript
>do you actually believe i could rewrite this in plain html css or
smoetihng</noscript
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
<div id="root"></div>
</body>

6
src/components/Ring0.tsx → src/components/GrayRing.tsx
View file

@ -12,7 +12,7 @@ import Lain from "./Lain";
import { Mesh, MeshLambertMaterial, DoubleSide } from "three";
import * as THREE from "three";
type Ring0Props = {
type GrayRingProps = {
lowerRingPositionY: number;
lowerRingRotationY: number;
};
@ -24,7 +24,7 @@ type GLTFResult = GLTF & {
materials: {};
};
const Ring0 = (props: any) => {
const GrayRing = (props: any) => {
const { nodes, materials } = useLoader<GLTFResult>(
GLTFLoader,
"/models/ring0.glb",
@ -48,4 +48,4 @@ const Ring0 = (props: any) => {
);
};
export default Ring0;
export default GrayRing;

24
src/components/Hub.tsx
View file

@ -1,13 +1,29 @@
import React, { Suspense } from "react";
import Ring0 from "./Ring0";
import Ring1 from "./Ring1";
import GrayRing from "./GrayRing";
import PurpleRing from "./PurpleRing";
import LevelSprite from "./LevelSprite";
import level_sprites from "../resources/level_sprites.json";
type PositionAndScaleProps = [number, number, number];
type RotationProps = [number, number, number, (string | undefined)?];
const Hub = (props: any) => {
return (
<>
<Suspense fallback={<>loading...</>}>
<Ring1 />
<Ring0 />
<PurpleRing />
<GrayRing />
{Object.values(level_sprites.level04).map((sprite) => {
return (
<LevelSprite
position={sprite.position as PositionAndScaleProps}
scale={sprite.scale as PositionAndScaleProps}
rotation={sprite.rotation as RotationProps}
sprite={sprite.sprite}
key={sprite.id}
/>
);
})}
</Suspense>
</>
);

6
src/components/Lain.tsx
View file

@ -41,9 +41,7 @@ const LainConstructor = (props: LainConstructorProps) => {
animator.animate();
});
return (
<spriteMaterial attach="material" map={spriteTexture}></spriteMaterial>
);
return <spriteMaterial attach="material" map={spriteTexture} />;
};
export const LainIntro = () => {
@ -115,7 +113,7 @@ export const LainMoveUp = () => {
const Lain = (props: LainProps) => {
return (
<Suspense fallback={<>loading...</>}>
<sprite position={[0.1, props.lainPosY, 0]} scale={[4.3, 4.3, 4.3]}>
<sprite position={[0.1, props.lainPosY, 0]} scale={[4.9, 4.9, 4.9]}>
{props.isLainMoving ? props.lainMoveState : <LainStanding />}
</sprite>
</Suspense>

54
src/components/LevelSprite.tsx Normal file
View file

@ -0,0 +1,54 @@
import React, { Suspense } from "react";
import { useFrame, useLoader, useThree } from "react-three-fiber";
import * as THREE from "three";
import movie from "../static/sprites/movie.png";
import touko from "../static/sprites/touko.png";
import s from "../static/sprites/s.png";
import copland from "../static/sprites/copland.png";
type LevelSpriteConstructorProps = {
sprite: string;
position: [number, number, number];
scale: [number, number, number];
rotation: [number, number, number, (string | undefined)?];
};
type SpriteToPath = {
[key: string]: string;
};
const LevelSprite = (props: LevelSpriteConstructorProps) => {
// the game only has a couple of sprites 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
// associate a sprite with the path
// (yes, imbad at naming them)
const spriteToPath = (sprite: string) => {
return ({
movie: movie,
touko: touko,
s: s,
copland: copland,
} as SpriteToPath)[sprite];
};
const spriteTexture: any = useLoader(THREE.TextureLoader, spriteToPath(props.sprite));
return (
<mesh
position={props.position}
scale={props.scale}
rotation={props.rotation}
>
<planeBufferGeometry attach="geometry" />
<meshStandardMaterial
side={THREE.DoubleSide}
attach="material"
map={spriteTexture}
transparent={true}
/>
</mesh>
);
};
export default LevelSprite;

8
src/components/Ring1.tsx → src/components/PurpleRing.tsx
View file

@ -11,7 +11,7 @@ type GLTFResult = GLTF & {
materials: {};
};
const Ring1 = (props: JSX.IntrinsicElements["group"]) => {
const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
const [higherRingRotation, setHigherRingRotation] = useState(0);
const { nodes, materials } = useLoader<GLTFResult>(
@ -20,12 +20,12 @@ const Ring1 = (props: JSX.IntrinsicElements["group"]) => {
draco("/draco-gltf/")
);
const ring1PermaRotation = () => {
const purpleRingPermaRotation = () => {
setHigherRingRotation((prev) => prev + 0.002);
};
useEffect(() => {
setInterval(ring1PermaRotation, 1);
setInterval(purpleRingPermaRotation, 1);
}, []);
return (
@ -46,4 +46,4 @@ const Ring1 = (props: JSX.IntrinsicElements["group"]) => {
);
};
export default Ring1;
export default PurpleRing;

32
src/resources/level_sprites.json Normal file
View file

@ -0,0 +1,32 @@
{
"level04": {
"0": {
"position": [0.4, -0.25, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, 0.2, 0],
"sprite": "movie",
"id": "040"
},
"1": {
"position": [0.4, 0, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, 0.09, 0],
"sprite": "s",
"id": "041"
},
"2": {
"position": [-0.35, 0, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, -0.1, 0],
"sprite": "copland",
"id": "042"
},
"3": {
"position": [-0.35, 0.25, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, -0.1, 0],
"sprite": "touko",
"id": "043"
}
}
}