mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
tweaks, added basic 3d middle ring, need to fix transparency issue
This commit is contained in:
parent
5046a461af
commit
f719dfcd86
7 changed files with 96 additions and 32 deletions
|
@ -20,7 +20,7 @@ const App = () => {
|
|||
<div id="game-root" className="game">
|
||||
{/* {moveToGame ? <MainScene /> : <Intro setMoveToGame={setMoveToGame} />} */}
|
||||
{/* <Intro /> */}
|
||||
<Canvas concurrent>
|
||||
<Canvas concurrent >
|
||||
<RecoilRoot>
|
||||
<MainScene />
|
||||
</RecoilRoot>
|
||||
|
|
|
@ -1,17 +1,9 @@
|
|||
import React, {
|
||||
createRef,
|
||||
memo,
|
||||
MutableRefObject,
|
||||
Ref,
|
||||
RefObject,
|
||||
useRef,
|
||||
} from "react";
|
||||
import React, { createRef, memo, RefObject, useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { grayPlanesPosYAtom, grayPlanesVisibleAtom } from "./GrayPlanesAtom";
|
||||
import { Object3D } from "three";
|
||||
|
||||
const GrayPlanes = memo(() => {
|
||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
import {a, useSpring} from "@react-spring/three";
|
||||
import React, {Suspense, useState} from "react";
|
||||
import {useFrame, useLoader} from "react-three-fiber";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, { Suspense, useState } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import {PlainSingularAnimator} from "three-plain-animator/lib/plain-singular-animator";
|
||||
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
||||
import moveDownSpriteSheet from "../../static/sprites/jump_down.png";
|
||||
import moveUpSpriteSheet from "../../static/sprites/jump_up.png";
|
||||
import moveLeftSpriteSheet from "../../static/sprites/move_left.png";
|
||||
import moveRightSpriteSheet from "../../static/sprites/move_right.png";
|
||||
import standingSpriteSheet from "../../static/sprites/standing.png";
|
||||
import introSpriteSheet from "../../static/sprites/intro.png";
|
||||
import {useRecoilValue} from "recoil";
|
||||
import {lainMoveStateAtom, lainMovingAtom, lainPosYAtom} from "./LainAtom";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { lainMoveStateAtom, lainMovingAtom, lainPosYAtom } from "./LainAtom";
|
||||
|
||||
type LainConstructorProps = {
|
||||
sprite: string;
|
||||
|
|
|
@ -1,16 +1,19 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
// -2.5 - intro val
|
||||
export const mainGroupPosYAtom = atom({
|
||||
key: "mainGroupPosYAtom",
|
||||
default: -2.5,
|
||||
default: 0,
|
||||
});
|
||||
|
||||
//-9.5 - intro val
|
||||
export const mainGroupPosZAtom = atom({
|
||||
key: "mainGroupPosZAtom",
|
||||
default: -9.5,
|
||||
default: 0,
|
||||
});
|
||||
|
||||
//1.5 - intro val
|
||||
export const mainGroupRotXAtom = atom({
|
||||
key: "mainGroupRotXAtom",
|
||||
default: 1.5,
|
||||
default: 0,
|
||||
});
|
||||
|
|
|
@ -18,6 +18,7 @@ import {
|
|||
mainGroupRotXAtom,
|
||||
} from "./MainGroupAtom";
|
||||
import GrayPlanes from "../GrayPlanes/GrayPlanes";
|
||||
import MiddleRing from "../MiddleRing/MiddleRing";
|
||||
|
||||
const MainScene = () => {
|
||||
const setLainMoving = useSetRecoilState(lainMovingAtom);
|
||||
|
@ -72,6 +73,7 @@ const MainScene = () => {
|
|||
<Starfield />
|
||||
<GrayPlanes />
|
||||
<Lights />
|
||||
<MiddleRing />
|
||||
<OrbitControls />
|
||||
</a.group>
|
||||
<Lain />
|
||||
|
|
75
src/components/MiddleRing/MiddleRing.tsx
Normal file
75
src/components/MiddleRing/MiddleRing.tsx
Normal file
|
@ -0,0 +1,75 @@
|
|||
import React, { memo, useMemo } from "react";
|
||||
import { useFrame, useLoader, useThree } from "react-three-fiber";
|
||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import middleRingTexture from "../../static/sprites/middle_ring_tex.png";
|
||||
|
||||
import { draco } from "drei";
|
||||
import * as THREE from "three";
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
nodes: {
|
||||
BezierCircle: THREE.Mesh;
|
||||
};
|
||||
materials: {
|
||||
["Material.001"]: THREE.MeshStandardMaterial;
|
||||
};
|
||||
};
|
||||
|
||||
const MiddleRing = memo(() => {
|
||||
const { nodes, materials } = useLoader<GLTFResult>(
|
||||
GLTFLoader,
|
||||
"/models/ring2.glb",
|
||||
draco("/draco-gltf/")
|
||||
);
|
||||
|
||||
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
||||
|
||||
const uniforms = {
|
||||
tex: { type: "t", value: middleRingTex },
|
||||
};
|
||||
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShader = `
|
||||
uniform sampler2D tex;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
gl_FragColor = texture2D(tex, vUv);
|
||||
gl_FragColor.a = 0.5;
|
||||
}
|
||||
`;
|
||||
|
||||
// -0.15, 03
|
||||
return (
|
||||
<group>
|
||||
<mesh
|
||||
material={materials["Material.001"]}
|
||||
geometry={nodes.BezierCircle.geometry}
|
||||
position={[0, -0.15, 0.3]}
|
||||
scale={[0.8, 0.5, 0.8]}
|
||||
>
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
color={0x8cffde}
|
||||
side={THREE.DoubleSide}
|
||||
uniforms={uniforms}
|
||||
vertexShader={vertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
transparent={true}
|
||||
/>
|
||||
<meshBasicMaterial />
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
});
|
||||
|
||||
export default MiddleRing;
|
|
@ -1,13 +1,5 @@
|
|||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, {
|
||||
createRef,
|
||||
memo,
|
||||
RefObject,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import React, { createRef, memo, RefObject, useMemo, useRef } from "react";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import {
|
||||
|
@ -174,7 +166,7 @@ const Starfield = memo(() => {
|
|||
|
||||
const starSpeeds = Array.from(
|
||||
{ length: 60 },
|
||||
() => lcgInstance() / 100000000000
|
||||
() => lcgInstance() / 100000000000 + 0.03
|
||||
);
|
||||
|
||||
useFrame(() => {
|
||||
|
@ -191,7 +183,7 @@ const Starfield = memo(() => {
|
|||
posRef.current!.position.z = el[1][idx][2] - 2.5;
|
||||
}
|
||||
posRef.current!.position.x -=
|
||||
0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
|
||||
starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
|
||||
posRef.current!.position.z +=
|
||||
0.035 + starfieldState.starfieldBoostVal.get() * 0.5;
|
||||
}
|
||||
|
@ -206,7 +198,7 @@ const Starfield = memo(() => {
|
|||
posRef.current!.position.z = el[1][idx][2] - 0.5;
|
||||
} else {
|
||||
posRef.current!.position.x +=
|
||||
0.03 + starSpeeds[idx] +starfieldState.starfieldBoostVal.get();
|
||||
starSpeeds[idx] + starfieldState.starfieldBoostVal.get()
|
||||
posRef.current!.position.z +=
|
||||
0.015 + starfieldState.starfieldBoostVal.get() * 0.5;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue