3D Objects won't render all of a sudden Are loaders not working?

So the other day my 3D objects (glb) were rendering just fine and today I open my project and I get this.

Is there something I’m missing?

Below is my code:

/// <reference path='babylon.d.ts' />

// get our canvas
const canvas = document.getElementById('renderCanvas');

//  create a BabylonJS engine
const engine = new BABYLON.Engine(canvas, true);

// create a scene
function createScene() {
    const scene = new BABYLON.Scene(engine);

    // create a light
    const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0,1,0), scene);

    var earth = BABYLON.SceneLoader.Append("./", "earth.glb", scene, function(scene) {
        console.log("Appending to the scene")
        // scene.createDefaultCameraOrLight(true, true, true);

        //change background color    
    var helper = scene.createDefaultEnvironment();

    var rainbow = BABYLON.SceneLoader.Append("./", "rainbow.glb", scene, function(scene) {
        console.log("Appending Rainbow to the scene")
        // scene.createDefaultCameraOrLight(true, true, true);


        // create a camera
        const camera = new BABYLON.ArcRotateCamera('camera', 
        5.0, earth.position, scene);

        camera.attachControl(canvas, true);

        camera.setPosition(new BABYLON.Vector3(0,0,4.5))

    return scene;

// create our scene
const scene = createScene();

engine.runRenderLoop(()=> {

We haven’t changed anything for babylon 4.2.X, so I wonder what happened here.

What loaders are you loading in your code? Can you share your HTML file as well? or a reproduction of the issue so we can track the issue?

Just wanted to add that the first error is also rather odd - are you trying to open the inspector or use the debug layer somewhere in your code?

Thanks for your response, the screenshot is from the inspector in chrome. My HTML code is below:

<!DOCTYPE html>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/babylon.js"></script>
        <script src="js/babylon.glTFFileLoader.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
        <script src="js/main.js" type="module"></script>
            canvas {
                width: 100%;
                height: 100%;

            html, body {
            padding: 0;
            margin: 0;

        <canvas id="renderCanvas">   

I’m a newbie so it could be something totally basic. :sweat_smile:

oh, problem found :slight_smile:

If you use the cdn version of babylon, you will need to use the cdn version of the loaders. if you use the preview version of babylon, you will need to use the preview version of the loaders.

It seems like you are loading both -

        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

Which won’t work and will deliver unexpected results. Chose one over the other (if you use 4.2.1 - continue using the CDN vertsion and remove the preview). Then the loaders will load correctly.

****EDIT - one thing I didn’t write but should have - make sure to also only use one version of babylon (and not both).


Ah, gotcha. I’ll make these changes and report back with the result. :hand_with_index_finger_and_thumb_crossed: Thanks!

@RaananW This was indeed the issue! Thanks again!

1 Like