How do I access material of glb/gltf after loading

Questions
, , , ,
1

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
init();

function init(){

    scene = new THREE.Scene();
        const loaderBG = new THREE.TextureLoader();
        const texture = loaderBG.load(
            'approaching_storm_8k.png',
          () => {
            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);
    camera.position.set(0,5,10);
    renderer = new THREE.WebGLRenderer({ antialias: true , physicallyCorrectLights: true});
    renderer.setSize( window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    const controls = new OrbitControls( camera, renderer.domElement );
    controls.target.set(0,0,0);
    controls.update();

//Lights    

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



//GLTFLoader

    const loader = new GLTFLoader();
    loader.load(
    '/cenery.glb',
    ( 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 / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            console.log( 'An error happened' );
        });

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

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

function resize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    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.

2

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.

3

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)

4

https://media.giphy.com/media/QAhUQshhNXafGfFJQ7/giphy.gif

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) ?

5

@mjurczyk
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