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 authorizeHeaderUnderline from "../../static/sprite/authorize_header_underline.png";
|
||||||
import authorizeGlass from "../../static/sprite/authorize_glass.png";
|
import authorizeGlass from "../../static/sprite/authorize_glass.png";
|
||||||
import authorizeGlassUnderline from "../../static/sprite/authorize_glass_underline.png";
|
import authorizeGlassUnderline from "../../static/sprite/authorize_glass_underline.png";
|
||||||
import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.png";
|
import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.png";
|
||||||
import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
|
import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
|
||||||
import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_letters.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";
|
import * as THREE from "three";
|
||||||
|
|
||||||
type BootAuthorizeUserProps = {
|
type BootAuthorizeUserProps = {
|
||||||
|
@ -35,6 +35,8 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
||||||
authorizeInactiveLetters
|
authorizeInactiveLetters
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const backgroundLetterRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{props.visible ? (
|
{props.visible ? (
|
||||||
|
@ -98,10 +100,11 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
||||||
</sprite>
|
</sprite>
|
||||||
|
|
||||||
<mesh
|
<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}
|
renderOrder={-1}
|
||||||
|
ref={backgroundLetterRef}
|
||||||
>
|
>
|
||||||
<planeBufferGeometry attach="geometry" />
|
<planeBufferGeometry attach="geometry" />
|
||||||
<meshBasicMaterial
|
<meshBasicMaterial
|
||||||
|
|
|
@ -35,13 +35,11 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
const loadDataTextState = useMemo(() => {
|
const loadDataTextState = useMemo(() => {
|
||||||
if (props.activeSubScene === "load_data") {
|
if (props.activeSubScene === "load_data") {
|
||||||
return {
|
return {
|
||||||
scale: [1.4, 0.16, 0],
|
|
||||||
texture: loadDataHeaderTex,
|
texture: loadDataHeaderTex,
|
||||||
position: { x: -1.13, y: -1 },
|
position: { x: -1.13, y: -1 },
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
scale: [1.4, 0.3, 0],
|
|
||||||
texture:
|
texture:
|
||||||
activeBootElement === "load_data"
|
activeBootElement === "load_data"
|
||||||
? loadDataActiveTex
|
? loadDataActiveTex
|
||||||
|
@ -111,7 +109,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
|
|
||||||
<a.sprite
|
<a.sprite
|
||||||
scale={loadDataTextState.scale as [number, number, number]}
|
scale={[1.4, 0.3, 0]}
|
||||||
renderOrder={1}
|
renderOrder={1}
|
||||||
position-x={mainMenuAnimationState.loadDataPosX}
|
position-x={mainMenuAnimationState.loadDataPosX}
|
||||||
position-y={mainMenuAnimationState.loadDataPosY}
|
position-y={mainMenuAnimationState.loadDataPosY}
|
||||||
|
|
|
@ -2,46 +2,62 @@ import React, { useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import mirrorTexture from "../../../static/sprite/gate_object_texture.png";
|
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 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 mirrorRef = useRef<THREE.Object3D>();
|
||||||
const materialRef = useRef<THREE.MeshBasicMaterial>();
|
const materialRef = useRef<THREE.MeshBasicMaterial>();
|
||||||
|
|
||||||
|
const tex = useMemo(() => {
|
||||||
|
mirrorTex.wrapS = mirrorTex.wrapT = THREE.RepeatWrapping;
|
||||||
|
return mirrorTex;
|
||||||
|
}, [mirrorTex]);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (mirrorRef.current) {
|
if (mirrorRef.current) {
|
||||||
mirrorRef.current.rotation.y -= 0.03;
|
mirrorRef.current.rotation.y -= 0.03;
|
||||||
}
|
}
|
||||||
if (materialRef.current) {
|
if (materialRef.current) {
|
||||||
texture.offset.x += 0.01;
|
tex.offset.y -= 0.01;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
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
|
<meshBasicMaterial
|
||||||
ref={materialRef}
|
ref={materialRef}
|
||||||
attach="material"
|
attach="material"
|
||||||
map={texture}
|
|
||||||
transparent={true}
|
transparent={true}
|
||||||
|
map={mirrorTex}
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</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