Gltf model not visible after page reload

Questions
1

I’ve create animation with custom gltf model. It works fine, however sometimes after page refresh can’t see anything. Models are loaded correctly (on load method is fired), animation loop is running, however can’t see anything. My code:

    const size = this.getSize();
    const renderer = new THREE.WebGLRenderer({ alpha: true, antialiase: true });
    renderer.setSize(size.width, size.height);
    document.getElementById("ThreeJS-" + this.props.side).appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, size.width / size.height, 0.1, 1000);
    camera.position.z = 25;
    camera.position.y = 15;
    camera.position.x = 10;

    const hemiLight = new THREE.HemisphereLight(0xffefef, 0xffefef, 1.5);
    scene.add(hemiLight);

    const light = new THREE.SpotLight(0xffefef,1.5);
    light.position.set(-50,50,50);
    light.castShadow = true;
    light.shadow.bias = -0.0001;
    light.shadow.mapSize.width = 1024*4;
    light.shadow.mapSize.height = 1024*4;
    scene.add( light );

    window.addEventListener("resize", function() {
        let width = size.width;
        let height = size.height;
        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    });

    const loader = new GLTFLoader();
    let model;
    loader.load(
        "/dice.gltf", function(gltf) {
            gltf.scene.traverse( child => {
                if ( child.material ) child.material.metalness = 0;
            } );
            model = gltf.scene;
            model.scale.set(.002,.002,.002);
            model.position.x = 10;
            model.position.z = 5.5;
            model.position.y = 40;

            scene.add(model);
            console.log(gltf);
    });

    const animate = () => {
        requestAnimationFrame( animate );
        if (model) {
            const rand = Math.random();
            model.rotation.z += (rand * 0.02);
            model.rotation.y += (rand * 0.015);
            model.rotation.x += (rand * 0.01);

            model.position.y -= (rand * 0.1);
            if (model.position.y < -10) {
                model.position.y = 40;
            }
            light.position.set(
                camera.position.x + 10,
                camera.position.y + 10,
                camera.position.z + 10,
            );
        }
        renderer.render( scene, camera );
    };

    animate();

Everything works ok until page reload. Also when I disable cache in browser can’t see similar problems. I think it’s is somehow connected with textures in gltf model, on previous model (simple white cube without any textures) everything was working fine. Also this problems happens only in production build (I’m using next js). In development mode everything is working fine.

Do you have any ideas how to fix it? :slight_smile: I would be very grateful for your help!