Trouble with loading a "glb model" in three.js

Question

I'm trying to load a model into my scene. Unfortunately so far without success. I see an empty scene, not a model. When I insert a boxgeometry it can also be seen, so three.js works without any problems. I try to load a model from the example files "Stork.glb". I've reduced everything to the bare minimum. I can not see what it could be now. Do I have to integrate the GLTFLoader differently?

index.js

import Main from "./main"; 
new Main();

main.js

import * as THREE from "../lib/three/build/three.module.js";
import { OrbitControls } from '../lib/three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from '../lib/three/examples/jsm/loaders/GLTFLoader.js';



class Main {
    constructor(){
        this.init();
        this.animate(); 
    }
    
    
    init(){
        this.renderer = new THREE.WebGLRenderer( { antialias: true } );
        this.renderer.setPixelRatio( window.devicePixelRatio ); 
        this.renderer.shadowMap.enabled = true; 
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.autoClear = false;
        
        this.container = document.getElementById('container');
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
        this.container.appendChild( this.renderer.domElement );

        this.aspect = this.container.clientWidth / this.container.clientHeight; 
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color( 0x555555 );
        
        this.camera = new THREE.PerspectiveCamera( 45, this.aspect, .1, 10000 );
        this.camera.position.set(0, 0, 300);
    
        this.controls = new OrbitControls( this.camera, this.renderer.domElement );
        this.controls.enableZoom = true;
        this.controls.enabled = true;
        this.controls.target.set(0, 0, 0);
    
    //-------------------------------------------------------------------------------------------------
        
        var light = new THREE.AmbientLight(0xffffff); 
        this.scene.add(light);
        
      
        const loader = new GLTFLoader();
        loader.load("models/Stork.glb", function(gltf){     
            this.scene.add(gltf.scene); 
        });
    
    
    }//end init
    
    
    animate(){
        requestAnimationFrame( this.animate.bind(this) );  
        this.render();
    }//end animate
    
    
    render(){
        
        this.controls.update();
        this.camera.updateMatrixWorld();
        this.camera.updateProjectionMatrix(); 
    
        this.renderer.render(this.scene, this.camera); 
    
    }//end render
    


}//end class


export default Main;

Folder layout:

mainfolder
|
|-index.html
|-webpack.config.js
|-package.json
|-build
|-src
|   |-index.js
|   |-main.js
|
|-lib
|   |-three
|
|-models
    |
  Stork.glb

webpack.config.js

const path = require('path'); 

module.exports = { 
mode: 'development',
//devtool: "none",
//mode: 'production',
entry: './src/index.js', 
output: { 
path: path.resolve(__dirname, 'build'), 
filename: 'bundle.js' },

//plugins: [new HtmlWebpackPlugin()],

    module: {   
        rules: [        
            {   
                test: /\.(glb)$/i, 
                use: [ { loader: 'file-loader', options: { outputPath: 'models/' } } ]
                
            },              
        ],              
    },


};//end module.exports

Answer 1

The problem was that i did not load the code with a localhost. I tryed to open it with a browser. If i use a localhost it works fine 👍

Answer 2

Just a guess, but since you're within a class and using an es5 anonymous function, your this keyword may not be what you think it is. Maybe using the lexical nature of an arrow function will solve your problem?

        loader.load("models/Stork.glb", gltf => {     
            this.scene.add(gltf.scene); 
        });