Trouble starting the inspector

Questions
1

Hello everyone. I’m having trouble starting the inspector in my project. I’m getting the following message in the console when calling scene.debugLayer.show()

debugLayer.ts:168 Uncaught TypeError: Cannot read property 'Inspector' of undefined
    at DebugLayer../Debug/debugLayer.ts.DebugLayer._createInspector (debugLayer.ts:168)
    at debugLayer.ts:228
    at HTMLScriptElement.script.onload (tools.ts:1014)

I’m using v4.0.0-beta.3 currently. I must say I’m using requirejs in this project and it’s my first time working with that library. It’s very well possible my difficulties lie with that library, and not with babylon.

My project runs locally, with an internet connection. I think my first question is: how to load the inspector with require? This is how I load the main babylon library:

//The requirejs config
requirejs.config({
    baseUrl: '.',
    paths: {
        babylonjs: 'https://preview.babylonjs.com/babylon.max',
        pep: 'https://code.jquery.com/pep/0.4.3/pep'
    },
    shim : {
        babylonjs: {deps: ['pep']}
    }
});

//The main entrypoint to my app
require([
    'babylonjs',
], function(
    BABYLON,
){
    //start app here
})

I’ve tried several ways to add the inspector library to the require.config and the main entrypoint to my app but I haven’t been successful.

2

Hey! you also need to require the inspector itself as well from https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js

3

Hi @Deltakosh, thanks for the response. I’ve tried the following:

//The requirejs config
requirejs.config({
    baseUrl: '.',
    paths: {
        babylonjs: 'https://preview.babylonjs.com/babylon.max',
        inspector: 'https://preview.babylonjs.com/inspector/babylon.inspector.bundle',
        pep: 'https://code.jquery.com/pep/0.4.3/pep'
    },
    shim : {
        babylonjs: {deps: ['pep']}
    }
});

//The main entrypoint to my app
require([
    'babylonjs',
    'inspector'
], function(
    BJS,
    BJSINSPECTOR
){
    var canvas = document.getElementById("bjscanvas"); // Get the canvas element 
    var engine = new BJS.Engine(canvas, true); // Generate the BABYLON 3D engine
    var scene = new BJS.Scene(engine);
    scene.debugLayer.show();
})

This gives me the error from the first post. Perhaps I’m missing more dependencies? Or am I requiring the wrong way?

4

This will require the super powers of @sebavan

5

Actually in require the name you provide should match the defined module name, and all the dependencies need to be present. You can do:

//The requirejs config
        requirejs.config({
            baseUrl: '.',
            paths: {
                babylonjs: 'https://preview.babylonjs.com/babylon.max',
                
                'babylonjs-gui': 'https://preview.babylonjs.com/gui/babylon.gui',
                'babylonjs-loaders': 'https://preview.babylonjs.com/loaders/babylonjs.loaders',
                'babylonjs-serializers': 'https://preview.babylonjs.com/serializers/babylonjs.serializers',

                'babylonjs-inspector': 'https://preview.babylonjs.com/inspector/babylon.inspector.bundle',
                pep: 'https://code.jquery.com/pep/0.4.3/pep'
            },
            shim : {
                babylonjs: {deps: ['pep']}
            }
        });

        //The main entrypoint to my app
        require([
            'babylonjs',
            'babylonjs-inspector'
        ], function(
            BJS,
            BJSINSPECTOR
        ){
            var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
            var engine = new BJS.Engine(canvas, true); // Generate the BABYLON 3D engine
            var scene = new BJS.Scene(engine);
            scene.debugLayer.show();
        })
1 Like
6

This will declare the missing dependencies and declare the AMD modules with their given names.

7

Thanks @sebavan, this solved my issue. Having the inspector around will greatly speed up my process of setting up materials and the environment. It’s really great!

1 Like