From af26c3563c33f1c879677cc45f7d904c11ae25d2 Mon Sep 17 00:00:00 2001 From: ad044 Date: Wed, 26 Aug 2020 22:10:59 +0400 Subject: [PATCH] added second ring, tweaked code, camera functions properly --- public/models/ring1.glb | Bin 0 -> 19576 bytes src/App.tsx | 1 + src/components/Game.tsx | 130 +++++++++++++++++++----------------- src/components/Hub.tsx | 16 ++--- src/components/Lain.tsx | 137 +++++++++++++++++++++++--------------- src/components/Lights.tsx | 14 ++++ src/components/Ring0.tsx | 10 +-- src/components/Ring1.tsx | 49 ++++++++++++++ src/components/utils.ts | 3 - 9 files changed, 225 insertions(+), 135 deletions(-) create mode 100644 public/models/ring1.glb create mode 100644 src/components/Lights.tsx create mode 100644 src/components/Ring1.tsx delete mode 100644 src/components/utils.ts diff --git a/public/models/ring1.glb b/public/models/ring1.glb new file mode 100644 index 0000000000000000000000000000000000000000..b3948d43a263bd913c2fc44371b1fbb3a6ca08a6 GIT binary patch literal 19576 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 literal 0 HcmV?d00001 diff --git a/src/App.tsx b/src/App.tsx index 3457f32..92df437 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import Intro from "./components/Intro"; import Game from "./components/Game"; import "./static/css/main.css"; +import "./static/css/hub.css"; const App = () => { const [moveToGame, setMoveToGame] = useState(false); diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 732600f..7c1f98a 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -10,7 +10,8 @@ import Lain, { } from "./Lain"; import Hub from "./Hub"; //import Orb from "./Orb"; -import { OrbitControls } from "drei"; +import { OrbitControls, PerspectiveCamera } from "drei"; +import Lights from "./Lights"; type KeyCodeAssociations = { [keyCode: number]: string; @@ -20,17 +21,34 @@ type FrameCounts = { [animation: string]: number; }; -// value by which to rotate/move the ring on the y axis -type LowerRingValues = { - [direction: string]: number; -}; - const Game = () => { const [isLainMoving, setLainMoving] = useState(false); const [lainMoveState, setLainMoveState] = useState(); + const [lainPosY, setLainPosY] = useState(-0.2); - const [lowerRingRotationY, setLowerRingRotationY] = useState(5); - const [lowerRingPositionY, setLowerRingPositionY] = useState(-0.31); + const [cameraPosY, setCameraPosY] = useState(0); + const [cameraRotationY, setCameraRotationY] = useState(0); + + const moveCamera = (value: number, duration: number) => { + const moveInterval = setInterval(() => { + setCameraPosY((prev: number) => prev + value); + setLainPosY((prev: number) => prev - value); + }); + + setTimeout(() => { + clearInterval(moveInterval); + }, duration); + }; + + const rotateCamera = (value: number, duration: number) => { + const rotationInterval = setInterval(() => { + setCameraRotationY((prev: number) => prev + value); + }); + + setTimeout(() => { + clearInterval(rotationInterval); + }, duration); + }; const getKeyValue = (key: U) => ( obj: T @@ -93,35 +111,6 @@ const Game = () => { }, getAnimationDuration(key)); }; - const getLowerRingValue = (direction: string) => { - return getKeyValue(direction)({ - left: 0.002, - right: -0.002, - up: -0.005, - down: 0.005, - }); - }; - - const rotateLowerRing = (key: string, duration: number) => { - const rotationInterval = setInterval(() => { - setLowerRingRotationY((prev) => prev + getLowerRingValue(key)); - }, 10); - - setTimeout(() => { - clearInterval(rotationInterval); - }, duration); - }; - - const moveLowerRing = (key: string, duration: number) => { - const moveInterval = setInterval(() => { - setLowerRingPositionY((prev) => prev + getLowerRingValue(key)); - }); - - setTimeout(() => { - clearInterval(moveInterval); - }, duration); - }; - const handleUserKeyPress = useCallback( (event) => { const { _, keyCode } = event; @@ -129,22 +118,33 @@ const Game = () => { const key = getKeyCodeAssociation(keyCode); console.log(key); + if (!isLainMoving) { setAnimationState(key); - setTimeout(() => { - switch (key) { - case "left": - case "right": - rotateLowerRing(key, 1000); - break; - case "up": - case "down": - moveLowerRing(key, 1000); - break; - default: - break; - } - }, 1200); + switch (key) { + case "left": + setTimeout(() => { + rotateCamera(0.001, 1600); + }, 1100); + break; + case "right": + setTimeout(() => { + rotateCamera(-0.001, 1600); + }, 1100); + break; + case "up": + setTimeout(() => { + moveCamera(-0.005, 1200); + }, 1300); + break; + case "down": + setTimeout(() => { + moveCamera(0.005, 1200); + }, 1300); + break; + default: + break; + } } }, [isLainMoving] @@ -153,23 +153,31 @@ const Game = () => { useEffect(() => { window.addEventListener("keydown", handleUserKeyPress); + document.getElementsByTagName("canvas")[0].className = "hub-background"; + return () => { window.removeEventListener("keydown", handleUserKeyPress); + document.getElementsByTagName("body")[0].className = ""; }; }, [handleUserKeyPress]); return ( <> - - - - - - - + {/* */} + + + + + + + ); diff --git a/src/components/Hub.tsx b/src/components/Hub.tsx index 4c450b1..bf2d3c7 100644 --- a/src/components/Hub.tsx +++ b/src/components/Hub.tsx @@ -1,19 +1,13 @@ import React, { Suspense } from "react"; import Ring0 from "./Ring0"; +import Ring1 from "./Ring1"; -type HubProps = { - lowerRingPositionY: number; - lowerRingRotationY: number; -}; - -const Hub = (props: HubProps) => { +const Hub = (props: any) => { return ( <> - loading...}> - + loading...}> + + ); diff --git a/src/components/Lain.tsx b/src/components/Lain.tsx index cc7616e..2f387de 100644 --- a/src/components/Lain.tsx +++ b/src/components/Lain.tsx @@ -4,7 +4,7 @@ import * as THREE from "three"; import introSpriteSheet from "../static/sprites/intro.png"; import moveDownSpriteSheet from "../static/sprites/jump_down.png"; import standingSpriteSheet from "../static/sprites/standing.png"; -import moveLeftSpriteSheet from "../static/sprites/move_left1.png"; +import moveLeftSpriteSheet from "../static/sprites/move_left.png"; import moveRightSpriteSheet from "../static/sprites/move_right.png"; import moveUpSpriteSheet from "../static/sprites/jump_up.png"; import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator"; @@ -12,26 +12,26 @@ import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-a type LainProps = { isLainMoving: boolean; lainMoveState: JSX.Element; + lainPosY: number; }; type LainConstructorProps = { sprite: string; frameCount: number; + framesVertical: number; + framesHorizontal: number; }; const LainConstructor = (props: LainConstructorProps) => { // any here temporarily - const spriteTexture: any = useLoader( - THREE.TextureLoader, - props.sprite - ); + const spriteTexture: any = useLoader(THREE.TextureLoader, props.sprite); const [animator] = useState( () => new PlainSingularAnimator( spriteTexture, - props.frameCount, - 1, + props.framesHorizontal, + props.framesVertical, props.frameCount, props.frameCount * 0.27 ) @@ -42,57 +42,84 @@ const LainConstructor = (props: LainConstructorProps) => { }); return ( - - - + + ); +}; + +export const LainIntro = () => { + return ( + + ); +}; + +export const LainStanding = () => { + return ( + + ); +}; + +export const LainMoveDown = () => { + return ( + + ); +}; + +export const LainMoveLeft = () => { + return ( + + ); +}; + +export const LainMoveRight = () => { + return ( + + ); +}; + +export const LainMoveUp = () => { + return ( + + ); +}; + +const Lain = (props: LainProps) => { + return ( + loading...}> + + {props.isLainMoving ? props.lainMoveState : } ); }; -export const LainIntro = () => { - return ; -}; - -export const LainStanding = () => { - return ; -}; - -export const LainMoveDown = () => { - return ; -}; - -export const LainMoveLeft = () => { - return ; -}; - -export const LainMoveRight = () => { - return ; -}; - -export const LainMoveUp = () => { - return ; -}; - -const Lain = (props: LainProps) => { - return ( - <> - {/* without a suspense the sprites wont load, and the suspense loading - animation takes about .3 seconds to finish for each sprite resulting in - blinks between each spritesheet. with a nested suspense we can have - LainStanding as the suspense fallback with a fallback of its own (the - loading message) which will only be shown once, when the game loads. */} - loading...}> - - - } - > - {props.isLainMoving ? props.lainMoveState : } - - - ); -}; - export default Lain; diff --git a/src/components/Lights.tsx b/src/components/Lights.tsx new file mode 100644 index 0000000..f6d296b --- /dev/null +++ b/src/components/Lights.tsx @@ -0,0 +1,14 @@ +import React from "react"; + +const Lights = () => { + return ( + <> + + + + + + ); +}; + +export default Lights; diff --git a/src/components/Ring0.tsx b/src/components/Ring0.tsx index b596116..be5fe91 100644 --- a/src/components/Ring0.tsx +++ b/src/components/Ring0.tsx @@ -24,7 +24,7 @@ type GLTFResult = GLTF & { materials: {}; }; -const Ring0 = (props: Ring0Props) => { +const Ring0 = (props: any) => { const { nodes, materials } = useLoader( GLTFLoader, "/models/ring0.glb", @@ -33,14 +33,14 @@ const Ring0 = (props: Ring0Props) => { return ( @@ -48,4 +48,4 @@ const Ring0 = (props: Ring0Props) => { ); }; -export default Ring0 +export default Ring0; diff --git a/src/components/Ring1.tsx b/src/components/Ring1.tsx new file mode 100644 index 0000000..c5df198 --- /dev/null +++ b/src/components/Ring1.tsx @@ -0,0 +1,49 @@ +import * as THREE from "three"; +import React, { useRef, useState, useEffect } from "react"; +import { useLoader } from "react-three-fiber"; +import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader"; +import { draco } from "drei"; + +type GLTFResult = GLTF & { + nodes: { + Circle002: THREE.Mesh; + }; + materials: {}; +}; + +const Ring1 = (props: JSX.IntrinsicElements["group"]) => { + const [higherRingRotation, setHigherRingRotation] = useState(0); + + const { nodes, materials } = useLoader( + GLTFLoader, + "/models/ring1.glb", + draco("/draco-gltf/") + ); + + const ring1PermaRotation = () => { + setHigherRingRotation((prev) => prev + 0.002); + }; + + useEffect(() => { + setInterval(ring1PermaRotation, 1); + }, []); + + return ( + + + + + + ); +}; + +export default Ring1; diff --git a/src/components/utils.ts b/src/components/utils.ts deleted file mode 100644 index 39d3679..0000000 --- a/src/components/utils.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const getKeyValue = (key: U) => ( - obj: T -) => obj[key];