Preloading environment map HDR?

[azohc]

I am looking for a way to preload an HDR. This is my starting point:

import { Environment } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useEffect } from 'react';

export const BackgroundedEnvironment = () => {
  const { gl } = useThree();

  useEffect(() => {
    gl.toneMappingExposure = 0.5;
  }, [gl]);

  return <Environment files={'/textures/nebula2.hdr'} background />;
};

I haven't found a way to pass a texture (which I suppose I could preload) into the Environment component without it losing the environment map quality, i.e. it looks like a flat image that doesn't wrap around the scene with the following approach:

  const tex = useLoader(RGBELoader, '/textures/nebula2.hdr');
  return <Environment map={tex} background />;

Any pointers would be highly appreciated, thanks in advance.

[JohansenV]

I am looking for a way to preload an HDR. This is my starting point:

import { Environment } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useEffect } from 'react';

export const BackgroundedEnvironment = () => {
  const { gl } = useThree();

  useEffect(() => {
    gl.toneMappingExposure = 0.5;
  }, [gl]);

  return <Environment files={'/textures/nebula2.hdr'} background />;
};

I haven't found a way to pass a texture (which I suppose I could preload) into the Environment component without it losing the environment map quality, i.e. it looks like a flat image that doesn't wrap around the scene with the following approach:

  const tex = useLoader(RGBELoader, '/textures/nebula2.hdr');
  return <Environment map={tex} background />;

Any pointers would be highly appreciated, thanks in advance.

Don't know if you have figured it out yet, but the component from react-three/drei may be the thing you're looking for. You're code would look something like:

import { Environment, Preload } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useEffect } from 'react';

export const BackgroundedEnvironment = () => {
const { gl } = useThree();

useEffect(() => {
gl.toneMappingExposure = 0.5;
}, [gl]);

return (
<>
<Preload all>
<Environment files={'/textures/nebula2.hdr'} background />
</Preload>
</>
);
};

Don't take my word for it though, pretty new to the 3D world myself, but just a thought.

[Forgere]

You can add multiple environments and implement your display logic by controlling the environmentIntensity.