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

added more sprites to the scene, still working on mirror object

Browse source
This commit is contained in:
ad044 2020-11-06 18:40:48 +04:00
parent aab249bce8
commit c698b097b8
9 changed files with 142 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
package-lock.json generated
View file

@ -2255,6 +2255,45 @@
"@react-spring/shared": "9.0.0-rc.3"
}
},
"@react-three/drei": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-2.2.3.tgz",
"integrity": "sha512-ZnVybevJ494ql+KdIaQaWRV5xbM4Z8MLDFkdJxzcZopxOj94LKmDCg7gVfIJ2/5dRL/RpiZAm9r8GAV7rToEig==",
"requires": {
"@babel/runtime": "^7.11.2",
"@react-spring/web": "^9.0.0-rc.3",
"detect-gpu": "^1.5.1",
"glsl-noise": "^0.0.0",
"lodash.omit": "^4.5.0",
"lodash.pick": "^4.4.0",
"react-merge-refs": "^1.0.0",
"stats.js": "^0.17.0",
"troika-three-text": "^0.34.0",
"utility-types": "^3.10.0",
"zustand": "^3.0.3"
},
"dependencies": {
"troika-three-text": {
"version": "0.34.1",
"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.34.1.tgz",
"integrity": "sha512-67nXL2cPFzkCFmfRTpo0ylH1OY7gqwzRSt1C+SgnG2/rAmFCExhvr+ND2TVX8U4kVctCLgfU/e7V8IOdZ3x/gQ==",
"requires": {
"troika-three-utils": "^0.34.0",
"troika-worker-utils": "^0.34.1"
}
},
"troika-three-utils": {
"version": "0.34.0",
"resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.34.0.tgz",
"integrity": "sha512-6Dm6FzGFpuiehjKkm3wAV3e+SPnHQ+GxwXnHFToKLcQ1/gVDOIL69BWCosrlEUb0SUOQjQv6sd5QpNT6IIewpQ=="
},
"troika-worker-utils": {
"version": "0.34.1",
"resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.34.1.tgz",
"integrity": "sha512-zLTSB6ISd/dpBMG6PFR2v7sqU2bqVwOUd45iWzcgcRE9+w/5YJN8h0+H5EmgRPIVe5xus0UZQKUgVH6FRA+YdQ=="
}
}
},
"@rollup/plugin-node-resolve": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@ -5588,25 +5627,6 @@
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
},
"drei": {
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/drei/-/drei-1.5.7.tgz",
"integrity": "sha512-x7PQfvoSI1OqOwghZuZBhrNtaxMHh0bpVBLFYu39qwDghnBYgNIpNhoRtqK5FzRbcS1Rjdq0KWP0leSGKG/rsA==",
"requires": {
"@babel/runtime": "^7.11.2",
"@react-spring/web": "^9.0.0-rc.3",
"detect-gpu": "^1.3.0",
"glsl-noise": "^0.0.0",
"lodash.omit": "^4.5.0",
"lodash.pick": "^4.4.0",
"r3f-troika": "^0.31.1",
"react-merge-refs": "^1.0.0",
"stats.js": "^0.17.0",
"troika-three-text": "^0.31.0",
"utility-types": "^3.10.0",
"zustand": "^3.0.3"
}
},
"duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@ -13972,15 +13992,6 @@
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
},
"r3f-troika": {
"version": "0.31.1",
"resolved": "https://registry.npmjs.org/r3f-troika/-/r3f-troika-0.31.1.tgz",
"integrity": "sha512-d0AI2ZCpU5u9axqJ3I+KI786ltQNOJKimeuq+96Sir/sg0Nl2m5JNA9fBg+YEZ6fOR7+kcbyaycQcTbfTpYDDQ==",
"requires": {
"troika-three-utils": "^0.31.0",
"troika-worker-utils": "^0.31.0"
}
},
"raf": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@ -16535,25 +16546,6 @@
"punycode": "^2.1.1"
}
},
"troika-three-text": {
"version": "0.31.0",
"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.31.0.tgz",
"integrity": "sha512-JpRO+AC9mLZ49IymBwwwFLcasN0xjjQmSkGO9tlzlpeHpexsK4JB80qs6d6vhtt+vmfdJi27/m+WYhaR6+OzaQ==",
"requires": {
"troika-three-utils": "^0.31.0",
"troika-worker-utils": "^0.31.0"
}
},
"troika-three-utils": {
"version": "0.31.0",
"resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.31.0.tgz",
"integrity": "sha512-IUy61i+Kv0EjievWhOmIkqjDa1acIO2J98oO2tZ+PpEfA+Q0syRknH4SN+iiYpa/MNJH1gQz0WfZF4Vk1/pumQ=="
},
"troika-worker-utils": {
"version": "0.31.0",
"resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.31.0.tgz",
"integrity": "sha512-WxHhfFmy6dWBMACUnzInBlqlR601Dy3c9hiRp4aAN+ACzSldwsv1SHOqix4X2+6HTz/pBtHtfJVDbwJiO+lbCw=="
},
"tryer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",

2
package.json
View file

