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
|
@ -1,17 +1,9 @@
|
||||||
import React, {
|
import React, { createRef, memo, RefObject, useRef } from "react";
|
||||||
createRef,
|
|
||||||
memo,
|
|
||||||
MutableRefObject,
|
|
||||||
Ref,
|
|
||||||
RefObject,
|
|
||||||
useRef,
|
|
||||||
} from "react";
|
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
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 { useRecoilValue } from "recoil";
|
||||||
import { grayPlanesPosYAtom, grayPlanesVisibleAtom } from "./GrayPlanesAtom";
|
import { grayPlanesPosYAtom, grayPlanesVisibleAtom } from "./GrayPlanesAtom";
|
||||||
import { Object3D } from "three";
|
|
||||||
|
|
||||||
const GrayPlanes = memo(() => {
|
const GrayPlanes = memo(() => {
|
||||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||||
|
|
|
@ -1,16 +1,19 @@
|
||||||
import { atom } from "recoil";
|
import { atom } from "recoil";
|
||||||
|
|
||||||
|
// -2.5 - intro val
|
||||||
export const mainGroupPosYAtom = atom({
|
export const mainGroupPosYAtom = atom({
|
||||||
key: "mainGroupPosYAtom",
|
key: "mainGroupPosYAtom",
|
||||||
default: -2.5,
|
default: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//-9.5 - intro val
|
||||||
export const mainGroupPosZAtom = atom({
|
export const mainGroupPosZAtom = atom({
|
||||||
key: "mainGroupPosZAtom",
|
key: "mainGroupPosZAtom",
|
||||||
default: -9.5,
|
default: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//1.5 - intro val
|
||||||
export const mainGroupRotXAtom = atom({
|
export const mainGroupRotXAtom = atom({
|
||||||
key: "mainGroupRotXAtom",
|
key: "mainGroupRotXAtom",
|
||||||
default: 1.5,
|
default: 0,
|
||||||
});
|
});
|
||||||
|
|
|
@ -18,6 +18,7 @@ import {
|
||||||
mainGroupRotXAtom,
|
mainGroupRotXAtom,
|
||||||
} from "./MainGroupAtom";
|
} from "./MainGroupAtom";
|
||||||
import GrayPlanes from "../GrayPlanes/GrayPlanes";
|
import GrayPlanes from "../GrayPlanes/GrayPlanes";
|
||||||
|
import MiddleRing from "../MiddleRing/MiddleRing";
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const setLainMoving = useSetRecoilState(lainMovingAtom);
|
const setLainMoving = useSetRecoilState(lainMovingAtom);
|
||||||
|
@ -72,6 +73,7 @@ const MainScene = () => {
|
||||||
<Starfield />
|
<Starfield />
|
||||||
<GrayPlanes />
|
<GrayPlanes />
|
||||||
<Lights />
|
<Lights />
|
||||||
|
<MiddleRing />
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
</a.group>
|
</a.group>
|
||||||
<Lain />
|
<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 { a, useSpring } from "@react-spring/three";
|
||||||
import React, {
|
import React, { createRef, memo, RefObject, useMemo, useRef } from "react";
|
||||||
createRef,
|
|
||||||
memo,
|
|
||||||
RefObject,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from "react";
|
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import {
|
import {
|
||||||
|
@ -174,7 +166,7 @@ const Starfield = memo(() => {
|
||||||
|
|
||||||
const starSpeeds = Array.from(
|
const starSpeeds = Array.from(
|
||||||
{ length: 60 },
|
{ length: 60 },
|
||||||
() => lcgInstance() / 100000000000
|
() => lcgInstance() / 100000000000 + 0.03
|
||||||
);
|
);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
|
@ -191,7 +183,7 @@ const Starfield = memo(() => {
|
||||||
posRef.current!.position.z = el[1][idx][2] - 2.5;
|
posRef.current!.position.z = el[1][idx][2] - 2.5;
|
||||||
}
|
}
|
||||||
posRef.current!.position.x -=
|
posRef.current!.position.x -=
|
||||||
0.03 + starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
|
starSpeeds[idx] + starfieldState.starfieldBoostVal.get();
|
||||||
posRef.current!.position.z +=
|
posRef.current!.position.z +=
|
||||||
0.035 + starfieldState.starfieldBoostVal.get() * 0.5;
|
0.035 + starfieldState.starfieldBoostVal.get() * 0.5;
|
||||||
}
|
}
|
||||||
|
@ -206,7 +198,7 @@ const Starfield = memo(() => {
|
||||||
posRef.current!.position.z = el[1][idx][2] - 0.5;
|
posRef.current!.position.z = el[1][idx][2] - 0.5;
|
||||||
} else {
|
} else {
|
||||||
posRef.current!.position.x +=
|
posRef.current!.position.x +=
|
||||||
0.03 + starSpeeds[idx] +starfieldState.starfieldBoostVal.get();
|
starSpeeds[idx] + starfieldState.starfieldBoostVal.get()
|
||||||
posRef.current!.position.z +=
|
posRef.current!.position.z +=
|
||||||
0.015 + starfieldState.starfieldBoostVal.get() * 0.5;
|
0.015 + starfieldState.starfieldBoostVal.get() * 0.5;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue