3d model not loading

Questions
1

Hi all,

I’m new to Bablyon.js and I’m trying to locally host and test but it is not working for me. I either get a white background or the bablyonjs loading screen. I’ve installed bablyonjs via npm and I’m using a windows machine. I downloaded this complete scene:

I changed the 3d model to include a converted animated glb file that I tested in the playground. I have the file sitting within the “scenes/glb/” folder. The file is called “Breathing.glb”. Can someone assist me in figuring out where I went wrong? I just want to show my own 3d model. Thanks!

Here is the exact code:

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

    <!-- Babylon.js -->
    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <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/gltf_validator.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/inspector/babylon.inspector.bundle.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>

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

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
var canvas = document.getElementById("renderCanvas"); 
    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
    
        //Adding a light
        var light = new BABYLON.HemisphericLight();
    
        //Adding an Arc Rotate Camera
        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, false);
    
        // The first parameter can be used to specify which mesh to import. Here we import all meshes
        BABYLON.SceneLoader.Append("\scenes\glb\", "Breathing.glb", scene, function (newMeshes) {
            scene.activeCamera = null;
            scene.createDefaultCameraOrLight(true);
            scene.activeCamera.attachControl(canvas, false);
        });
    
        return scene;
    }

scene = createScene();

    engine.runRenderLoop(function () {
        if (scene) {
            scene.render();
        }
    });

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

Hello! This should work as long as you host your page into a local webserver

Is that the case?