added gate mirror object model

src/components/Boot/BootAuthorizeUser.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import authorizeHeaderUnderline from "../../static/sprite/authorize_header_underline.png";
 import authorizeGlass from "../../static/sprite/authorize_glass.png";
 import authorizeGlassUnderline from "../../static/sprite/authorize_glass_underline.png";
 import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.png";
 import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
 import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_letters.png";
-import { useLoader } from "react-three-fiber";
+import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 
 type BootAuthorizeUserProps = {
@@ -35,6 +35,8 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
     authorizeInactiveLetters
   );
 
+  const backgroundLetterRef = useRef<THREE.Object3D>();
+
   return (
     <>
       {props.visible ? (
@@ -98,10 +100,11 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
           </sprite>
 
           <mesh
-            scale={[5 * 1.5, 1.28 * 1.5, 0]}
+            scale={[4, 1.28, 0]}
-            position={[-1.06, -0.42, 0]}
+            position={[-1.06, 0.3, -0.3]}
-            rotation={[-0.8, 0, -0.3]}
+            rotation={[-1, 0, -0.3]}
             renderOrder={-1}
+            ref={backgroundLetterRef}
           >
             <planeBufferGeometry attach="geometry" />
             <meshBasicMaterial

src/components/Boot/BootMainMenuComponents.tsx

@@ -35,13 +35,11 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
   const loadDataTextState = useMemo(() => {
     if (props.activeSubScene === "load_data") {
       return {
-        scale: [1.4, 0.16, 0],
         texture: loadDataHeaderTex,
         position: { x: -1.13, y: -1 },
       };
     } else {
       return {
-        scale: [1.4, 0.3, 0],
         texture:
           activeBootElement === "load_data"
             ? loadDataActiveTex
@@ -111,7 +109,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
           </a.sprite>
 
           <a.sprite
-            scale={loadDataTextState.scale as [number, number, number]}
+            scale={[1.4, 0.3, 0]}
             renderOrder={1}
             position-x={mainMenuAnimationState.loadDataPosX}
             position-y={mainMenuAnimationState.loadDataPosY}

src/components/GateScene/GateMiddleObject/Mirror.tsx

@@ -2,46 +2,62 @@ import React, { useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import mirrorTexture from "../../../static/sprite/gate_object_texture.png";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { useGLTF } from "@react-three/drei/useGLTF";
+
+type GLTFResult = GLTF & {
+  nodes: {
+    GatePass: THREE.Mesh;
+  };
+  materials: {
+    Material: THREE.MeshStandardMaterial;
+  };
+};
 
 const Mirror = () => {
-  const tex1 = useLoader(THREE.TextureLoader, mirrorTexture);
+  const mirrorTex = useLoader(THREE.TextureLoader, mirrorTexture);
-
+  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/gatePass.glb");
-  const texture = useMemo(() => {
-    let repeatX, repeatY;
-    tex1.wrapS = THREE.RepeatWrapping;
-    tex1.wrapT = THREE.RepeatWrapping;
-    repeatX = 88 / 256;
-    repeatY = 1;
-    tex1.repeat.set(repeatX, repeatY);
-    return tex1;
-  }, [tex1]);
 
   const mirrorRef = useRef<THREE.Object3D>();
   const materialRef = useRef<THREE.MeshBasicMaterial>();
 
+  const tex = useMemo(() => {
+    mirrorTex.wrapS = mirrorTex.wrapT = THREE.RepeatWrapping;
+    return mirrorTex;
+  }, [mirrorTex]);
+
   useFrame(() => {
     if (mirrorRef.current) {
       mirrorRef.current.rotation.y -= 0.03;
     }
     if (materialRef.current) {
-      texture.offset.x += 0.01;
+      tex.offset.y -= 0.01;
     }
   });
 
   return (
     <>
-      <group ref={mirrorRef} position={[-0.1, -0.2, -0.2]}>
+      <group ref={mirrorRef} position={[0, 0, 0.2]}>
-        <mesh renderOrder={4} position={[0.2, 0.2, 0.2]} scale={[0.4, 1, 0.05]}>
+        <mesh
-          <boxBufferGeometry attach="geometry" />
+          geometry={nodes.GatePass.geometry}
+          scale={[0.01, 0.6, 0.2]}
+          rotation={[0, Math.PI / 2, 0]}
+          renderOrder={4}
+          position={[0, 0, -0.2]}
+        >
           <meshBasicMaterial
             ref={materialRef}
             attach="material"
-            map={texture}
             transparent={true}
+            map={mirrorTex}
             depthTest={false}
           />
         </mesh>
       </group>
+
+      {/*<mesh renderOrder={4} position={[0.2, 0.2, 0.2]} scale={[0.4, 1, 0.05]}>*/}
+      {/*  <boxBufferGeometry attach="geometry" />*/}
+      {/*</mesh>*/}
     </>
   );
 };