Running demo on chrome locally

Questions
1

I’ve downloaded the basic example file which loads in a .gltf model file.

However the error message I get on google chrome when running locally is:

> You are using an unsupported command-line flag: --extensions-on-chrome-urls. Stability and security will suffer.

Then nothing loads.

Here’s the code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>

        <!-- Babylon.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");

        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        var delayCreateScene = function () {
            // Create a scene.
            var scene = new BABYLON.Scene(engine);
        
            // Create a default skybox with an environment.
            var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
            var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);
        
            // Append glTF model to scene.
            BABYLON.SceneLoader.Append("scenes/", "Alien.gltf", scene, function (scene) {
                // Create a default arc rotate camera and light.
                scene.createDefaultCameraOrLight(true, true, true);
        
                // The default camera looks at the back of the asset.
                // Rotate the camera by 180 degrees to the front of the asset.
                scene.activeCamera.alpha += Math.PI;
            });
        
            return scene;
        };
                window.initFunction = async function() {
                    
                    
                    var asyncEngineCreation = async function() {
                        try {
                        return createDefaultEngine();
                        } catch(e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();
                        }
                    }

                    window.engine = await asyncEngineCreation();
        if (!engine) throw 'engine should not be null.';
        window.scene = delayCreateScene();};
        initFunction().then(() => {sceneToRender = scene        
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

many thanks,
Matt

2

Are you serving your files using a local web server?

3

I just saved the files to a folder and then opened the html file in chrome.

4

that won’t work, as you will need to serve the file to your scene. You can either use the file:// protocol (i.e. change the URL of the loaded gltf to file:// instead of the default http://) or start a local web server (which would be my recommendation). My recommendation is always npm’s http-server (which can open a temporary web server on any directory on your drive):

5

so I’ve amended the code to this:

     BABYLON.SceneLoader.ImportMesh("", "https://github.com/BabylonJS/Babylon.js/tree/master/Playground/scenes/Alien/", "Alien.gltf", scene, function (meshes) {

so it’s linking to the url for the model… could this work? I still have the same issue.

thanks,
Matt

6

This is your chrome execution line’s doing. You should check the command line being used to run chrome and remove the flag (unless you need this flag turned on)

As to the model loading process - yes, this should work even without serving the file locally.

1 Like
7

thanks for your help… just to be 100 percent clear, this path is correct?

“Assets/meshes/BoomBox at master · BabylonJS/Assets · GitHub”, “BoomBox.gltf”

8

the boombox asset’s URL is:

https://assets.babylonjs.com/meshes/BoomBox/BoomBox.gltf