How to import model in p5.js?

Question

I'm currently working on a project with using p5.js. Until now, I could display 3D primitives shapes like boxes, spheres or cylinders. I searched on the Internet and found that p5.js only accepts .obj files as models. So I tried with following The Coding Train's tutorial (https://www.youtube.com/watch?v=FUI7HEEz9B0), but the result isn't the same.

I still have tried to put the code from the tutorial which seemed logical to me, but I have an error on the console. For information, I run my project on http-server and no more with simply run the index.html file. Here is the code:

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);
}

If you want to test with .obj files, you have free models here: https://www.turbosquid.com/fr/3d-model/free/bottle/obj

If you know if we can put other model format on p5.js, please let me know how.

The error message I had is:

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

Answer 1

Firstly, your code looks fine.

What version of p5 are you using? There was a known issue with importing complex models. Essentially, the way they did it was recursive which explains the:

Maximum call stack size exceeded

In a later patch they altered their approach and took the iterative route.

What you can do:

1. Check to see if you can import a simpler/smaller model, if you can, you're likely experiencing the same bug
2. Go to a newer version where this fix has been merged in.