如何在 p5.js 中导入模型？答案

【问题标题】：How to import model in p5.js?如何在 p5.js 中导入模型？
【发布时间】：2019-11-14 10:01:03
【问题描述】：

我目前正在使用 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

【问题讨论】：

标签： javascript import 3d processing p5.js

【解决方案1】：

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

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

超过最大调用堆栈大小

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

你可以做什么：

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

【讨论】：