Load file from Buffer not Path

I’d like to load an STL file from a Buffer / ArrayBuffer, rather than a path (URL).

I’ve tried forking the STLLoader.js and three.module.js and editing the DefaultLoadingManager.resolveURL method. But to be honest I’m a bit out of my depth!

Can anyone help?

The STL loader has a method parse that handles the file after loading. You may have success passing your data to that method.

2 Likes

Thanks @EliasHasle - but so far, I’ve had no luck with this!

I noticed the ArrayBuffer I get directly from my file is larger than the ArrayBuffer that Three.js creates from the path – so I wonder if that could be part of the problem?

This is the method I’m using to encode my file string:

  var enc = new TextEncoder();
  var arrayBuffer = enc.encode(fileString).buffer;

I have no experience with TextEncoder. But I think you need to also pay attention to the encoding of the code file where the string is taken from.

You are sure not making it easy for yourself. Why not just use STLLoader and LoadingManager as intended? :wink:

A fair point! :joy:

I’m trying to display user-uploaded files, which I thought had to be stored on my backend. (I’m using a React client / Node.js server).

If anyone can suggest a way to grab the path (URL) rather than the raw file data, I’d definitely prefer to do that instead!

Maybe you can use them same approach like in the three.js editor. When a a file is imported (via dialog or Drag’n’Drop), the editor uses the following code section for STL file data.

reader is an instance of FileReader.

5 Likes

I was going to share an application that I made a while ago, which uses the same approach: https://eliashasle.github.io/STL_and_TDS_viewer.html (online now)

The files are not uploaded, but loaded at the client.

1 Like

Thanks very much, both - really useful suggestions. I’ll dig into these as soon as I can!