Blank white screen in Three.js following the rendering of numerous objects

Question

Blank white screen in Three.js following the rendering of numerous objects

I have a situation where I am loading over 4350 3D objects from JSON files in my game.

    for (var y in game.fields) {
        for (var x in game.fields[y]) {
            switch (game.fields[y][x]) {
                case 'm':
                    Three.loadMountain(x, y)
                    break
                case 'h':
                    Three.loadHill(x, y)
                    break
            }
        }
    }

As these objects start appearing on the screen, everything suddenly turns white. I'm puzzled by this issue as there are no error messages in the console. My browser is Chromium. How can I troubleshoot this problem?

Functions:

this.loadMountain = function (x, y) {
    loader.load('/models/mountain.json', getGeomHandler('#808080', x * 4 - 216, y * 4 - 311, 1));
}
this.loadHill = function (x, y) {
    loader.load('/models/hill.json', getGeomHandler('#008000', x * 4 - 216, y * 4 - 311, 1));
}

javascript three.js chromium

Answer 1

Answer №1

SOLUTION: To avoid performance issues, refrain from using loader.load inside a loop. Instead, place the meshes in the scene within a callback function.

EXAMPLE:

loader.load('/models/forest.json', function(geometry){
    var material = new THREE.MeshLambertMaterial({color: '#404040'})
    for (var y in game.map) {
        for (var x in game.map[y]) {
            switch (game.map[y][x]) {
                case 'f':
                    var mesh = new THREE.Mesh(geometry, material);
                    mesh.position.set(x, 0, y);
                    scene.add(mesh);
                 break
            }
        }
    }
});

Answer 2

SOLUTION: To avoid performance issues, refrain from using loader.load inside a loop. Instead, place the meshes in the scene within a callback function.

EXAMPLE:

loader.load('/models/forest.json', function(geometry){
    var material = new THREE.MeshLambertMaterial({color: '#404040'})
    for (var y in game.map) {
        for (var x in game.map[y]) {
            switch (game.map[y][x]) {
                case 'f':
                    var mesh = new THREE.Mesh(geometry, material);
                    mesh.position.set(x, 0, y);
                    scene.add(mesh);
                 break
            }
        }
    }
});

Blank white screen in Three.js following the rendering of numerous objects

Answer №1

Similar questions

Javascript and iframes may encounter compatibility issues with browsers other than Internet Explorer

Implementing subscriber addition on Mailchimp 3.0 using Node.js and HTTPS

Interactive calendar feature with a popup that appears when hovering over an event

Guide to transferring a PHP variable from a loop and converting it into a JavaScript variable

"Stay current with real-time updates in seconds using React technology

Order objects in a JavaScript array

Using a .NET Web-API controller variable as a parameter in a JavaScript function

Javascript Flickering Effect in HTML5

Extracting Values from a jQuery Array Object

Set up npm and package at the main directory of a web application

Is there a way to asynchronously load multiple textures in three.js using a callback function?

Refresh the page and navigate to the last active tab using PHP and jQuery jTable

The selected checkbox value does not take effect when used within an ng-if statement

The power of selenium meets the functionality of Javascript with the webdriver

Leveraging JavaScript to extract data from a dropdown menu and apply it to a different section

Preventing template rendering in Angular until an event is triggered - but how?

PHP does not receive the uploaded image

What is the syntax for accessing a dictionary item within a <span> tag using JavaScript?

Utilize store functions (such as dispatch and getState) in external modules like webSockets, rather than within components

Styling the scrollbar for the PDF element on an HTML page