JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

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" style="display:none;" touch-action="none" width='500px' height='500px'></canvas>

CSS

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

            #renderCanvas {
                position: absolute;
                left:150px;
                top:100px;
                width: 80%;
                height: 80%;
                touch-action: none;
            }

JavaScript

var canvas = document.getElementById("renderCanvas");
		var pixiCanvas = document.getElementById("pixiCanvas");
    var pixiContext = pixiCanvas.getContext('2d');
    
    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);

    var pixiRenderer = new PIXI.WebGLRenderer({
        context: pixiContext, view: pixiCanvas, width: 500,
        height: 500, clearBeforeRender: false, roundPixels: true, autoStart: false
    });
    const stage = new PIXI.Container();
    const texture = PIXI.Texture.from('https://i.imgur.com/XYtAXP4.png');
    const man = new PIXI.Sprite(texture);
    man.height = 200;man.width = 200;
    man.anchor.set(0.5);
    man.x = 40;man.y = Math.floor(1 / 5) * 40;
    stage.addChild(man);
    stage.x = pixiRenderer.screen.width / 2;
    stage.y = pixiRenderer.screen.height / 2;
    stage.pivot.x = stage.width / 2;
    stage.pivot.y = stage.height / 2;
    var tic = PIXI.ticker.shared;
    tic.add((delta) => {stage.rotation -= 0.01 * delta;});

    /*let canvas_test = document.createElement('canvas');
    var ctx = canvas_test.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);*/

    var plane_test = BABYLON.MeshBuilder.CreatePlane("plane_test", {size: 10});
    var material_test = new BABYLON.StandardMaterial("material_test", scene);
    material_test.diffuseTexture = new BABYLON.HtmlElementTexture("texture_test", pixiRenderer.extract.canvas(), {scene:scene, engine:scene.getEngine()});
    plane_test.position = new...