mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added gate mirror object model
This commit is contained in:
parent
ca24f91ae1
commit
07c4e0cf27
4 changed files with 41 additions and 24 deletions
BIN
public/models/gatePass.glb
Normal file
BIN
public/models/gatePass.glb
Normal file
Binary file not shown.
|
@ -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]}
|
||||
position={[-1.06, -0.42, 0]}
|
||||
rotation={[-0.8, 0, -0.3]}
|
||||
scale={[4, 1.28, 0]}
|
||||
position={[-1.06, 0.3, -0.3]}
|
||||
rotation={[-1, 0, -0.3]}
|
||||
renderOrder={-1}
|
||||
ref={backgroundLetterRef}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshBasicMaterial
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 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 mirrorTex = useLoader(THREE.TextureLoader, mirrorTexture);
|
||||
const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/gatePass.glb");
|
||||
|
||||
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]}>
|
||||
<mesh renderOrder={4} position={[0.2, 0.2, 0.2]} scale={[0.4, 1, 0.05]}>
|
||||
<boxBufferGeometry attach="geometry" />
|
||||
<group ref={mirrorRef} position={[0, 0, 0.2]}>
|
||||
<mesh
|
||||
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>*/}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue