如何将 Mediapipe 数据输入 Three.js

Question

我的问题是前端问题。我使用 Three.js 和 @Mediapipe/Hands，我将后者的数据提供给 Three.js。这在简单的应用程序中运行良好，但只要我对 Three.js 代码进行一些特定更改，Mediapipe 框架就会抛出一些错误，我无法遵循该模式。发生此错误的一个示例是，当我使用一个更大的 glTF 文件时，该文件正在使用 GLTFLoader 加载到场景中，而另一个较小的 glTF 不会导致 Mediapipe 出错，并且一切正常。但有时较小的更改（例如使用三个灯而不是两个灯）也会导致错误，尽管这只是有时发生，我无法弄清楚原因。抛出的错误在图像中可见。

对于 Mediapipe，我按照 https://google.github.io/mediapipe/solutions/hands.html 上的说明使用 CDN 获取必要的文件： const hands = new Hands({locateFile: (file) => { 返回https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}

；
}});

这导致了错误，您可以在图中看到

这个错误我可以很好地阅读，因为只丢失了一些文件，并且通过以下方法这个错误消失了。

为了解决这个问题，我尝试通过 NPM 和 Webpack 在本地使用 @Mediapipe/Hands 的文件。这也首先工作正常，但与其他解决方案一样，不同的 Three.js 实现会导致错误，您可以在此处看到：

由于我的 Three.js 应用程序中的微小更改都会发生这两个错误，因此我认为可能存在一些相关性。我不知道从哪里开始调试，也无法将错误放在上下文中，所以我希望有人能在这里有所了解。我的 Three.js 应用程序不包含很多内容，这让我感到困惑，因为我的（菜鸟）假设是 Mediapipe 文件中的 Promises 被 Three.js 处理混淆了，尽管我的 Three.js 应用程序真的没有很多元素

Answer 1

尝试：

const hands = new Hands({
    locateFile: (file) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
    },
});

好

const hands = new Hands({
    locateFile: (file) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
    },
});