javascript - 如何在 p5.js 中导入模型？

Question

我目前正在使用 p5.js 开发一个项目。到目前为止，我可以显示 3D 图元形状，例如长方体、球体或圆柱体。在网上搜索了一下，发现p5.js只接受.obj文件作为模型。因此，我尝试按照 The Coding Train 的教程 ( https://www.youtube.com/watch?v=FUI7HEEz9B0 ) 进行操作，但结果并不相同。

我仍然尝试将教程中的代码放在我看来合乎逻辑的代码中，但我在控制台上出现错误。有关信息，我在 http-server 上运行我的项目，仅运行 index.html 文件。这是代码:

let bottle;

function preload() {
    bottle = loadModel('glass_bottle.obj');
}

function setup() { 
    pixelDensity(10.0);
    createCanvas(800, 600, WEBGL);
}

function draw() {
    background(0);
    noStroke();
    model(bottle);
}

如果您想使用 .obj 文件进行测试，您可以在此处获得免费模型:https://www.turbosquid.com/fr/3d-model/free/bottle/obj

如果您知道我们是否可以将其他模型格式放在 p5.js 上，请告诉我怎么做。

我得到的错误信息是:

Uncaught (in promise) RangeError: Maximum call stack size exceeded at p5.js:63060

Answer 1

首先，您的代码看起来不错。

您使用的是什么版本的 p5？ importing complex models 存在一个已知问题.本质上，他们这样做的方式是递归的，这解释了:

Maximum call stack size exceeded

在后来的补丁中，他们改变了方法并采用了迭代路线。

您可以做什么:

1. 检查您是否可以导入更简单/更小的模型，如果可以，您可能会遇到同样的错误
2. 转到较新的版本，其中 this fix已合并。