guansss / pixi-live2d-display

A PixiJS plugin to display Live2D models of any kind.
https://guansss.github.io/pixi-live2d-display/
MIT License
810 stars 123 forks source link

Uncaught TypeError: Cannot read properties of undefined (reading '1') #109

Closed ox4f5da2 closed 10 months ago

ox4f5da2 commented 10 months ago

请问一下,我在 electron 中想导入 live2d,代码如下:

// 导入相关文件
const Live2DCubismCore = require('../assets/lib/live2dcubismcore.min.js');
window.Live2DCubismCore = Live2DCubismCore;
const live2d = require('../assets/lib/live2d.min.js');
const PIXI = require('pixi.js'); // 6.5.2 版本
window.PIXI = PIXI;
const { Live2DModel } = require('pixi-live2d-display'); // 0.4.0 版本

// 生成 live2d
const model = await Live2DModel.from(modelLink);
model.on("hit", (hitAreas) => {
  if (hitAreas.includes("body")) {
    model.motion("tap_body");
  }

  if (hitAreas.includes("head")) {
    model.expression();
  }
});

然后 live2d 是可以在页面上产生的,就是有个问题,当鼠标移入 live2d 所在的 canvas 内,不会跟随鼠标且会有如下报错,同时模型绑定的 hit 事件也无法触发:

Uncaught TypeError: Cannot read properties of undefined (reading '1')
    at InteractionManager.processPointerOverOut (InteractionManager.ts:1548:57)
    at InteractionManager.processPointerMove (InteractionManager.ts:1481:18)
    at TreeSearch.recursiveFindHit (TreeSearch.ts:172:21)
    at TreeSearch.recursiveFindHit (TreeSearch.ts:112:39)
    at TreeSearch.findHit (TreeSearch.ts:198:14)
    at InteractionManager.processInteractive (InteractionManager.ts:1094:33)
    at InteractionManager.onPointerMove (InteractionManager.ts:1450:18)

但是我试了一下,在浏览器内使用您给的示例代码又是可以的,唯一的区别就是在浏览器内使用的是:

const model = await PIXI.live2d.Live2DModel.from(modelLink);

我不知道这个会不会有影响,还是说版本的问题,因为我也不太懂 live2d,目前只是想写一个 electron 的桌面应用,然后这个不能进行触发的原因是因为这个 InteractionManager 吗?

guansss commented 10 months ago

这个问题我记得是因为 pixi 被打包了两次,一般是因为混用了 importrequire 导致的,但你这里的代码并没有混用,所以我不是很清楚原因,你可以检查一下你的其他代码里是否出现了相关的 import 语句,例如:

import * as PIXI from "pixi.js"
import { xxx } from "pixi.js"
import xxx from "@pixi/xxx"
import { Live2DModel } from "pixi-live2d-display"

如果没有的话,请考虑一下提供最小复现

ox4f5da2 commented 10 months ago

目前没有发现您说的这个 import 语句,然后进行了最小复现,上传至我的代码仓库中:

https://github.com/ox4f5da2/electron-problem

启动项目命令:

npm i
npm start

非常感谢您 😆

guansss commented 10 months ago

找到问题了,是因为 npm 安装了两个版本的 pixi,一个是 6.5.2,一个是 6.5.10,你把 package-lock.jsonnode_modules 都删了,然后重新 npm i 就好了

ox4f5da2 commented 10 months ago

已经解决啦,非常感谢您的帮助