mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
new model for gray ring, fixed lighting
This commit is contained in:
parent
5164323aac
commit
acc36a826e
10 changed files with 55 additions and 26 deletions
Binary file not shown.
|
@ -10,13 +10,15 @@ type GrayRingProps = {
|
||||||
|
|
||||||
type GLTFResult = GLTF & {
|
type GLTFResult = GLTF & {
|
||||||
nodes: {
|
nodes: {
|
||||||
Circle: THREE.Mesh;
|
LainRing: THREE.Mesh;
|
||||||
|
};
|
||||||
|
materials: {
|
||||||
|
RingTexture: THREE.MeshStandardMaterial;
|
||||||
};
|
};
|
||||||
materials: {};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const GrayRing = memo((props: GrayRingProps) => {
|
const GrayRing = memo((props: GrayRingProps) => {
|
||||||
const { nodes } = useLoader<GLTFResult>(
|
const { nodes, materials } = useLoader<GLTFResult>(
|
||||||
GLTFLoader,
|
GLTFLoader,
|
||||||
"/models/ring0.glb",
|
"/models/ring0.glb",
|
||||||
draco("/draco-gltf/")
|
draco("/draco-gltf/")
|
||||||
|
@ -27,15 +29,13 @@ const GrayRing = memo((props: GrayRingProps) => {
|
||||||
<group
|
<group
|
||||||
scale={[1.3, 1.3, 1.3]}
|
scale={[1.3, 1.3, 1.3]}
|
||||||
position={[0, props.grayRingPosY, 0]}
|
position={[0, props.grayRingPosY, 0]}
|
||||||
rotation={[0, 0.26, 0]}
|
rotation={[0, 2.6, 0]}
|
||||||
>
|
>
|
||||||
<mesh geometry={nodes.Circle.geometry} rotation={[0, Math.PI / 4, 0]}>
|
<mesh
|
||||||
<meshLambertMaterial
|
geometry={nodes.LainRing.geometry}
|
||||||
attach="material"
|
rotation={[0, Math.PI / 4, 0]}
|
||||||
color={0x636363}
|
material={materials.RingTexture}
|
||||||
side={THREE.DoubleSide}
|
></mesh>
|
||||||
/>
|
|
||||||
</mesh>
|
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -176,7 +176,10 @@ const InputHandler = () => {
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case "left":
|
case "left":
|
||||||
rotateCamera(0.15);
|
setTimeout(() => {
|
||||||
|
rotateCamera(0.45);
|
||||||
|
}, 1100);
|
||||||
|
|
||||||
setLainMoveState(<LainMoveLeft />);
|
setLainMoveState(<LainMoveLeft />);
|
||||||
break;
|
break;
|
||||||
case "up":
|
case "up":
|
||||||
|
|
|
@ -105,7 +105,7 @@ const LevelSprite = memo((props: LevelSpriteConstructorProps) => {
|
||||||
transparent={true}
|
transparent={true}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<meshStandardMaterial
|
<meshBasicMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={nonActiveTexture}
|
map={nonActiveTexture}
|
||||||
side={THREE.DoubleSide}
|
side={THREE.DoubleSide}
|
||||||
|
|
|
@ -3,10 +3,9 @@ import React, { memo } from "react";
|
||||||
const Lights = memo(() => {
|
const Lights = memo(() => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ambientLight color={0x808080} intensity={1.0} />
|
<ambientLight color={0x808080} intensity={1} />
|
||||||
<pointLight color={0xffffff} position={[0, 0, 700]} intensity={0.5} />
|
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={3} />
|
||||||
<pointLight color={0x7f7f7f} position={[0, 1000, 0]} intensity={1} />
|
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={3} />
|
||||||
<pointLight color={0xffffff} position={[0, 0, 0]} intensity={0.1} />
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -49,8 +49,8 @@ const MainScene = () => {
|
||||||
|
|
||||||
// set lain intro spritesheet before the page loads fully
|
// set lain intro spritesheet before the page loads fully
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLainMoving(true);
|
// setLainMoving(true);
|
||||||
setLainMoveState(<LainIntro />);
|
// setLainMoveState(<LainIntro />);
|
||||||
}, [setLainMoveState, setLainMoving]);
|
}, [setLainMoveState, setLainMoving]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import React, { memo, 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 { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||||
import middleRingTexture from "../../static/sprites/middle_ring_tex.png";
|
import middleRingTexture from "../../static/sprites/middle_ring_tex.png";
|
||||||
|
|
||||||
import { draco } from "drei";
|
import { draco } from "drei";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useSpring, a } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import {
|
import {
|
||||||
middleRingNoiseAtom,
|
middleRingNoiseAtom,
|
||||||
middleRingPosYAtom,
|
middleRingPosYAtom,
|
||||||
|
@ -184,7 +184,7 @@ const MiddleRing = () => {
|
||||||
|
|
||||||
// compute world position of the vertex
|
// compute world position of the vertex
|
||||||
// (ie, position after model rotation and translation)
|
// (ie, position after model rotation and translation)
|
||||||
vec4 worldPos = modelMatrix * vec4(position, 0.0f);
|
vec4 worldPos = modelMatrix * vec4(position, 0.0);
|
||||||
float wobbleAngle = atan(worldPos.x, worldPos.z) + angleOffset;
|
float wobbleAngle = atan(worldPos.x, worldPos.z) + angleOffset;
|
||||||
|
|
||||||
vec3 pos = position;
|
vec3 pos = position;
|
||||||
|
@ -193,7 +193,7 @@ const MiddleRing = () => {
|
||||||
float noiseFreq = 0.5;
|
float noiseFreq = 0.5;
|
||||||
|
|
||||||
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
|
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
|
||||||
pos.y += snoise(noisePos) * noiseAmp + wobbleStrength * sin(wobbleAngle * 2.0f);
|
pos.y += snoise(noisePos) * noiseAmp + wobbleStrength * sin(wobbleAngle * 2.0);
|
||||||
|
|
||||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
|
||||||
}
|
}
|
||||||
|
@ -206,7 +206,7 @@ const MiddleRing = () => {
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
gl_FragColor = texture2D(tex, vUv);
|
gl_FragColor = texture2D(tex, vUv);
|
||||||
gl_FragColor.a = 0.5;
|
gl_FragColor.a = 0.4;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -35,9 +35,9 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
||||||
ref={purpleRingRef}
|
ref={purpleRingRef}
|
||||||
>
|
>
|
||||||
<mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}>
|
<mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}>
|
||||||
<meshLambertMaterial
|
<meshStandardMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
color={0x8b6ff7}
|
color={0x281f47}
|
||||||
side={THREE.DoubleSide}
|
side={THREE.DoubleSide}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
|
@ -24,6 +24,12 @@
|
||||||
"right": "041"
|
"right": "041"
|
||||||
},
|
},
|
||||||
"0506": {
|
"0506": {
|
||||||
|
"up": "0413",
|
||||||
|
"down": "+0422",
|
||||||
|
"left": "+0515",
|
||||||
|
"right": "0513"
|
||||||
|
},
|
||||||
|
"0515": {
|
||||||
"up": "0413",
|
"up": "0413",
|
||||||
"down": "+0422",
|
"down": "+0422",
|
||||||
"left": "0405",
|
"left": "0405",
|
||||||
|
|
|
@ -98,5 +98,26 @@
|
||||||
"type": "normal",
|
"type": "normal",
|
||||||
"initial_position": [1.48, -0.12, -8.6]
|
"initial_position": [1.48, -0.12, -8.6]
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"15": {
|
||||||
|
"long": {
|
||||||
|
"position": [-0.43, -0.32, -8.6],
|
||||||
|
"scale": [1, 0.03, 1],
|
||||||
|
"type": "normal",
|
||||||
|
"initial_position": [-1.45, -0.3, -8.6]
|
||||||
|
},
|
||||||
|
"boring": {
|
||||||
|
"position": [0.51, -0.3, -8.6],
|
||||||
|
"scale": [1, 0.03, 1],
|
||||||
|
"type": "normal",
|
||||||
|
"initial_position": [1.48, -0.3, -8.6]
|
||||||
|
},
|
||||||
|
"big": {
|
||||||
|
"position": [0.3, -0.28, -8.6],
|
||||||
|
"scale": [0.5, 0.06, 1],
|
||||||
|
"type": "normal",
|
||||||
|
"initial_position": [1.48, -0.12, -8.6]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue