new model for gray ring, fixed lighting

src/components/GrayRing.tsx

@@ -10,13 +10,15 @@ type GrayRingProps = {
 
 type GLTFResult = GLTF & {
   nodes: {
-    Circle: THREE.Mesh;
+    LainRing: THREE.Mesh;
+  };
+  materials: {
+    RingTexture: THREE.MeshStandardMaterial;
   };
-  materials: {};
 };
 
 const GrayRing = memo((props: GrayRingProps) => {
-  const { nodes } = useLoader<GLTFResult>(
+  const { nodes, materials } = useLoader<GLTFResult>(
     GLTFLoader,
     "/models/ring0.glb",
     draco("/draco-gltf/")
@@ -27,15 +29,13 @@ const GrayRing = memo((props: GrayRingProps) => {
     <group
       scale={[1.3, 1.3, 1.3]}
       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>
   );
 });

src/components/InputHandler.tsx

@@ -176,7 +176,10 @@ const InputHandler = () => {
 
           break;
         case "left":
-          rotateCamera(0.15);
+          setTimeout(() => {
+            rotateCamera(0.45);
+          }, 1100);
+
           setLainMoveState(<LainMoveLeft />);
           break;
         case "up":

src/components/LevelSprite/LevelSprite.tsx

@@ -105,7 +105,7 @@ const LevelSprite = memo((props: LevelSpriteConstructorProps) => {
           transparent={true}
         />
       ) : (
-        <meshStandardMaterial
+        <meshBasicMaterial
           attach="material"
           map={nonActiveTexture}
           side={THREE.DoubleSide}

src/components/Lights.tsx

@@ -3,10 +3,9 @@ import React, { memo } from "react";
 const Lights = memo(() => {
   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} />
     </>
   );
 });

src/components/MainScene/MainScene.tsx

@@ -49,8 +49,8 @@ const MainScene = () => {
 
   // set lain intro spritesheet before the page loads fully
   useEffect(() => {
-    setLainMoving(true);
+    // setLainMoving(true);
-    setLainMoveState(<LainIntro />);
+    // setLainMoveState(<LainIntro />);
   }, [setLainMoveState, setLainMoving]);
 
   return (

src/components/MiddleRing/MiddleRing.tsx

@@ -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 { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import middleRingTexture from "../../static/sprites/middle_ring_tex.png";
 
 import { draco } from "drei";
 import * as THREE from "three";
-import { useSpring, a } from "@react-spring/three";
+import { a, useSpring } from "@react-spring/three";
 import {
   middleRingNoiseAtom,
   middleRingPosYAtom,
@@ -184,7 +184,7 @@ const MiddleRing = () => {
       
       // compute world position of the vertex
       // (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;
       
       vec3 pos = position;
@@ -193,7 +193,7 @@ const MiddleRing = () => {
       float noiseFreq = 0.5;
       
       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.);
     }
@@ -206,7 +206,7 @@ const MiddleRing = () => {
 
     void main() {
         gl_FragColor = texture2D(tex, vUv);
-        gl_FragColor.a = 0.5;
+        gl_FragColor.a = 0.4;
     }
   `;
 

src/components/PurpleRing.tsx

@@ -35,9 +35,9 @@ const PurpleRing = memo((props: PurpleRingProps) => {
       ref={purpleRingRef}
     >
       <mesh geometry={nodes.Circle002.geometry} rotation={[0, Math.PI / 4, 0]}>
-        <meshLambertMaterial
+        <meshStandardMaterial
           attach="material"
-          color={0x8b6ff7}
+          color={0x281f47}
           side={THREE.DoubleSide}
         />
       </mesh>

src/resources/level_sprite_directions.json

@@ -24,6 +24,12 @@
     "right": "041"
   },
   "0506": {
+    "up": "0413",
+    "down": "+0422",
+    "left": "+0515",
+    "right": "0513"
+  },
+  "0515": {
     "up": "0413",
     "down": "+0422",
     "left": "0405",

src/resources/level_sprite_huds.json

@@ -98,5 +98,26 @@
       "type": "normal",
       "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]
+    }
   }
+
 }