@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@react-spring/three": "^9.0.0-rc.3",
"@react-three/drei": "^2.2.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
@ -11,7 +12,6 @@
"@types/node": "^12.12.54",
"@types/react": "^16.9.47",
"@types/react-dom": "^16.9.8",
"drei": "^1.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^4.0.0",

0
public/gate_object_texture.png → public/sprite/gate_object_texture.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

70
src/components/GateScene/GateMiddle.tsx
View file

@ -1,8 +1,10 @@
import React from "react";
import gateText from "../../static/sprite/gate_pass.png";
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
import gateBlueBinarySingularOne from "../../static/sprite/blue_binary_singular_one.png";
import gateBlueBinarySingularZero from "../../static/sprite/blue_binary_singular_zero.png";
import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
import changeSiteEnable from "../../static/sprite/change_site_enable.png";
import gateLeftThing from "../../static/sprite/left_gate_thing.png";
import gateRightThing from "../../static/sprite/right_gate_thing.png";
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
import GateMiddleObject from "./GateMiddleObject";
@ -10,6 +12,17 @@ import GateMiddleObject from "./GateMiddleObject";
const GateMiddle = () => {
const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
const gateAccessPassTexture = useLoader(
THREE.TextureLoader,
gateTextAccessPass
);
const changeSiteEnableTexture = useLoader(
THREE.TextureLoader,
changeSiteEnable
);
const gateLeftThingTexture = useLoader(THREE.TextureLoader, gateLeftThing);
const gateRightThingTexture = useLoader(THREE.TextureLoader, gateRightThing);
return (
<>
@ -31,6 +44,59 @@ const GateMiddle = () => {
/>
</sprite>
<sprite scale={[1.6, 0.1, 1]} position={[0, 0.8, 0.2]} renderOrder={3}>
<spriteMaterial
attach="material"
map={changeSiteEnableTexture}
transparent={true}
depthTest={false}
/>
</sprite>
<sprite scale={[4.2, 0.01, 0]} position={[0, 0.79, 0.07]} renderOrder={3}>
<spriteMaterial
attach="material"
map={gatePassUnderline}
transparent={true}
depthTest={false}
/>
</sprite>
<sprite
scale={[0.7, 0.35, 1]}
position={[-0.8, -0.8, 0.2]}
renderOrder={3}
>
<spriteMaterial
attach="material"
map={gateLeftThingTexture}
transparent={true}
depthTest={false}
/>
</sprite>
<sprite
scale={[0.7, 0.35, 1]}
position={[0.8, -0.8, 0.2]}
renderOrder={3}
>
<spriteMaterial
attach="material"
map={gateRightThingTexture}
transparent={true}
depthTest={false}
/>
</sprite>
<sprite scale={[1.25, 0.31, 1]} position={[0, -0.8, 0.2]} renderOrder={3}>
<spriteMaterial
attach="material"
map={gateAccessPassTexture}
transparent={true}
depthTest={false}
/>
</sprite>
<GateMiddleObject />
</>
);

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

@ -1,61 +1,48 @@
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";
const Mirror = () => {
const tex1 = useLoader(THREE.TextureLoader, mirrorTexture);
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 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 materialRef = useRef<THREE.MeshBasicMaterial>();
useFrame(() => {
if (mirrorRef.current) {
mirrorRef.current.rotation.y += 0.03;
mirrorRef.current.rotation.y -= 0.03;
}
if (materialRef.current) {
texture.offset.x += 0.01;
}
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]}
material={mirrorMaterial}
>
<boxBufferGeometry attach="geometry"></boxBufferGeometry>
</mesh>
</group>
<>
<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" />
<meshBasicMaterial
ref={materialRef}
attach="material"
map={texture}
transparent={true}
depthTest={false}
/>
</mesh>
</group>
</>
);
};

2
src/components/GateScene/GateSide.tsx
View file

@ -2,7 +2,7 @@ import React, { useMemo, useRef } from "react";
import blueBinary from "../../static/sprite/blue_binary.png";
import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
import { OrbitControls } from "drei";
import { OrbitControls } from "@react-three/drei";
const GateSide = () => {
const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);

2
src/scenes/GateScene.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import GateSide from "../components/GateScene/GateSide";
import { OrbitControls } from "drei";
import { OrbitControls } from "@react-three/drei";
import GateMiddle from "../components/GateScene/GateMiddle";
const GateScene = () => {

2
src/scenes/MainScene.tsx
View file

@ -1,5 +1,5 @@
import { a, useSpring } from "@react-spring/three";
import { OrbitControls } from "drei";
import { OrbitControls } from "@react-three/drei";
import React, { Suspense, useEffect } from "react";
import Site from "../components/MainScene/Site";
import Lain from "../components/MainScene/Lain";

2
src/scenes/MediaScene.tsx
View file

@ -7,7 +7,7 @@ import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisua
import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
import Lof from "../components/MediaScene/Lof";
import { OrbitControls } from "drei";
import { OrbitControls } from "@react-three/drei";
import Images from "../components/MediaScene/Images";
const MediaScene = () => {