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="renderCanvas" touch-action="none" width='500px' height='500px'></canvas>
<canvas id="pixiCanvas" touch-action="none" width='500px' height='500px'></canvas>

CSS

#renderCanvas {
  z-Index: 0;
  position: absolute;
}

#pixiCanvas {
  z-Index: 1;
  position: absolute;
  pointer-events: none;
}

JavaScript

var canvas = document.getElementById("renderCanvas");
var pixiCanvas = document.getElementById("pixiCanvas");

// babylon.js rendering
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
sphere.position.y = 1;
var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

// pixi.js rendering
var pixiApp = new PIXI.Application({
	view: pixiCanvas,
	width: engine.getRenderWidth(),
	height: engine.getRenderHeight(),
  transparent: true
});

// listen on renderCanvas for pointer events
pixiApp.renderer.plugins.interaction.setTargetElement(renderCanvas, pixiApp.renderer.resolution);

var sprite = PIXI.Sprite.from('https://i.imgur.com/1yLS2b8.jpg');
sprite.anchor.set(0.5);
sprite.position.set(canvas.width/2, canvas.height/2);
pixiApp.stage.addChild(sprite);

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