I am currently using react-planner as a package in my react app. It comes with a list of 3d items using MTL, OBJ and texture files that are stored in a catalog, which is located in my SRC folder.
When I switch to 3d viewer it gives me an error when its trying to load the MTL and OBJ files.
Uncaught (in promise) TypeError: url.lastIndexOf is not a function
And it points to my loadObjWithMaterial function found in the load-obj.js file.
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
export function loadObjWithMaterial(mtlFile, objFile, imgPath) {
let mtlLoader = new MTLLoader();
mtlLoader.setResourcePath(imgPath);
let url = mtlFile;
return new Promise((resolve, reject) => {
mtlLoader.load(url, materials => {
materials.preload();
let objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load(objFile, object => resolve(object));
});
});
}
This is how the planner presents the data and loads the function:
let mtl = require('./door.mtl');
let obj = require('./door.obj');
let img = require('./texture.jpg');
return loadObjWithMaterial(mtl, obj, img)
.then(object => {
cached3DDoor = object;
return onLoadItem(cached3DDoor.clone())
})
When I do console.log(url), I get this in the console:
Object { default: "/static/media/door.3052bdbf.mtl", … }
When I open that link I am able to view the file, what am I missing?
I checked another question where they stated that its to do with the URL not being a string, but when I applied that in the following format I still got an error.
Following this stackoverflow answer
I swapped my
let url = mtlFile;
with
let url = window.URL.createObjectURL(new Blob([mtlFile]));
But this gave me the following error:
Uncaught Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>"
I'd appreciate any pointers or suggestions at this point, thanks!