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 React, { useMemo, useRef } from "react";
|
||||||
import gateMirrorTexture from "../../../static/sprite/gate_object_texture.png";
|
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
||||||
const Mirror = () => {
|
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 mirrorRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const textureMemo = useMemo(() => {
|
|
||||||
gateMirrorTex.wrapS = THREE.RepeatWrapping;
|
|
||||||
gateMirrorTex.wrapT = THREE.RepeatWrapping;
|
|
||||||
|
|
||||||
return gateMirrorTex;
|
|
||||||
}, [gateMirrorTex]);
|
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (mirrorRef.current) {
|
if (mirrorRef.current) {
|
||||||
mirrorRef.current.rotation.y += 0.03;
|
mirrorRef.current.rotation.y += 0.03;
|
||||||
}
|
}
|
||||||
|
mirrorMaterial.needsUpdate = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group ref={mirrorRef} position={[-0.1, -0.2, -0.2]}>
|
<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>
|
<boxBufferGeometry attach="geometry"></boxBufferGeometry>
|
||||||
<meshBasicMaterial
|
|
||||||
attach="material"
|
|
||||||
map={textureMemo}
|
|
||||||
transparent={true}
|
|
||||||
depthTest={false}
|
|
||||||
></meshBasicMaterial>
|
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue