mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

working on mirror texture thing

Browse source
This commit is contained in:
ad044 2020-11-06 00:08:15 +04:00
parent 4f1ea774f7
commit aab249bce8
2 changed files with 40 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/gate_object_texture.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

56
src/components/GateScene/GateMiddleObject/Mirror.tsx
View file

@ -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>
);