Keep background image quality

hi every one,
i have this code

scene = new THREE.Scene();

        const texture = new THREE.TextureLoader()
            .setPath('./files/models/')
            .load('lr2.jpg', function (texture) {
                console.log(texture);
                var envMap = pmremGenerator.fromEquirectangular(texture).texture;

                scene.background = envMap;
                scene.environment = envMap;

                var roughnessMipmapper = new RoughnessMipmapper(renderer);

                var loader = new GLTFLoader().setPath('./files/models/ravioli/');
                loader.load('scene.gltf', function (gltf) {

                    gltf.scene.traverse(function (child) {

                        if (child.isMesh) {

                            roughnessMipmapper.generateMipmaps(child.material);

                        }

                    });

                    scene.add(gltf.scene);

                    roughnessMipmapper.dispose();

                    render();

                });

            });
        texture.minFilter = THREE.LinearFilter;
        texture.encoding = THREE.sRGBEncoding;


        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor( 0xffffff, 0);

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 0.8;
        renderer.outputEncoding = THREE.sRGBEncoding;
        container.appendChild(renderer.domElement);

but after run , i see awful quality for background image, how can i fix that?
sorry for my poor english language.

1 Like

i figured it up
justi change

scene.background = envMap;

with

let options = {
                generateMipmaps: true,
                minFilter: THREE.LinearMipmapLinearFilter,
                magFilter: THREE.LinearFilter
            };
            scene.background = new THREE.WebGLCubeRenderTarget(1200, options).fromEquirectangularTexture(renderer, texture);

Sidenote: In latest version, there is no need to work with PMREMGenerator anymore. RoughnessMipmapper has also be removed. Something like this should be sufficient:

new RGBELoader()
	.setPath( 'textures/equirectangular/' )
	.load( 'royal_esplanade_1k.hdr', function ( texture ) {

		texture.mapping = THREE.EquirectangularReflectionMapping;

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

		const loader = new GLTFLoader().setPath( './files/models/ravioli/' );
		loader.load( 'scene.gltf', function ( gltf ) {

			scene.add( gltf.scene );

			render();

		} );

} );