load OBJ file from blob in three.js

Question

I'm trying to load an OBJ file from a blob with three js. I've referred to this and got STLs to load. But it's not working for OBJs. The error I'm getting is:

TypeError: text.indexOf is not a function
    at OBJLoader.parse (OBJLoader.js:482:13)

Here's my code:

    // this gives an error
    async loadObj(blob) {
        var loader = new OBJLoader();
        const arrayBuffer = await blob.arrayBuffer();
        const geometry = loader.parse(arrayBuffer);
        const material = new THREE.MeshPhysicalMaterial({});
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
    }
   
    // this works
    async loadStl(blob) {
        const loader = new STLLoader();
        const arrayBuffer = await blob.arrayBuffer();
        const geometry = loader.parse(arrayBuffer);
        const material = new THREE.MeshPhysicalMaterial({});
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

    }

Answer 1

loader.parse expects a string, you are passing an array buffer. Try passing a string instead:

async loadObj(blob) {
        var loader = new OBJLoader();
        const blog_string = await blob.text();
        const geometry = loader.parse(blog_string);
        const material = new THREE.MeshPhysicalMaterial({});
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
}

OBJLoader.parse Documentation

OBJLoader.parse Source Code

MDN Blob.text()