Convert and Open Base64String in THREE.js

Questions
1

I have a Javascript function that takes a base64 string as parameter. I then use the

window.atob(base64String);

function to get the binary of this file.

Essentially the data coming in is a .glb file that I pass from C# after converting it to a base64 String:

var buffer = await FileIO.ReadBufferAsync(File);
var bytes = buffer.ToArray();

//This is the data being passed to the Javascript function
var result = Convert.ToBase64String(bytes);

What should I do after I get the result of the window.atob() function to get the model and display it in THREE.js? As in be able to do this:

scene.Add(model);
2

Have you tried it with this approach?

If you transform your data to an instance of ArrayBuffer, you can pass them to GLTFLoader.parse().

3

/cc

4

I have tried what you suggest but it didn’t work. I’m not sure what the rest of the GLTFLoader.parse() parameters sould be. Can I just pass the ArrayBuffer and then empty strings for the rest of them?

And yes I did post on StackOverflow but no one came back with an answer so I thought to come ask here as well.

I’m using the THREE.js site in a UWP webview.

5

So I’m trying your suggestion. I’d like to know what is the result of the GLTFLoader.parse() function?

Do I pass the result of the parse() function to the load() function or do I already have the result I need to show the model once I successfully parse the ArrayBuffer?

Thanks for the suggestion.

6

Since you already have the data in memory, it’s necessary to use load(). Use parse() similar to this example:

Instead of using the logic from the editor, you can directly add result.scene to your scene.

1 Like
7

That worked. Thanks a lot for your answer!

8

hey , can you please explain how you fixed this, i am kinda stuck