如何在JSFiddle或其他平台测试PixiJS示例？解决相关问题

一、修复JSFiddle中的问题 #

黑框和报错的核心原因是示例资源路径无效，JSFiddle的X-Frame-Options警告不影响实际运行，可忽略，按以下步骤调整：

1. 替换资源路径：原代码里的examples/assets/...是Pixi官方示例的相对路径，JSFiddle无法访问，需换成官方CDN的绝对路径。
2. 引入PixiJS依赖：在JSFiddle的「External Resources」中添加PixiJS的CDN链接，比如https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.js。

修改后的完整代码：

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

app.stage.interactive = true;

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

// 替换为官方CDN资源路径
const flag = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/pixi-filters/flag.png');
container.addChild(flag);
flag.x = 100;
flag.y = 100;

// 替换为官方CDN资源路径
const displacementSprite = PIXI.Sprite.from('https://pixijs.io/examples/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; }
});

二、其他无需Pro权限的测试平台 #

• CodeSandbox/StackBlitz：直接创建HTML/JS项目，引入PixiJS CDN，粘贴修改后的代码即可实时预览，完全免费。
• 本地HTML文件：创建一个.html文件，内容如下，用浏览器打开（建议用VS Code的Live Server插件启动，避免跨域问题）：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.js"></script>
</head>
<body>
    <script>
        // 粘贴修改后的PixiJS代码
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Rip