Changing Environment File Causing Crash Due to Memory Overflow about drei

[alexkahndev]

import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import { useEnvironment } from "@react-three/drei";

type BackgroundProps = {
	backgroundUrl: string;
};

export const Background = ({ backgroundUrl }: BackgroundProps) => {
	const texture = useEnvironment({
		files: backgroundUrl,
	});

	const { scene } = useThree((state) => ({ scene: state.scene }));

	useEffect(() => {
		const previousTexture = scene.background;

		scene.environment = texture;
		scene.background = texture;

		return () => {
			if (previousTexture) {
				(previousTexture as any).dispose();
			}
		};
	}, [texture, scene]);

	return (
		<>
			<directionalLight
				position={[3.3, 1.0, 4.4]}
				castShadow
				intensity={1}
			/>
		</>
	);
};

Instead of using the Environment component, the useEnvironment hook works in a way for what I needed to dispose of the old texture.

After looking into the code for Environment I saw memoization which I assume was the root of my original issue. What is the reason for the Environment component to have memoization?

[tomires]

I have experienced the same issue as @alexkahndev however as I needed the environment to be ground projected, my solution involved the use of three's GroundedSkybox addon

import { extend, useLoader, useThree } from '@react-three/fiber'
import { TextureLoader } from 'three/src/loaders/TextureLoader'
import { GroundedSkybox } from 'three/examples/jsm/Addons.js'
import { useEffect } from 'react'
import * as THREE from 'three'

extend({ GroundedSkybox })

export default function SceneEnvironment({ 
    texture, 
    envHeight = 2.4,
    envRadius = 7,
    envScale = 100,
    heightOffset = 35
}) {
    const loadedTexture = useLoader(TextureLoader, texture)

    const { scene } = useThree()

    useEffect(() => {
        loadedTexture.mapping = THREE.EquirectangularReflectionMapping
        loadedTexture.colorSpace = THREE.SRGBColorSpace
        scene.environment = loadedTexture
    }, [scene])

    useEffect(() => {
        return () => {
            if (loadedTexture) {
                loadedTexture.dispose()
            }
        }
    })

    return (
        <group scale={ envScale } position-y={ heightOffset }>
            <groundedSkybox
                args={ [loadedTexture, envHeight, envRadius, 40] }
            />  
        </group>
    )
}