JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<footer><div id=version></div></footer>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<canvas id="renderCanvas" touch-action="none" width='500px' height='500px'></canvas>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 5px;
  top: 605px;
}
#gui { 
position: relative; 
top: 200px
}

#renderCanvas{
  position: absolute
}

JavaScript

'use strict'

let stats = new Stats()
document.body.appendChild( stats.dom );

let canvas = document.getElementById("renderCanvas")


class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() {
        this.load.plugin('rexkawaseblurpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexkawaseblurpipelineplugin.min.js', true);      
      
        this.load.image('classroom', 'https://cdn.glitch.global/b6638abd-afc2-4530-bc1b-8edf2eccdaad/dvwmw1mwesk01.png?v=1643068714359');
    }

    create() {
        var gameObject = this.add.image(250, 250, 'classroom');
        gameObject.scale = .5

        var postFxPlugin = this.plugins.get('rexkawaseblurpipelineplugin');
        var postFxPipeline = postFxPlugin.add(this.cameras.main, {
            blur: 0.5,
            quality: 10
        });
      
        var gui = new dat.GUI();
        gui.domElement.id = "gui"
        gui.add(postFxPipeline, 'blur', 0, 30);
        gui.add(postFxPipeline, 'pixelWidth', 0, 600);
        gui.add(postFxPipeline, 'pixelHeight', 0, 800);
        
    }

    update() {
      stats.update()
    }
}

var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 0, 0, 0);

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)
}); 

engine.runRenderLoop(function () {
  scene.autoClear = false;
  scene.render();
  engine.wipeCaches(true);

});
var config = {
    type: Phaser.WEBGL,
    parent:...