diff --git a/.storybook/public/gainmap/potsdamer_platz_1k.jpg b/.storybook/public/gainmap/potsdamer_platz_1k.jpg new file mode 100644 index 000000000..543ea2e37 Binary files /dev/null and b/.storybook/public/gainmap/potsdamer_platz_1k.jpg differ diff --git a/.storybook/stories/Environment.stories.tsx b/.storybook/stories/Environment.stories.tsx index 1ce3e359d..e65389eba 100644 --- a/.storybook/stories/Environment.stories.tsx +++ b/.storybook/stories/Environment.stories.tsx @@ -116,3 +116,33 @@ export const EnvironmentSt3 = { }, name: 'Ground', } satisfies Story + +function EnvironmentScene4(props: ComponentProps) { + return ( + <> + + + + + + + + ) +} + +export const EnvironmentSt4 = { + render: (args) => , + args: { + files: ['/gainmap/potsdamer_platz_1k.jpg'], + background: true, + }, + argTypes: { + preset: { + options: presets, + control: { + type: 'select', + }, + }, + }, + name: 'Gainmap', +} satisfies Story diff --git a/src/core/useEnvironment.tsx b/src/core/useEnvironment.tsx index 037b8ac80..54bc34eb5 100644 --- a/src/core/useEnvironment.tsx +++ b/src/core/useEnvironment.tsx @@ -11,6 +11,7 @@ import { RGBELoader, EXRLoader } from 'three-stdlib' import { GainMapLoader, HDRJPGLoader } from '@monogrid/gainmap-js' import { presetsObj, PresetsType } from '../helpers/environment-assets' import { LinearEncoding, sRGBEncoding, TextureEncoding } from '../helpers/deprecated' +import { useLayoutEffect } from 'react' const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/' const isArray = (arr: any): arr is string[] => Array.isArray(arr) @@ -32,7 +33,6 @@ export function useEnvironment({ }: Partial = {}) { let loader: typeof Loader | null = null let multiFile: boolean = false - let extension: string | false | undefined if (preset) { if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', ')) @@ -46,7 +46,7 @@ export function useEnvironment({ // Everything else multiFile = isArray(files) - extension = isCubemap + const extension: string | false | undefined = isCubemap ? 'cube' : isGainmap ? 'webp' @@ -73,6 +73,19 @@ export function useEnvironment({ if (!loader) throw new Error('useEnvironment: Unrecognized file extension: ' + files) const gl = useThree((state) => state.gl) + + useLayoutEffect(() => { + // Only required for gainmap + if (extension !== 'webp' && extension !== 'jpg' && extension !== 'jpeg') return + + function clearGainmapTexture() { + // @ts-expect-error + useLoader.clear(loader, multiFile ? [files] : files) + } + + gl.domElement.addEventListener('webglcontextlost', clearGainmapTexture, { once: true }) + }, [files, gl.domElement]) + const loaderResult: Texture | Texture[] = useLoader( // @ts-expect-error loader,