自制live2D模型在vue项目中展示的debug日志

一、使用的环境和技术

Windows

VS Code

Live2D Cubism Editor 4.2

Live2D Cubism Viewer 4.2

vue

pixi-live2d-display

二、参考资料

pixi-live2d-display插件开发大佬的简要展示视频：【Live2D插件】使用PixiJS展示Live2D！_哔哩哔哩_bilibili

pixi-live2d-display插件的GitHub: https://github.com/guansss/pixi-live2d-display

实践代码参考：electron-vue给你的桌面加个Live2D桌宠 - 哔哩哔哩

live2d.min.js下载（官网已经不提供这个的下载了，虽然我的模型版本用不到这个但是以防万一还是在项目里加载了这个文件）：https://github.com/dylanNew/live2d/blob/master/webgl/Live2D/lib/live2d.min.js

三、遇到的问题

1.  Failed to load resource as json (Status 404)

在浏览器中运行项目报错：

浏览器无法加载 ./deb7/deb7.model3.json 文件，因为该文件不存在或者路径设置不正确，从而导致加载失败。

2.  Uncaught (in promise) Error: Network error

在浏览器中运行项目报错：

在使用 JavaScript Promise 进行网络请求时发生了错误。

• 尝试解决：

（1）控制变量，把加载live2D模型的组件去掉之后再运行，两个报错都没了，意味着可能就是json的文件路径问题。

（2）检查相对路径是否写错了。故意改了一个完全不存在的文件路径，还是报一样的错，说明可能就是一开始的相对路径错误导致资源加载失败。

（3）将路径更改后以上两个错都不报了。

        但是一口气报了更多个新的错……而且我发现每次刷新报错的数量时多时少。将报错全部丢给了人工智障，以下是整理后的报错类型和说明。

3.  ReferenceError: interaction is not defined

在 main 函数中的 interaction 没有定义，因此会抛出这个错误。可以尝试在引入 pixi.js 后添加 const interaction = PIXI.interaction; 来定义 interaction。

4.  TypeError: manager.on is not a function

在 Live2DModel.registerInteraction 中使用了 manager.on 函数，但该函数不存在。可以尝试将注释掉的 model.manager = app.renderer.plugins.interaction; 恢复，并在 main 函数中添加 app.renderer.plugins.interaction = new PIXI.interaction.InteractionManager(app.renderer) 来定义 interaction。

5.  TypeError: currentTarget.isInteractive is not a function

这个错误可能是因为没有正确加载 pixi.js 或 live2dcubismcore.min.js 文件，或者这些文件版本不兼容。建议检查文件路径和版本，并确保加载正确的文件。

• 尝试解决：

根据人工智障的修改建议更改后有些错不报了，但有些仍然报错，摸不着头脑，我把新报的错继续丢给人工智障，以下是整理后的报错类型和说明。

6.  TypeError: Cannot read properties of undefined (reading 'InteractionManager')

这个错误提示 InteractionManager 未定义。这可能是因为 pixi.js 的版本不兼容，或者在加载时出现了一些问题。可以尝试在 mounted() 函数中添加 console.log(PIXI) 来查看 PIXI 的版本和是否正确加载。

7.  PixiJS Deprecation Warning: renderer.plugins.interaction has been deprecated, use renderer.eventsDeprecated since v7.0.0

这是一个 PixiJS 的弃用警告，提示 renderer.plugins.interaction 已被弃用，建议使用 renderer.events 替代。可以尝试将 app.renderer.plugins.interaction 改为 app.renderer.events。

• 尝试解决：

弃用警告估计是没办法了，开发pixi-live2d-display插件的大佬发布的时候还没有被弃用，总归只是警告还不真正影响什么，根据人工智障给我的修改方案替换了一下我的代码——终于！！！我的live2D模型显示出来了（虽然还是有一堆报错，但是好像不影响）。

        但是只显示了一个耳朵（）

        总归是比之前全是黑乎乎一片好了！接下来应该只需要调整大小和背景透明化什么就行！总算看到一点点胜利的曙光！

• 更改后的index.js代码：

// 这个文件最好放在静态资源 assets 下面，后面要把 model文件放在这个目录下方便调用
// 下载的 live2d.min.js 和 live2dcubismcore.min.js 建议放在 utils 文件夹，这个文件夹属于插件文件夹，这里建议用 require() 引用


// import Live2DCubismCore from '../utils/live2dcubismcore.min.js';
import * as PIXI from 'pixi.js'
import { Live2DModel } from 'pixi-live2d-display'

window.PIXI = PIXI;

// 编写 main() 函数构建模型
export async function main() {
  // 构建画布
  const app = new PIXI.Application({
    view: document.getElementById('canvas_view'),
    autoStart: true,
    width: 280,
    height: 300,
    transparent: true, // 画布透明
  });

  const url = '/src/assets/deb7/deb7.model3.json';
  const model = await Live2DModel.from(url);

  // 把deb放在容器里面
  app.stage.addChild(model);

  // 注册交互事件
  model.registerInteraction(app.renderer.events);

  // 监听事件
  model.on('hit', (hitAreas) => {
    // if (hitAreas.includes('body')) {
    //   model.motion('tap_body')
    // }
  });
}

• test.vue代码：

<script>

  // 引入加载模型的 index.js
  import '@/utils/live2d.min.js'
  import { main } from '../../assets/index.js'

  export default {
    data() {
      return {}
    },

    mounted() {
      this.$nextTick(() => {
        main().then()
      })
    },
  }

</script>

<template>
  <div class="live2d">
      <h3>Live2D测试：</h3>
      <canvas id="canvas_view" style="border: 2px solid black;" width="400" height="400"></canvas>
  </div>
</template>

<style>
    .live2d {
        position: fixed;
        right: 0;
        bottom: 0;
    }
  
</style>

四、live2D样式调整

1.  在model.json文件里改了一下模型初始大小，让模型可以全部展示出来了，但背景是黑色的，已经设置了canvas和画布的背景为透明，但是还是没用。

     我查阅了一下，发现大家说PixiJS v7更改巨大，而pixi-live2d-display插件是在PixiJS v6的时候开发的，github的issue里也有人提到以后是否会更新兼容7的插件，作者回复说会考虑的，于是我怀疑会不会因为版本不兼容导致live2D模型加载失败，决定尝试一下将我的PixiJS版本降级试一下。

（1）我先用语句查询了一下我的PixiJS版本。

npm info pixi.js

（2）果然是v7以上的版本，遂卸载。

npm uninstall pixi.js

 （3）指定安装6.0.2版本。

npm install pixi.js@6.0.2 -s

（4）我失败了，不知为什么一通操作下来，查询版本后仍是7.2.4……我决定先看看别的。

2.  我把所有都关掉（VSCode、npm、浏览器等），重新运行了一次项目。

     惊人的是不知道是不是版本替换成功了，总之之前的一大堆报错没有了，背景也成功变成透明的了，pixi-live2d-display插件提供的变换也都能用了（之前不能用），模型会自动呼吸了（只是动作较小，考虑回炉加大一下呼吸参数的live2D呼吸幅度）。

     只是仍旧不能交互（指自动跟随鼠标），我开始怀疑是不是live2D模型设置的问题，虽然我k好了九轴，但是可能不代表就能自动跟随鼠标，或许其中有什么设置是我不知道的，我决定之后再来解决这个问题（因为现在已经熬到了凌晨六点，实在顶不住了），比如先导入官方的示例模型测试、重新查找live2D模型制作相关的教程等。

---

日期：2023年7月1日

项目代称：mnnucsweb