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

procedurally generated ring mostly done, needs radius tweaked

Browse source
This commit is contained in:
ad044 2020-09-19 19:45:38 +04:00
parent 5f473325fc
commit 01db296737
5 changed files with 75 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/models/ring0.glb
View file

Binary file not shown.

25
src/components/GrayRing.tsx
View file

@ -15,12 +15,12 @@ const GrayRing = memo((props: GrayRingProps) => {
const lifeTex = useLoader(THREE.TextureLoader, lifeTexture); const lifeTex = useLoader(THREE.TextureLoader, lifeTexture);
const uniforms = useMemo( const uniforms = useMemo(
() => ({ () => ({
lof: { type: "t", value: lofTex }, lof: { type: "t", value: lofTex },
hole: { type: "t", value: holeTex }, hole: { type: "t", value: holeTex },
life: { type: "t", value: lifeTex }, life: { type: "t", value: lifeTex },
}), }),
[lofTex, holeTex, lifeTex] [lofTex, holeTex, lifeTex]
); );
const vertexShader = ` const vertexShader = `
@ -34,6 +34,7 @@ const GrayRing = memo((props: GrayRingProps) => {
} }
`; `;
const fragmentShader = ` const fragmentShader = `
varying vec2 vUv; varying vec2 vUv;
uniform sampler2D lof; uniform sampler2D lof;
@ -63,6 +64,7 @@ const GrayRing = memo((props: GrayRingProps) => {
return vec4(0.259,0.259,0.322, 1); return vec4(0.259,0.259,0.322, 1);
} else if (quadnum % 2 == 1) { } else if (quadnum % 2 == 1) {
return texture2D(hole, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y)); return texture2D(hole, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y));
// return vec4(tolocal(vUv.x, quadlen-thinperiod, step), 0, 0, 1);
} else if (quadnum == 0) { } else if (quadnum == 0) {
return texture2D(lof, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y)); return texture2D(lof, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y));
} else { } else {
@ -73,6 +75,8 @@ const GrayRing = memo((props: GrayRingProps) => {
void main() { void main() {
// number of segments // number of segments
float step = 64.0; float step = 64.0;
// thin line height
float thin = 0.3; float thin = 0.3;
// segment within circle // segment within circle
@ -87,7 +91,7 @@ const GrayRing = memo((props: GrayRingProps) => {
int quadnum = int(segment) / quadlen; int quadnum = int(segment) / quadlen;
// how big thin part is // how big thin part is
int thinperiod = 12; int thinperiod = 8;
if (quadel < thinperiod && isheight(vUv.y, thin)) { if (quadel < thinperiod && isheight(vUv.y, thin)) {
// thin line // thin line
@ -117,15 +121,16 @@ const GrayRing = memo((props: GrayRingProps) => {
} }
`; `;
return ( return (
<mesh <mesh
position={[0, props.grayRingPosY, 0]} position={[0, props.grayRingPosY, 0]}
rotation={[0, 3.7, 0]} rotation={[0, 3.95, 0]}
renderOrder={1} renderOrder={1}
scale={[5, 2.5, 5]} scale={[25,25,25]}
> >
<cylinderBufferGeometry <cylinderBufferGeometry
args={[0.25, 0.25, 0.027, 64, 64, true]} args={[0.05, 0.05, 0.003, 64, 64, true]}
attach="geometry" attach="geometry"
/> />
<shaderMaterial <shaderMaterial

42
src/components/Hub.tsx
View file

@ -14,28 +14,28 @@ const Hub = memo(() => {
<Suspense fallback={<>loading...</>}> <Suspense fallback={<>loading...</>}>
{/* average distance between rings from my CALCULATIONS is 1.87 in our case */} {/* average distance between rings from my CALCULATIONS is 1.87 in our case */}
<PurpleRing purpleRingPosY={2.27} /> <PurpleRing purpleRingPosY={2.27} />
<GrayRing grayRingPosY={1.6} /> <GrayRing grayRingPosY={1.59} />
<PurpleRing purpleRingPosY={0.4} /> <PurpleRing purpleRingPosY={0.4} />
<GrayRing grayRingPosY={-0.27} /> <GrayRing grayRingPosY={-0.28} />
{/*{Object.values(level_sprites).map((sprite) => {*/} {Object.values(level_sprites).map((sprite) => {
{/* return (*/} return (
{/* <LevelSprite*/} <LevelSprite
{/* 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 === currentSprite}*/} active={sprite.id === currentSprite}
{/* />*/} />
{/* );*/} );
{/*})}*/} })}
</Suspense> </Suspense>
</> </>
); );

11
src/components/MainScene/CameraAtom.tsx
View file

@ -1,12 +1,13 @@
import { atom } from "recoil"; import { atom } from "recoil";
export const camPosYAtom = atom({ export const camPosYAtom = atom({
key: "camPosYAtom", key: "camPosYAtom",
default: 0, // default: -1.87,
default: 0,
}); });
export const camRotYAtom = atom({ export const camRotYAtom = atom({
key: "camRotYAtom", key: "camRotYAtom",
default: 0, // default: 0.45,
default: 0,
}); });

58
src/components/PurpleRing.tsx
View file

@ -5,44 +5,44 @@ import * as THREE from "three";
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
type PurpleRingProps = { type PurpleRingProps = {
purpleRingPosY: number; purpleRingPosY: number;
}; };
type GLTFResult = GLTF & { type GLTFResult = GLTF & {
nodes: { nodes: {
Circle002: THREE.Mesh; Circle002: THREE.Mesh;
}; };
materials: {}; materials: {};
}; };
const PurpleRing = memo((props: PurpleRingProps) => { const PurpleRing = memo((props: PurpleRingProps) => {
const purpleRingRef = useRef<THREE.Object3D>(); const purpleRingRef = useRef<THREE.Object3D>();
const { nodes } = useLoader<GLTFResult>( const { nodes } = useLoader<GLTFResult>(
GLTFLoader, GLTFLoader,
"/models/ring1.glb", "/models/ring1.glb",
draco("/draco-gltf/") draco("/draco-gltf/")
); );
useFrame(() => { useFrame(() => {
purpleRingRef.current!.rotation.y += 0.01; purpleRingRef.current!.rotation.y += 0.01;
}); });
return ( return (
<group <group
position={[0, props.purpleRingPosY, 0]} position={[0, props.purpleRingPosY, 0]}
scale={[1.3, 1.3, 1.3]} scale={[1.3, 1.3, 1.3]}
ref={purpleRingRef} ref={purpleRingRef}
> >
<mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}> <mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}>
<meshStandardMaterial <meshStandardMaterial
attach="material" attach="material"
color={0x281f47} color={0x281f47}
side={THREE.DoubleSide} side={THREE.DoubleSide}
/> />
</mesh> </mesh>
</group> </group>
); );
}); });
export default PurpleRing; export default PurpleRing;