JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://pixijs.download/v4.8.2/pixi.min.js"></script>
<canvas id="canvas3d" width='1920px' height='960px'></canvas>
<canvas id="canvas2d" width='1920px' height='960px' style="display: none"></canvas>

JavaScript

var canvas2d = document.getElementById("canvas2d");
var canvas3d = document.getElementById("canvas3d");
var context2d = canvas2d.getContext('2d');

var engine = new BABYLON.Engine(canvas3d, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 12, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas3d, true);

var canvas2dTexture = new BABYLON.HtmlElementTexture("Canvas2DTexture", canvas2d, { scene: scene, engine: engine });

var dome = new BABYLON.PhotoDome(
      "Dome",
      canvas2d.toDataURL('image/jpeg'), {
        resolution: 32,
        size: 300,
        useDirectMapping: true
      },
      scene
    );

engine.runRenderLoop(function() {
  scene.render();
  engine.wipeCaches(true);
});

addImage("https://i.ibb.co/8g2Q11F/0.jpg", 0, 0);
addImage("https://i.ibb.co/pJp0br1/1.jpg", 640, 0);
addImage("https://i.ibb.co/xFkxWgQ/2.jpg", 1280, 0);
addImage("https://i.ibb.co/MStPC6D/3.jpg", 0, 320);
addImage("https://i.ibb.co/QXgsvZB/4.jpg", 640, 320);
addImage("https://i.ibb.co/wyzvLFY/5.jpg", 1280, 320);
addImage("https://i.ibb.co/PM0gSSP/6.jpg", 0, 640);
addImage("https://i.ibb.co/ZmK7Yzn/7.jpg", 640, 640);
addImage("https://i.ibb.co/Gp4Zy30/8.jpg", 1280, 640);

function addImage(link, x, y) {
  var image = new Image();
  image.src = link;
  image.crossOrigin = '*'
  image.onload = () => {
    context2d.drawImage(image, x, y);
		canvas2dTexture.update();
  }
}