added ortho camera and a base for hud

src/components/Game.tsx

@@ -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;

src/components/OrthoCamera.tsx

@@ -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;

src/resources/level_sprites.json

@@ -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]
+        }
+      }
     }
   }
 }