Babylon JS with WebXR support

This is just a simple Hello World scene that I sometimes use a template for new projects.

Open 3D content in new tab

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Babylon JS: Basic Scene</title>

    <script src="https://preview.babylonjs.com/babylon.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>
    <div>
        <canvas id="renderCanvas"></canvas>
        <script>
        window.addEventListener("DOMContentLoaded", async function() {
            var canvas = document.getElementById("renderCanvas");
            var engine = new BABYLON.Engine(canvas, true);
            var createScene = async function() {
                var scene = new BABYLON.Scene(engine);
                var camera = new BABYLON.FreeCamera(
                    "camera1",
                    new BABYLON.Vector3(0, 5, -10),
                    scene
                );
                camera.attachControl(canvas, true);
                camera.setTarget(BABYLON.Vector3.Zero());
                camera.attachControl(canvas, false);

                var light = new BABYLON.HemisphericLight(
                    "light1",
                    new BABYLON.Vector3(0, 1, 0),
                    scene
                );

                var ground = BABYLON.Mesh.CreateGround("ground1", 20, 20, 2, scene);
                var material = new BABYLON.StandardMaterial(scene);
                material.alpha = 1;
                material.diffuseColor = new BABYLON.Color3.FromHexString("#9ba8b8");
                ground.material = material;

                var cube = BABYLON.MeshBuilder.CreateBox("box", {
                    height: 1,
                    width: 1,
                    depth: 1
                });
                cube.position = new BABYLON.Vector3(0, 1, 0);

                // Add XR support
                var experience = await scene.createDefaultXRExperienceAsync({
                    floorMeshes: [ground]
                });

                return scene;
            };

            // Start the render loop
            var scene = await createScene();
            engine.runRenderLoop(function() {
                scene.render();
            });
            window.addEventListener("resize", function() {
                engine.resize();
            });
        });
        </script>
    </div>
</body>

</html>