JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p2.js/0.7.1/p2.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
 <canvas id="renderCanvas" touch-action="none"></canvas> 
<canvas width="600" height="400" id="myCanvas"></canvas>

CSS

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

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

JavaScript

var canvas, ctx, w, h, zoom=50, jumpSpeed=6, walkSpeed=2, timeStep=1/60, maxSubSteps=10,
          world, characterBody, planeBody, platforms=[], platformMeshes = [], boxes=[], boxMeshes = [], greenMaterial, redMaterial;
          
var characterMesh;          

      var buttons = {
        space : false,
        left :  false,
        right : false,
      }

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

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


            /******* Add the create scene function ******/
            var createScene = function () {

                        // Create the scene space
                        var scene = new BABYLON.Scene(engine);

                        // Add a camera to the scene and attach it to the canvas
                        var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 6, BABYLON.Vector3.Zero(), scene);
                       
                        // Add lights to the scene
                        var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
                    
                        // Add and manipulate meshes in the scene
                        characterMesh = BABYLON.MeshBuilder.CreateBox("character", 1, scene);
                        characterMesh.scaling.copyFromFloats(0.5,1.1,0.5);
											
                      	redMaterial = new BABYLON.StandardMaterial("RedMaterial", scene);
                        redMaterial.emissiveColor = new BABYLON.Color3(0.4,0.0,0.0);
                        redMaterial.diffuseColor = new BABYLON.Color3(1,0.0,0.0);
                        
                        greenMaterial = new BABYLON.StandardMaterial("GreenMaterial", scene);
                        greenMaterial.emissiveColor = new BABYLON.Color3(0.0,0.4,0.0);
                        greenMaterial.diffuseColor = new BABYLON.Color3(0.0,0.4,0.0);
               ...