diff --git a/src/app/tools/tankopedia/[id]/components/SceneProps.tsx b/src/app/tools/tankopedia/[id]/components/SceneProps.tsx index 1866a9973..203d41d05 100644 --- a/src/app/tools/tankopedia/[id]/components/SceneProps.tsx +++ b/src/app/tools/tankopedia/[id]/components/SceneProps.tsx @@ -1,5 +1,7 @@ -import { useLoader } from '@react-three/fiber'; -import { TextureLoader } from 'three'; +import { useFrame, useLoader } from '@react-three/fiber'; +import { clamp } from 'lodash'; +import { useRef } from 'react'; +import { MeshStandardMaterial, TextureLoader } from 'three'; import { useTankopediaPersistent } from '../../../../../stores/tankopedia'; export function SceneProps() { @@ -7,14 +9,22 @@ export function SceneProps() { (state) => state.model.visual.showGrid && !state.model.visual.showEnvironment, ); - const texture = useLoader(TextureLoader, 'https://i.imgur.com/6QjSn1e.png'); + const texture = useLoader(TextureLoader, 'https://i.imgur.com/C28Z8nU.png'); + const material = useRef(null); + + useFrame(({ camera }) => { + if (!material.current) return; + material.current.opacity = clamp(0.1 * camera.position.y, 0, 1); + }); + + texture.anisotropy = 2; if (!show) return null; return ( - + ); }