Pixjs 5.X 的后备功能不适用于 NUXT.JS

Question

缺乏关于如何在 nuxtjs 项目上添加 pixi.js（新版本 5+）的指导，包括如果需要从 webgl 回退到 canvas 的可能性。在完成了在 pixjs 和 github 上找到的文档中的所有操作后，我们遇到了这两种情况“找不到 PIXI” - 使用 pixi.js-legacy npm 模块插入 nuxt 而不使用 ssr “不支持 WEBGL” - 使用 pixi.js npm 模块插入 nuxt没有特别代表。

[已解决] 的答案。

Answer 1

如何在 nuxt.js 中逐步添加 pixi.js 5+ 并从 webgl 进行画布回退：如果您使用 pixi.js v5+，它将仅支持 webgl。他们有 pixi.js-legacy 库，也提供画布后备。我们会用它。

• setp 1：通过 npm 安装

  npm i pixi.js-legacy

• 步骤 2：添加一个名为 pixi-projection 的插件

  npm i pixi-projection

• 步骤 3：在插件文件夹中创建一个名为 pixijs.js 的文件并添加以下行，然后保存

  import * as PIXI from 'pixi.js-legacy'; global.PIXI = PIXI; require("pixi-projection"); const renderer = PIXI.autoDetectRenderer();

• 步骤 4：编辑nuxt.config.js并将这个新创建的文件添加到对象的 plungins 数组中，并将 ssr 选项设置为 false

.................................. plugins: [ ...... { src: '~/plugins/pixijs', mode: 'client', ssr: false} ], ..................................

• 第 5 步：转到新的 .vue 页面并尝试他们的示例（pixi 默认）。该页面应如下所示：

<template>
</template>
<script>
export default {
  mounted() {
      this.startPixi();
  },
  methods: {
    startPixi() {
      const app = new PIXI.Application();
      document.body.appendChild(app.view);
      let img = require('~/assets/ec-newlogo.png'); //ADD YOUR IMAGE
      app.loader.add('bunny', img).load((loader, resources) => {
        const bunny = new PIXI.Sprite(resources.bunny.texture);
        bunny.x = app.renderer.width / 2;
        bunny.y = app.renderer.height / 2;
        bunny.anchor.x = 0.5;
        bunny.anchor.y = 0.5;
        app.stage.addChild(bunny);
        app.ticker.add(() => {
          bunny.rotation += 0.01;
        });
      });
     }
   }
}
</script>

来自facem.site 的欢呼