[SOLVED] How can we load an OBJ file from a data URL?



If I have a data URL, can I load it with OBJLoader?


What does the dataURL look like? There’s an OBJLoader.parse() method you could use, but it requires a properly-formatted string as its parameter. I don’t think it could understand a base64 dataURL, for instance.


f.e. data:image/png;base64,.... Various bundlers (webpack, browserify, etc) make it easy to import text files as data URls.


text files as data uris?


Oh, that’s pretty neat. So your OBJ string can be turned into a compact file! Well, you’ll need some sort of decoder that’ll read the png data and output its original text. Not sure if the encoder you’re using also comes with decoding functionality, but let’s pretend it comes with something like a decode() method:

var objString = decode(pngData); // <- You'll need to find the decoder
var loader = new THREE.OBJLoader();
var obj3D = loader.parse(objString);


guess it’s atob(pngData)


I wouldn’t have thought you’d even need to decode the Data URI first — just loader.load('data:image/png;base64,...') doesn’t work?

For data that’s already in memory, you can definitely use Object URLs:

url = URL.createObjectURL( blob );
loader.load( url );
URL.revokeObjectURL( url ); // may need to skip this line for Firefox

^I use this for drag-and-drop with GLTFLoader, for example.