在JSFidle或其他任何地方测试Pixijs示例？

问：

我才刚刚开始学习 Pixijs，我想测试一些示例。

当我复制这个例子时：https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js

进入 JSFiddle：https://jsfiddle.net/ripmurdock/42h7fckx/4/

我在控制台中收到一个黑匣子和此错误： 加载 “https://fiddle.jshell.net/_display/?editor_console=true” 时发现无效的 X-Frame-Options 标头：“ALLOWALL”不是有效的指令。

我比较熟悉codepen。Codepen 支持说运行这个例子是 Pro 功能。

在 JSfiddle 或其他任何地方测试 Pixijs 示例的好方法是什么？

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.stage.interactive = true;

const container = new PIXI.Container();
app.stage.addChild(container);

const flag = PIXI.Sprite.from('examples/assets/pixi-filters/flag.png');
container.addChild(flag);
flag.x = 100;
flag.y = 100;

const displacementSprite = PIXI.Sprite.from('examples/assets/pixi-filters/displacement_map_repeat.jpg');
// Make sure the sprite is wrapping.
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementFilter.padding = 10;

displacementSprite.position = flag.position;

app.stage.addChild(displacementSprite);

flag.filters = [displacementFilter];

displacementFilter.scale.x = 30;
displacementFilter.scale.y = 60;

app.ticker.add(() => {
    // Offset the sprite position to make vFilterCoord update to larger value. Repeat wrapping makes sure there's still pixels on the coordinates.
    displacementSprite.x++;
    // Reset x to 0 when it's over width to keep values from going to very huge numbers.
    if (displacementSprite.x > displacementSprite.width) { displacementSprite.x = 0; }
});