JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
   <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
        
         <button type="button" onclick='addSphere()' id='addSphereBtn' class='btn'>Add Sphere</button> 
         <button type="button" onclick='deleteSphere()' id='deleteSphereBtn' class='btn'>Delete Sphere</button> 
         <div id='babylonFPS'>
         BABYLON FPS: 
         </div>
         <div id='workerFPS'>
         WORKER FPS: 
         </div>
    </div>
    
    <script>
    var scene;
    var addSphere;
    var deleteSphere;
    
    </script>
    
    <script id="js-worker">
    importScripts('https://preview.babylonjs.com/cannon.js');
    
    var world;
    var spheres = [];
    var sphereArrays = [];
    var fpsSharedArray, lastLoop;
		onmessage = function(m) {
    
    
		if(!world){
    	world = new CANNON.World();
    	world.gravity = new CANNON.Vec3(0,-10,0);
    	world.broadphase = new CANNON.SAPBroadphase(world);
      
      var groundShape = new CANNON.Plane();
			var groundBody = new CANNON.Body({ mass: 0, shape: groundShape });
			world.add(groundBody);
    	groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2);


		loop();
    }
        
    
    
    	if(m.data.m == "mess"){
      	var sharedArray = new Float32Array(m.data.e);
    		var mass = 5, radius = 1;
				var sphereShape = new CANNON.Sphere(radius);
				var sphereBody = new CANNON.Body({mass: mass, shape: sphereShape}); // Step 2
				sphereBody.position.set(Math.random()*20,Math.random()*20,Math.random()*20);
				world.add(sphereBody);
    		spheres.push(sphereBody);
    
      	sphereArrays.push(sharedArray);
		
    	
      }
      
      if(m.data.m == "del"){
      	
        world.remove(spheres[0]);
        spheres.splice(0,1);
        sphereArrays.splice(0,1);
				array = null;
    	
      }
      
      
      
      if(m.data.m == "fpsInit"){
     ...

CSS

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

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
                position:absolute;
            }
            
            #babylonFPS {
                top:0;
                right:0;
                position:absolute;
                color:white;
                background:blue;
            }
            
            #workerFPS {
                top:0;
                left:0;
                position:absolute;
                color:white;
                background:green;
            }
            
            #addSphereBtn {
              position:absolute;
              top:80%;
              left:40%;
              
            }
            
            #deleteSphereBtn {
              position:absolute;
              top:80%;
              left:60%;
              
            }
            
            .btn {
              color:white;
              background:rgba(100,200,150,1);
              height:10%;
              border:5px solid rgba(150,100,250,0.4);
            }

JavaScript

var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        
        var worker, workerFPSSharedArray, workerFPSSharedBuffer;
        var sphereMaster;
        
        var sphereArrays = [];
        var spheres = [];
				
        
        
        addSphere = function(i){
    					var sphere = sphereMaster.createInstance("sphere"+i);
               
              spheres.push(sphere);
              var sharedBuffer = new SharedArrayBuffer(Float32Array.BYTES_PER_ELEMENT * 7);
              var sharedArray = new Float32Array(sharedBuffer);
              for (var i = 0; i < 7; i++){
      					sharedArray[i] = 0;
      				}; 
							sphereArrays.push(sharedArray);
              
              var object = {e:sharedBuffer, m:"mess"};
              
							worker.postMessage(object);

			
    };
    
    
    	deleteSphere = function(i){
    					
              spheres[0].dispose();
              spheres.splice(0,1);
              sphereArrays.splice(0,1);
              
              
              var object = {m:"del"};
							worker.postMessage(object);

			
    };
    
        var createScene = function () {
        
            var scene = new BABYLON.Scene(engine);
        
            var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 15, -30), scene);
            
            sphereMaster = BABYLON.Mesh.CreateSphere("sphere", 4, 2, scene);
            sphereMaster.rotationQuaternion = new BABYLON.Quaternion();
            
            createWorker();
        
            camera.setTarget(new BABYLON.Vector3(7,10,0));
        
            camera.attachControl(canvas, true);
        
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        
            light.intensity = 0.7;
            
            var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
        
        	  workerFPSSharedArray
            
             ...