JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.4.1/babylon.max.js"></script>
<canvas id="renderCanvas"></canvas>

CSS

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
  }

JavaScript

function createScene() {
    var scene = new BABYLON.Scene(engine);

    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 50, 50), scene);
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);

    camera.attachControl(canvas, true)

    var material1 = new BABYLON.StandardMaterial('', scene)
    material1.diffuseColor = new BABYLON.Color3(1, 1, 0)

    for (var i = -10; i <= 10; i++) {
        for (var j = -10; j <= 10; j++) {
            var box = BABYLON.Mesh.CreateBox("Box", 1.0, scene)
            box.material = material1
            box.position = new BABYLON.Vector3(i * 10, -10, j * 10)
        }
    }

    var ground = BABYLON.Mesh.CreateGround('', 100, 100, 4, scene)
    ground.position.y = -11
    ground.material = new BABYLON.StandardMaterial('', scene)
    ground.material.diffuseColor = new BABYLON.Color3(0, 0.5, 0)

    scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR
    scene.fogColor = scene.clearColor.clone()
    scene.fogStart = 50
    scene.fogEnd = 60

    return scene
}


// Get the canvas element from our HTML above
var canvas = document.getElementById("renderCanvas");

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

var scene = createScene();
// 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();
});