I'm a sad engineer because all my VR content broke

Questions
6

This community is very helpful in regards to helping you to understand all the concepts, I have learned a lot and received tremendous support from great folks here, I strongly suggest to learn by practicing how this framework is working and if you get stuck post in forums and I assure you will get the best support possible, but if you still wants to skip learning and focus on other field you can always post as a job in Service offers and requests category

I also went ahead and did a quick check on your html, It should be something like below code for webXR, for more please see docs here Introduction to WebXR - Babylon.js Documentation , and, also recently a great article was published Using WebXR With Babylon.js — Smashing Magazine , its source code is available at https://github.com/prestonso/babylon-webxr/blob/main/index.html:

here is a basic idea to get you started.

<!DOCTYPE html>
<html>

<head>
    <title>Heritage Proposal</title>
    <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/libktx.js"></script>
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js?v=3"></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?v=3"></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://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js"
        crossorigin="anonymous"></script>
    <style>
        html,
        body,
        canvas {
            width: 100%;
            height: 50%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1000;
        }

        .purtyButton {
            background-color: #ffffff;
            border: solid;
            color: blue;
            padding: 5px 5px;
            text-align: center;
            display: inline-block;
            font-size: 12px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
    <button class="purtyButton" id="makeABox">Create Box</button>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var sceneToRender;
        var createScene = async function () {
            //return at least an empty scene and default camera
            var scene = new BABYLON.Scene(engine);

            const env = scene.createDefaultEnvironment();

            var FPSCam = new BABYLON.FreeCamera("FPSCam", new BABYLON.Vector3(-0, 62, 0), scene);  //Must remove the max camera to get this to work
            FPSCam.rotation.y = 0.0;
            FPSCam.attachControl(canvas, true);

            // asyncromous call
            BABYLON.SceneLoader.Append("", "heritage.babylon", scene, function () {



                //set up materials
                var chromeMaterial = new BABYLON.StandardMaterial("chrome", scene);
                chromeMaterial.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
                chromeMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1);
                //                chromeMaterial.reflectionTexture = new BABYLON.Texture("CHROMIC.JPG", scene);
                chromeMaterial.reflectionTexture = new BABYLON.Texture("herbalifeBackgroundDark.jpg", scene);
                chromeMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;

                //iterate through the scene and assign a nice shiney material to meshes with a certain exiting material name
                for (var meshIndex = 0; meshIndex < scene.meshes.length; meshIndex++) {
                    if (scene.meshes[meshIndex].material != null) {
                        //console.log(scene.meshes[meshIndex].material.toString());
                        if (scene.meshes[meshIndex].material.toString() == "Name: Metal_Chrome") {
                            scene.meshes[meshIndex].material = chromeMaterial;
                        }
                    }
                }




            });

            const xrHelper = await scene.createDefaultXRExperienceAsync({
                    floorMeshes: [scene.meshes[3]] //CHANGE THIS TO YOUR FLOOR MESH
                });
            if (!xrHelper.baseExperience) {
                // XR support is unavailable.
                alert('WebXR support is unavailable');
            } else {
                return scene;
            }
        };

        var scene = createScene();
        scene.then(function (returnedScene) {
            sceneToRender = returnedScene;
        });





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

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

</html>
2 Likes