mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
working on mirror texture thing
This commit is contained in:
parent
4f1ea774f7
commit
aab249bce8
2 changed files with 40 additions and 16 deletions
BIN
public/gate_object_texture.png
Normal file
BIN
public/gate_object_texture.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 KiB |
|
@ -1,35 +1,59 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import gateMirrorTexture from "../../../static/sprite/gate_object_texture.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
const Mirror = () => {
|
||||
const gateMirrorTex = useLoader(THREE.TextureLoader, gateMirrorTexture);
|
||||
|
||||
const cubeTexture = useLoader(
|
||||
// @ts-ignore
|
||||
THREE.CubeTextureLoader,
|
||||
[
|
||||
"gate_object_texture_2.png",
|
||||
"gate_object_texture_2.png",
|
||||
"gate_object_texture_2.png",
|
||||
"gate_object_texture_2.png",
|
||||
"gate_object_texture_2.png",
|
||||
"gate_object_texture_2.png",
|
||||
"gate_object_texture_2.png",
|
||||
],
|
||||
(loader: THREE.CubeTextureLoader) => loader.setPath("../../../static")
|
||||
);
|
||||
|
||||
const mirrorMaterial = useMemo(() => {
|
||||
const loader = new THREE.CubeTextureLoader();
|
||||
const texture = loader.load([
|
||||
"gate_object_texture.png",
|
||||
"gate_object_texture.png",
|
||||
"gate_object_texture.png",
|
||||
"gate_object_texture.png",
|
||||
"gate_object_texture.png",
|
||||
"gate_object_texture.png",
|
||||
]);
|
||||
return new THREE.MeshBasicMaterial({
|
||||
envMap: cubeTexture,
|
||||
depthTest: false,
|
||||
transparent: true,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const mirrorRef = useRef<THREE.Object3D>();
|
||||
|
||||
const textureMemo = useMemo(() => {
|
||||
gateMirrorTex.wrapS = THREE.RepeatWrapping;
|
||||
gateMirrorTex.wrapT = THREE.RepeatWrapping;
|
||||
|
||||
return gateMirrorTex;
|
||||
}, [gateMirrorTex]);
|
||||
|
||||
useFrame(() => {
|
||||
if (mirrorRef.current) {
|
||||
mirrorRef.current.rotation.y += 0.03;
|
||||
}
|
||||
mirrorMaterial.needsUpdate = true;
|
||||
});
|
||||
|
||||
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]}>
|
||||
<mesh
|
||||
renderOrder={4}
|
||||
position={[0.2, 0.2, 0.2]}
|
||||
scale={[0.4, 1, 0.05]}
|
||||
material={mirrorMaterial}
|
||||
>
|
||||
<boxBufferGeometry attach="geometry"></boxBufferGeometry>
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
map={textureMemo}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
></meshBasicMaterial>
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue