mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added ortho camera and a base for hud
This commit is contained in:
parent
c226845717
commit
d08d28ab70
3 changed files with 118 additions and 6 deletions
|
@ -1,5 +1,19 @@
|
|||
import React, { useState, Suspense, useCallback, useEffect } from "react";
|
||||
import { useFrame, Canvas, useLoader, useThree } from "react-three-fiber";
|
||||
import React, {
|
||||
useState,
|
||||
Suspense,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
} from "react";
|
||||
import {
|
||||
useFrame,
|
||||
Canvas,
|
||||
useLoader,
|
||||
useThree,
|
||||
createPortal,
|
||||
useCamera,
|
||||
} from "react-three-fiber";
|
||||
import Lain, {
|
||||
LainIntro,
|
||||
LainMoveDown,
|
||||
|
@ -10,8 +24,15 @@ import Lain, {
|
|||
} from "./Lain";
|
||||
import Hub from "./Hub";
|
||||
//import Orb from "./Orb";
|
||||
import { OrbitControls, PerspectiveCamera } from "drei";
|
||||
import {
|
||||
OrbitControls,
|
||||
PerspectiveCamera,
|
||||
OrthographicCamera,
|
||||
Octahedron,
|
||||
} from "drei";
|
||||
import Lights from "./Lights";
|
||||
import { Matrix4, Scene } from "three";
|
||||
import OrthoCamera from "./OrthoCamera";
|
||||
|
||||
type KeyCodeAssociations = {
|
||||
[keyCode: number]: string;
|
||||
|
@ -163,7 +184,6 @@ const Game = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{/* <Canvas camera={{ position: [0, 0, -2] }}> */}
|
||||
<Canvas>
|
||||
<PerspectiveCamera
|
||||
position={[0, cameraPosY, 3]}
|
||||
|
@ -177,10 +197,12 @@ const Game = () => {
|
|||
/>
|
||||
<Hub />
|
||||
<Lights />
|
||||
<Suspense fallback={null}>
|
||||
<OrthoCamera />
|
||||
</Suspense>
|
||||
</PerspectiveCamera>
|
||||
</Canvas>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Game;
|
||||
|
|
76
src/components/OrthoCamera.tsx
Normal file
76
src/components/OrthoCamera.tsx
Normal file
|
@ -0,0 +1,76 @@
|
|||
import React, {
|
||||
useState,
|
||||
Suspense,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
} from "react";
|
||||
import {
|
||||
useFrame,
|
||||
Canvas,
|
||||
useLoader,
|
||||
useThree,
|
||||
useCamera,
|
||||
createPortal,
|
||||
} from "react-three-fiber";
|
||||
//import Orb from "./Orb";
|
||||
import { OrthographicCamera, Octahedron } from "drei";
|
||||
import { Matrix4, Scene } from "three";
|
||||
import * as THREE from "three";
|
||||
import longHud from "../static/sprites/long_hud.png";
|
||||
import longHudBoring from "../static/sprites/long_hud_boring.png";
|
||||
import bigHud from "../static/sprites/big_hud.png";
|
||||
|
||||
const OrthoCamera = () => {
|
||||
const { gl, scene, camera } = useThree();
|
||||
const virtualScene = useMemo(() => new Scene(), []);
|
||||
const virtualCam = useRef();
|
||||
|
||||
useFrame(() => {
|
||||
gl.autoClear = false;
|
||||
gl.clear();
|
||||
gl.render(scene, camera);
|
||||
gl.clearDepth();
|
||||
gl.render(virtualScene, virtualCam.current!);
|
||||
}, 1);
|
||||
|
||||
const longHudTexture: any = useLoader(THREE.TextureLoader, longHud);
|
||||
const longHudBoringTexture: any = useLoader(
|
||||
THREE.TextureLoader,
|
||||
longHudBoring
|
||||
);
|
||||
const bigHudTexture: any = useLoader(THREE.TextureLoader, bigHud);
|
||||
|
||||
return (
|
||||
<OrthographicCamera
|
||||
ref={virtualCam}
|
||||
makeDefault={false}
|
||||
position={[0, 0, 10]}
|
||||
>
|
||||
<sprite position={[-0.45, 0.15, -8.6]} scale={[1, 0.03, 1]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={longHudTexture}
|
||||
transparent={true}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite position={[0.48, 0.174, -8.6]} scale={[1, 0.03, 1]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={longHudBoringTexture}
|
||||
transparent={true}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite position={[0.36, 0.13, -8.6]} scale={[0.5, 0.06, 1]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={bigHudTexture}
|
||||
transparent={true}
|
||||
/>
|
||||
</sprite>
|
||||
</OrthographicCamera>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrthoCamera;
|
|
@ -26,7 +26,21 @@
|
|||
"scale": [0.25, 0.15, 0.25],
|
||||
"rotation": [0, -0.1, 0],
|
||||
"sprite": "touko",
|
||||
"id": "043"
|
||||
"id": "043",
|
||||
"hud": {
|
||||
"long": {
|
||||
"position": [-0.45, 0.15, -8.6],
|
||||
"scale": [1, 0.03, 1]
|
||||
},
|
||||
"long_boring": {
|
||||
"position": [0.48, 0.174, -8.6],
|
||||
"scale": [1, 0.03, 1]
|
||||
},
|
||||
"big": {
|
||||
"position": [0.36, 0.13, -8.6],
|
||||
"scale": [0.5, 0.06, 1]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue