feat: more progress

packages/website/src/components/HelpingSpotLight.tsx

@@ -1,10 +1,10 @@
-import type { PointLightProps } from '@react-three/fiber';
+import type { SpotLightProps } from '@react-three/fiber';
 
-interface Props extends PointLightProps {
+interface Props extends SpotLightProps {
   debug?: boolean;
 }
 
-export function HelpingPointLight({ debug, ...props }: Props) {
+export function HelpingSpotLight({ debug, ...props }: Props) {
   return (
     <>
       {debug && (

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx

@@ -7,11 +7,10 @@ import { Tracker } from './components/Tracker';
 export function Title() {
   const { unwrap } = useLocale();
   const protagonist = Duel.use((state) => state.protagonist.tank);
-  const disturbed = TankopediaEphemeral.use((state) => state.disturbed);
   const revealed = TankopediaEphemeral.use((state) => state.revealed);
   const name = unwrap(protagonist.name);
   const fontSize = revealed
-    ? disturbed
+    ? revealed
       ? '2rem'
       : `min(16vh, ${125 / name.length}vw)`
     : `min(12vh, ${75 / name.length}vw)`;
@@ -23,19 +22,19 @@ export function Title() {
         event.preventDefault();
 
         mutateTankopediaEphemeral((draft) => {
-          draft.disturbed = true;
+          draft.revealed = true;
         });
       }}
       direction="column"
       position="absolute"
       align="center"
       justify="center"
-      top={disturbed ? '6rem' : '50%'}
+      top={revealed ? '6rem' : '50%'}
       left="50%"
       width="100%"
-      height={disturbed ? fontSize : '100%'}
+      height={revealed ? fontSize : '100%'}
       style={{
-        pointerEvents: disturbed ? 'none' : undefined,
+        pointerEvents: revealed ? 'none' : undefined,
         transitionDuration: '1s',
         transform: 'translate(-50%, -50%)',
       }}
@@ -47,10 +46,10 @@ export function Title() {
           pointerEvents: 'none',
           fontSize,
           whiteSpace: 'nowrap',
-          opacity: disturbed ? 1 : 0.5,
-          letterSpacing: disturbed || !revealed ? 0 : '-0.03em',
+          opacity: revealed ? 1 : 0.5,
+          letterSpacing: revealed || !revealed ? 0 : '-0.03em',
           transition: `
-            letter-spacing 1.5s ${disturbed ? '' : 'cubic-bezier(0.81, -2, 0.68, 1)'},
+            letter-spacing 1.5s ${revealed ? '' : 'cubic-bezier(0.81, -2, 0.68, 1)'},
             font-size 1s,
             -webkit-text-stroke 2s,
             opacity 1s

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx

@@ -2,13 +2,14 @@ import { useHelper } from '@react-three/drei';
 import { times } from 'lodash-es';
 import { useRef } from 'react';
 import { SpotLight, SpotLightHelper } from 'three';
-import { HelpingPointLight } from '../../../../../../HelpingPointLight';
+import { degToRad } from 'three/src/math/MathUtils.js';
+import { HelpingSpotLight } from '../../../../../../HelpingSpotLight';
 
 const LIGHTS_COUNT = 5;
-const LIGHT_DISTANCE = 8;
+const LIGHT_DISTANCE = 13;
 const LIGHT_HEIGHT_0 = 4;
 const LIGHT_HEIGHT_1 = 2;
-const INTENSITY = 500;
+const INTENSITY = 30;
 
 export function Lighting() {
   const topLight = useRef<SpotLight>(null!);
@@ -21,7 +22,7 @@ export function Lighting() {
     <>
       {times(LIGHTS_COUNT, (index) => {
         const x = index / (LIGHTS_COUNT - 1);
-        const theta = 2 * Math.PI * (index / LIGHTS_COUNT) - (7 / 8) * Math.PI;
+        const theta = 2 * Math.PI * (index / LIGHTS_COUNT) - degToRad(152);
         const position = [
           LIGHT_DISTANCE * Math.sin(theta),
           LIGHT_HEIGHT_0 * (1 - x) + LIGHT_HEIGHT_1 * x,
@@ -29,10 +30,12 @@ export function Lighting() {
         ] as const;
 
         return (
-          <HelpingPointLight
+          <HelpingSpotLight
             position={position}
-            intensity={INTENSITY / LIGHTS_COUNT}
+            intensity={INTENSITY}
+            penumbra={1}
             castShadow
+            decay={1}
           />
         );
       })}

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx

@@ -19,8 +19,9 @@ export function SceneProps() {
       <meshStandardMaterial
         transparent
         ref={material}
-        color={[0, 0, 0]}
+        color="black"
         roughness={1}
+        metalness={1}
       />
     </mesh>
   );