How do I access material of glb/gltf after loading

Hey there, total noob here,
I have a fullytextured glb/gltf-file that I whish would be “lit*” by the envMap (*so it reflects the map on its surface).
I was researching the whole day now but I just dont seem to find any code snippet so I can understand how I can access the material-properties of the gltf-file, so I can tell it to take my envMap (here ‘BG’) …?
Also my shadows dont seem to work despite the edit here. ( Yes I also tried to test shadows, and since that doesnt work as well there must be a problem with how this is set up.)
How can I access the material-properties of GLTF-File properly?

Here’s my Code:

var scene, camera, renderer, pergolino, BG

function init(){

    scene = new THREE.Scene();
        const loaderBG = new THREE.TextureLoader();
        const texture = loaderBG.load(
          () => {
            BG = new THREE.WebGLCubeRenderTarget(texture.image.height);
            BG.fromEquirectangularTexture(renderer, texture);
            scene.background = BG;

    camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({ antialias: true , physicallyCorrectLights: true});
    renderer.setSize( window.innerWidth, window.innerHeight);
    const controls = new OrbitControls( camera, renderer.domElement );,0,0);


    const ambient = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
    const light = new THREE.DirectionalLight(0xFFFFFF, 1);
    light.position.set( 1, 10, 6);


    const loader = new GLTFLoader();
    ( cenery ) => {

cenery.scene.traverse( function(node) {

         if (node.isMesh){node.castShadow = true; node.envMap = BG}


            scene.add( cenery.scene );
            cenery.animations; // Array<THREE.AnimationClip>
            cenery.scene; // THREE.Group
            cenery.scenes; // Array<THREE.Group>
            cenery.cameras; // Array<THREE.Camera>
            cenery.asset; // Object
        function ( xhr ) {
            console.log( ( xhr.loaded / * 100 ) + '% loaded' );
        function ( error ) {
            console.log( 'An error happened' );

     window.addEventListener( 'resize', resize, false);

function update(){
    requestAnimationFrame( update);
    renderer.render(scene, camera);

function resize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    renderer.setSize( window.innerWidth, window.innerHeight );

I’m not fluent in JavaScript so please, If some kind stranger could provide a clear example of code so I can understand and learn, I would be very glad…

EDIT: 1. I changed “S-Scenery” to “cenery” because @mjurczyk mentioned this could be the problem. (sidenote: I didnt work with the name “S-Scenery” - I just shortened the name here for this post.)
2. I added a traverse function into callback that I thought should do what my question was, but it didnt.
3. to reinstate the problem, I added that I can’t get shadows to work also.

Each submesh of the gltf model has a separate material (or a reference to a shared one) - you must use Object3D.traverse to iterate through the children and then you can access the material for each one.

I tried adding this into the Callback-function :

S-Scenery.scene.traverse( function(node) {

             if (node.isMesh){node.castShadow = true; node.envMap = BG}


it didn’t even work with the shadows… (I tested it with several additional objects which can recieve shadows)

I don’t think that’s a legal name. Fyi. Like. It is probably not. Just letting you know as a sign of good will.

What is the type of BG ? What is shown in the console when you do console.log(BG) ?

I really apprechiate the effort, but I originally didnt work with that name at all, I just shortened it for this post here. Maybe you can have another look at the edited question…? thanks.

Oh yes and BG’s type is: WebGLCubeRenderTarget