JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://pixijs.download/v4.8.2/pixi.min.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<canvas id="renderCanvas" touch-action="none" width='500px' height='300px'></canvas>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>

CSS

html, body{
  background-color: black
}
#renderCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    outline: none; 
    border: none;
}

JavaScript

var canvas = document.getElementById("renderCanvas");
canvas.width = window.innerWidth
console.log(window)
// 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;
 
BABYLON.SceneLoader.ImportMesh("", "https://rawcdn.githack.com/waverider404/game-assets/master/player/player1/", "scene.gltf", scene, function (meshes) {  
        meshes[0].scaling.scaleInPlace(.01)
       // meshes[0].position.y -= 20
}); 

// pixi.js rendering
var pixiRenderer = new PIXI.WebGLRenderer({
	context: engine._gl,
	view: engine.getRenderingCanvas(),
	width: engine.getRenderWidth(),
	height: engine.getRenderHeight(),
  backgroundColor: 0x2B233A,
	//clearBeforeRender: false,
	roundPixels: true,
  autoStart: false
});
var stage = new PIXI.Container();
var sprite = PIXI.Sprite.from('https://cdn.glitch.global/b6638abd-afc2-4530-bc1b-8edf2eccdaad/room2.jpg?v=1643075574406');
sprite.anchor.set(0.5);
sprite.scale.set(.5)
sprite.position.set(canvas.width/2, canvas.height/2);
stage.addChild(sprite);

/* var blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 1
sprite.filters = [blurFilter] */
           
let stats = new Stats();
 document.body.appendChild( stats.dom );

// Render Loop
engine.runRenderLoop(function () {
  pixiRenderer.reset();
  pixiRenderer.render(stage);

  scene.autoClear = false;
  scene.render();
  engine.wipeCaches(true);
  stats.update()
});