diff --git a/packages/website/src/components/HelpingSpotLight.tsx b/packages/website/src/components/HelpingSpotLight.tsx index 5250fa197..85e16a212 100644 --- a/packages/website/src/components/HelpingSpotLight.tsx +++ b/packages/website/src/components/HelpingSpotLight.tsx @@ -1,3 +1,5 @@ +import { Box, Text } from "@radix-ui/themes"; +import { Html } from "@react-three/drei"; import { memo, type ComponentProps } from "react"; interface Props extends ComponentProps<"spotLight"> { @@ -8,10 +10,20 @@ export const HelpingSpotLight = memo(({ debug, ...props }) => { return ( <> {debug && ( - - - - + + + + + + + + + + {props.intensity} @ {JSON.stringify(props.userData)} + + + + )} diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/InitialFogReveal.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/InitialFogReveal.tsx deleted file mode 100644 index dd479b85a..000000000 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/InitialFogReveal.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { invalidate, useThree } from "@react-three/fiber"; -import { useEffect } from "react"; -import type { Fog } from "three"; -import { fogAnimationTime, fogFar0, fogFar1, forNear0, forNear1 } from ".."; -import { Tankopedia } from "../../../../../../stores/tankopedia"; - -export function InitialFogReveal() { - const fog = useThree((state) => state.scene.fog as Fog | null); - - useEffect(() => { - Tankopedia.mutate((draft) => { - draft.revealed = true; - }); - - if (!fog) return; - - const t0 = Date.now(); - - const interval = setInterval(() => { - const t = (Date.now() - t0) / 1000; - const x = t / fogAnimationTime; - const near = forNear1 + (forNear0 - forNear1) * x; - const far = fogFar1 + (fogFar0 - fogFar1) * x; - - fog.near = near; - fog.far = far; - invalidate(); - - if (x >= 1) { - fog.near = forNear0; - fog.far = fogFar0; - clearInterval(interval); - } - }, 1000 / 60); - - return () => clearInterval(interval); - }, []); - - return null; -} diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx index 659c07b4d..f3dd5af96 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx @@ -1,82 +1,34 @@ -import { useHelper } from "@react-three/drei"; -import { useFrame } from "@react-three/fiber"; -import { times } from "lodash-es"; -import { useRef, useState } from "react"; -import { Color, SpotLight, SpotLightHelper } from "three"; -import { degToRad } from "three/src/math/MathUtils.js"; -import { isHalloween } from "../../../../../../core/blitzkit/isHalloween"; import { HelpingSpotLight } from "../../../../../HelpingSpotLight"; -const LIGHTS_COUNT = 5; -const LIGHT_DISTANCE = 13; -const LIGHT_HEIGHT_0 = 4; -const LIGHT_HEIGHT_1 = 2; -const INTENSITY = 50; - -const N = 128; -const TARGET_FRAME_RATE = 30; - export function Lighting() { - const [cast, setCast] = useState(true); - - const t0 = useRef(0); - const topLight = useRef(null!); - const frontLight = useRef(null!); - - useHelper(topLight, SpotLightHelper, "red"); - useHelper(frontLight, SpotLightHelper, "green"); - - const last = useRef(0); - const samples = useRef([]); - - useFrame(({ clock, frameloop }) => { - if (frameloop === "never") { - t0.current = clock.elapsedTime; - samples.current = []; - return; - } - if (!cast || clock.elapsedTime - t0.current < TARGET_FRAME_RATE * N) { - return; - } - - const dt = clock.elapsedTime - last.current; - last.current = clock.elapsedTime; - - const fps = 1 / dt; - samples.current.push(fps); - - if (samples.current.length > N) samples.current.shift(); - - const avg = - samples.current.reduce((a, b) => a + b, 0) / samples.current.length; - - if (avg < TARGET_FRAME_RATE) setCast(false); - }); - return ( <> - {times(LIGHTS_COUNT, (index) => { - const x = index / (LIGHTS_COUNT - 1); - 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, - LIGHT_DISTANCE * Math.cos(theta), - ] as const; - const color = new Color(); + - return ( - - ); - })} + + + ); } diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx index 51944da18..be871c5ef 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx @@ -4,7 +4,7 @@ import { Quicklime, type QuicklimeEvent } from "quicklime"; import { useEffect, useRef } from "react"; import { Mesh, MeshStandardMaterial } from "three"; -const SIZE = 2 ** 5; +const SIZE = 2 ** 6; export const screenshotReadyEvent = new Quicklime(false); @@ -14,7 +14,7 @@ export function SceneProps() { useFrame(({ camera }) => { if (!material.current) return; - material.current.opacity = clamp(0.5 * camera.position.y, 0, 0.25); + material.current.opacity = clamp(0.5 * camera.position.y, 0, 0.5); }); useEffect(() => { @@ -44,7 +44,7 @@ export function SceneProps() { ref={material} color="black" roughness={1} - metalness={1} + metalness={0} /> ); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx index b01d3c1bb..ae835715b 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx @@ -1,5 +1,4 @@ import { BLITZKIT_TANK_ICON_SIZE } from "@blitzkit/core"; -import { invalidate } from "@react-three/fiber"; import { forwardRef, Suspense, @@ -29,7 +28,6 @@ import { SmartCanvas } from "../../../../SmartCanvas"; import { AutoClear } from "./components/AutoClear"; import { Controls } from "./components/Control"; import { InitialAligner } from "./components/InitialAligner"; -import { InitialFogReveal } from "./components/InitialFogReveal"; import { Lighting } from "./components/Lighting"; import { SceneProps } from "./components/SceneProps"; import { TankModel } from "./components/TankModel"; @@ -40,15 +38,8 @@ interface TankSandboxProps { naked?: boolean; } -export const forNear0 = 30; -export const fogFar0 = 50; -export const forNear1 = 0; -export const fogFar1 = 0; -export const fogAnimationTime = 2.5; - export const TankSandbox = forwardRef( ({ thicknessRange, naked }, ref) => { - const fog = useRef(new Fog("black", forNear1, fogFar1)); const canvas = useRef(null); const hasImprovedVerticalStabilizer = useEquipment(122); const hasDownImprovedVerticalStabilizer = useEquipment(124); @@ -64,34 +55,6 @@ export const TankSandbox = forwardRef( (state) => state.hideTankModelUnderArmor ); - useEffect(() => { - if (rawDisplay === display) return; - - const t0 = Date.now(); - const interval = setInterval(() => { - const t = (Date.now() - t0) / 1000; - const x = t / fogAnimationTime; - const y = Math.sin(Math.PI * x); - - const near = forNear0 + (forNear1 - forNear0) * y; - const far = fogFar0 + (fogFar1 - fogFar0) * y; - - fog.current.near = near; - fog.current.far = far; - - invalidate(); - - if (rawDisplay !== display && x >= 0.5) setDisplay(rawDisplay); - if (x >= 1) { - fog.current.near = forNear0; - fog.current.far = fogFar0; - clearInterval(interval); - } - }, 1000 / 60); - - return () => clearInterval(interval); - }, [rawDisplay]); - useImperativeHandle(ref, () => canvas.current!, []); function handlePointerDown() { @@ -191,7 +154,7 @@ export const TankSandbox = forwardRef( return ( ( {/* Controls within Suspense to allow for frame-perfect start of camera auto-rotate */} - {display === TankopediaDisplay.DynamicArmor && } {display === TankopediaDisplay.StaticArmor && (