Three.js Importing gltf without a background

Question

There are 2 example scenes on Three.js (I'm using), that are teaching how to import gltf models.
Both using a RGBELoader function, which does initialize the background.

new RGBELoader()
                .setDataType( THREE.UnsignedByteType )
                .setPath( 'textures/equirectangular/' )
                .load( 'venice_sunset_2k.hdr', function ( texture ) {

                    var cubeGenerator = new EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
                    cubeGenerator.update( renderer );

                    //background = cubeGenerator.renderTarget;

                    var pmremGenerator = new PMREMGenerator( cubeGenerator.renderTarget.texture );
                    pmremGenerator.update( renderer );

                    var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
                    pmremCubeUVPacker.update( renderer );

                    envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;

                    pmremGenerator.dispose();
                    pmremCubeUVPacker.dispose();

I want now to get a empty background (or just a ground or smth) without loading that background.

It works to comment the "background" line in the code to see my object and NOT the background, but it should be unnecessary to load the textures for the background. When I'm commenting/deleting more things my object has no texture.

How can I see the helmet/boombox (example object in the example scene "gltf loader") and get rid of the background? I know that it has something to do with the "envmap"..

Mugen87 Mugen87 · Accepted Answer · 2019-10-02T10:37:41

but it should be unnecessary to load the textures for the background.

The cube texture is also used for the the glTF model's environment map. So if you really want to delete it, you have to remove the following code section in webgl_loader_gltf.

gltf.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
        child.material.envMap = envMap;
    }
} );

However, the helmet will become more or less dark when doing this since the environment map is the only (indirect) light source in the scene. You might want to add an ambient and a directional or point light then.

three.js R109

Three.js Importing gltf without a background

1 Answers