mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added more sprites to the scene, still working on mirror object
This commit is contained in:
parent
aab249bce8
commit
c698b097b8
9 changed files with 142 additions and 97 deletions
86
package-lock.json
generated
86
package-lock.json
generated
|
@ -2255,6 +2255,45 @@
|
||||||
"@react-spring/shared": "9.0.0-rc.3"
|
"@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": {
|
"@rollup/plugin-node-resolve": {
|
||||||
"version": "7.1.3",
|
"version": "7.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
|
||||||
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
|
"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": {
|
"duplexer": {
|
||||||
"version": "0.1.2",
|
"version": "0.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
|
||||||
"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
|
"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": {
|
"raf": {
|
||||||
"version": "3.4.1",
|
"version": "3.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
|
||||||
|
@ -16535,25 +16546,6 @@
|
||||||
"punycode": "^2.1.1"
|
"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": {
|
"tryer": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@react-spring/three": "^9.0.0-rc.3",
|
"@react-spring/three": "^9.0.0-rc.3",
|
||||||
|
"@react-three/drei": "^2.2.3",
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.5.0",
|
"@testing-library/react": "^9.5.0",
|
||||||
"@testing-library/user-event": "^7.2.1",
|
"@testing-library/user-event": "^7.2.1",
|
||||||
|
@ -11,7 +12,6 @@
|
||||||
"@types/node": "^12.12.54",
|
"@types/node": "^12.12.54",
|
||||||
"@types/react": "^16.9.47",
|
"@types/react": "^16.9.47",
|
||||||
"@types/react-dom": "^16.9.8",
|
"@types/react-dom": "^16.9.8",
|
||||||
"drei": "^1.3.0",
|
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-scripts": "^4.0.0",
|
"react-scripts": "^4.0.0",
|
||||||
|
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
@ -1,8 +1,10 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import gateText from "../../static/sprite/gate_pass.png";
|
import gateText from "../../static/sprite/gate_pass.png";
|
||||||
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
|
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
|
||||||
import gateBlueBinarySingularOne from "../../static/sprite/blue_binary_singular_one.png";
|
import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
|
||||||
import gateBlueBinarySingularZero from "../../static/sprite/blue_binary_singular_zero.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 { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import GateMiddleObject from "./GateMiddleObject";
|
import GateMiddleObject from "./GateMiddleObject";
|
||||||
|
@ -10,6 +12,17 @@ import GateMiddleObject from "./GateMiddleObject";
|
||||||
const GateMiddle = () => {
|
const GateMiddle = () => {
|
||||||
const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
|
const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
|
||||||
const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -31,6 +44,59 @@ const GateMiddle = () => {
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</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 />
|
<GateMiddleObject />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,61 +1,48 @@
|
||||||
import React, { useMemo, useRef } from "react";
|
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";
|
||||||
|
|
||||||
const Mirror = () => {
|
const Mirror = () => {
|
||||||
|
const tex1 = useLoader(THREE.TextureLoader, mirrorTexture);
|
||||||
|
|
||||||
const cubeTexture = useLoader(
|
const texture = useMemo(() => {
|
||||||
// @ts-ignore
|
let repeatX, repeatY;
|
||||||
THREE.CubeTextureLoader,
|
tex1.wrapS = THREE.RepeatWrapping;
|
||||||
[
|
tex1.wrapT = THREE.RepeatWrapping;
|
||||||
"gate_object_texture_2.png",
|
repeatX = 88 / 256;
|
||||||
"gate_object_texture_2.png",
|
repeatY = 1;
|
||||||
"gate_object_texture_2.png",
|
tex1.repeat.set(repeatX, repeatY);
|
||||||
"gate_object_texture_2.png",
|
return tex1;
|
||||||
"gate_object_texture_2.png",
|
}, [tex1]);
|
||||||
"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 materialRef = useRef<THREE.MeshBasicMaterial>();
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (mirrorRef.current) {
|
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 (
|
return (
|
||||||
|
<>
|
||||||
<group ref={mirrorRef} position={[-0.1, -0.2, -0.2]}>
|
<group ref={mirrorRef} position={[-0.1, -0.2, -0.2]}>
|
||||||
<mesh
|
<mesh renderOrder={4} position={[0.2, 0.2, 0.2]} scale={[0.4, 1, 0.05]}>
|
||||||
renderOrder={4}
|
<boxBufferGeometry attach="geometry" />
|
||||||
position={[0.2, 0.2, 0.2]}
|
<meshBasicMaterial
|
||||||
scale={[0.4, 1, 0.05]}
|
ref={materialRef}
|
||||||
material={mirrorMaterial}
|
attach="material"
|
||||||
>
|
map={texture}
|
||||||
<boxBufferGeometry attach="geometry"></boxBufferGeometry>
|
transparent={true}
|
||||||
|
depthTest={false}
|
||||||
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</group>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React, { useMemo, useRef } from "react";
|
||||||
import blueBinary from "../../static/sprite/blue_binary.png";
|
import blueBinary from "../../static/sprite/blue_binary.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";
|
||||||
import { OrbitControls } from "drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
|
|
||||||
const GateSide = () => {
|
const GateSide = () => {
|
||||||
const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);
|
const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import GateSide from "../components/GateScene/GateSide";
|
import GateSide from "../components/GateScene/GateSide";
|
||||||
import { OrbitControls } from "drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
import GateMiddle from "../components/GateScene/GateMiddle";
|
import GateMiddle from "../components/GateScene/GateMiddle";
|
||||||
|
|
||||||
const GateScene = () => {
|
const GateScene = () => {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { OrbitControls } from "drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
import React, { Suspense, useEffect } from "react";
|
import React, { Suspense, useEffect } from "react";
|
||||||
import Site from "../components/MainScene/Site";
|
import Site from "../components/MainScene/Site";
|
||||||
import Lain from "../components/MainScene/Lain";
|
import Lain from "../components/MainScene/Lain";
|
||||||
|
|
|
@ -7,7 +7,7 @@ import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisua
|
||||||
import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
|
import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
|
||||||
import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
||||||
import Lof from "../components/MediaScene/Lof";
|
import Lof from "../components/MediaScene/Lof";
|
||||||
import { OrbitControls } from "drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
import Images from "../components/MediaScene/Images";
|
import Images from "../components/MediaScene/Images";
|
||||||
|
|
||||||
const MediaScene = () => {
|
const MediaScene = () => {
|
||||||
|
|
Loading…
Reference in a new issue