Uncaught ReferenceError: BABYLON is not defined

Questions
1

My viewer worked fine a minute ago and now I get a “Uncaught ReferenceError: BABYLON is not defined”

I know what this means, but what is going on exactly? Is the cdn not loading correctly?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

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

        <meta http-equiv="Access-Control-Allow-Origin" content="*">

        <title>Babylon Template</title>

        <style>

            html, body {

                overflow: hidden;

                width: 100%;

                height: 100%;

                margin: 0;

                padding: 0;

            }

            #renderCanvas {

                width: 100%;

                height: 100%;

                touch-action: none;

            }

        </style>

        <script src="https://preview.babylonjs.com/babylon.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="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script> --}}

    </head>

   <body>

    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->

    <script>

        var vehicle = {!! json_encode($vehicle->toArray(), JSON_HEX_TAG) !!};

        var path = {!! json_encode($path, JSON_HEX_TAG) !!};

        var file = {!! json_encode($file, JSON_HEX_TAG) !!};

        var viewerPath = {!! json_encode($viewerPath, JSON_HEX_TAG) !!};

        //console.log(vehicle);

        //console.log("PATH" + path);

        //console.log("FILE" + file);

        //console.log("VIEWER PATH" + viewerPath)

        var canvas = document.getElementById("renderCanvas"); // Get the canvas element

        var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        engine.enableOfflineSupport = false;

        /******* Add the create scene function ******/

        var createScene = function () {

            var scene = new BABYLON.Scene(engine);

            scene.clearColor = new BABYLON.Color3.Black;

            //var material = new BABYLON.StandardMaterial("kosh", scene);

            //Adding a light

            //var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 10), scene);

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);

            //Adding an Arc Rotate Camera

            var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, -Math.PI / 2, 50, BABYLON.Vector3.Zero(), scene);

            camera.lowerRadiusLimit = 22;

            camera.upperRadiusLimit = camera.lowerRadiusLimit * 4;

            camera.attachControl(canvas, true);

            BABYLON.SceneLoader.OnPluginActivatedObservable.add(function (loader) {

                if (loader.name === "gltf") {

                    loader.animationStartMode = BABYLON.GLTFLoaderAnimationStartMode.ALL;

                }

            });

            

            //Skybox example from https://www.babylonjs-playground.com/#TC4DI8#0

            var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);

            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);

            skyboxMaterial.backFaceCulling = false;

            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(viewerPath + "/TropicalSunnyDay", scene);

            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);

            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

            skyboxMaterial.disableLighting = true;

            skybox.material = skyboxMaterial;

            BABYLON.SceneLoader.LoadAssetContainer(path, file, scene, function (container) {

                var meshes = container.meshes;

                var materials = container.materials;

                

                scene.createDefaultEnvironment();

                scene.createDefaultSkybox();

                camera.target = meshes[0];

                // Adds all elements to the scene

                container.addAllToScene();                

            });        

            return scene;

        }

        /******* End of the create scene function ******/

        var scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene

        engine.runRenderLoop(function () {

                scene.render();

        });

        // Watch for browser/canvas resize events

        window.addEventListener("resize", function () {

                engine.resize();

        });       

    </script>

   </body>

</html>
2

I don’t get it, I checked all the links and they work fine…

EDIT - Huh, now it does work in Chrome but Firefox stopped working at giving this error?

Lol okay… for some reason my extensions (privacy badger etc.) suddenly decided to go ahead and block everything for some reason, makes absolutely no sense to me but alright.

3

You can share a reproduction, maybe we will find something.

There might have been a temporary issue with the CDN? does it work now?

4

Yeah it’s working now for some reason I think my extensions suddenly decided to black everything.