Hosted base 64 file import rather than have in your main file

Questions
1

Hi everyone, is there a way to pull in (import) a base 64 file so it’s not in your html file. I have an issue where my html file is 40mb and having hosting issues that way. I want to have a reduced html file and pull my base 64 model in externally.

Currently I use (which makes the file 40mb):
//Import meshes
var base64_model_content = “data:base64,XXkljasdlasjlbase64filewhichimnotgoingtousehereasitstoobig”; BABYLON.SceneLoader.Append(“”, base64_model_content, scene, () => {
console.log(‘loaded scene’);

I would like to import it using this method if possible but it’s not working with a base64 file - mainly as I don’t know what to include in the base64 file, what format to save it etc.:

//Import meshes
BABYLON.SceneLoader.Append(“https://dl.dropbox.com/s/pq2vrerrr66/base.json”, scene, () => {
console.log(‘loaded scene’);

The above is not a real link - just an example.

2

You should decode the base64 (for example, using https://www.base64decode.org/) before saving the result in a file that you can load with the scene loader. You should probably add the .babylon extension to the file so that the loader knows what to load (assuming your data is a .babylon encoded scene!).

3

Hi, it was a glb file but I wanted to decode it to base64 so that people couldn’t steal the file for what ever reason. I have both formats, .glb which I don’t want to use and the decoded base64 text which I want to import from dropbox or somewhere similar.

The base64 text works with the current method but it makes my html file 40gb which is the issue. I need to import that externally somehow but that’s the trouble I’m having. I’ll include a basic example below if someone could make that work, I can replicate in my main model.

//Import meshes
var base64_model_content = “data:base64,Z2xURgIAAAD8AwAAVAMAAEpTT057ImFzc2V0Ijp7ImdlbmVyYXRvciI6Iktocm9ub3MgZ2xURiBCbGVuZGVyIEkvTyB2My4zLjMyIiwidmVyc2lvbiI6IjIuMCJ9LCJzY2VuZSI6MCwic2NlbmVzIjpbeyJuYW1lIjoiU2NlbmUiLCJub2RlcyI6WzBdfV0sIm5vZGVzIjpbeyJtZXNoIjowLCJuYW1lIjoiUGxhbmUifV0sIm1lc2hlcyI6W3sibmFtZSI6IlBsYW5lIiwicHJpbWl0aXZlcyI6W3siYXR0cmlidXRlcyI6eyJQT1NJVElPTiI6MCwiTk9STUFMIjoxLCJURVhDT09SRF8wIjoyfSwiaW5kaWNlcyI6M31dfV0sImFjY2Vzc29ycyI6W3siYnVmZmVyVmlldyI6MCwiY29tcG9uZW50VHlwZSI6NTEyNiwiY291bnQiOjQsIm1heCI6WzEsMCwxXSwibWluIjpbLTEsMCwtMV0sInR5cGUiOiJWRUMzIn0seyJidWZmZXJWaWV3IjoxLCJjb21wb25lbnRUeXBlIjo1MTI2LCJjb3VudCI6NCwidHlwZSI6IlZFQzMifSx7ImJ1ZmZlclZpZXciOjIsImNvbXBvbmVudFR5cGUiOjUxMjYsImNvdW50Ijo0LCJ0eXBlIjoiVkVDMiJ9LHsiYnVmZmVyVmlldyI6MywiY29tcG9uZW50VHlwZSI6NTEyMywiY291bnQiOjYsInR5cGUiOiJTQ0FMQVIifV0sImJ1ZmZlclZpZXdzIjpbeyJidWZmZXIiOjAsImJ5dGVMZW5ndGgiOjQ4LCJieXRlT2Zmc2V0IjowLCJ0YXJnZXQiOjM0OTYyfSx7ImJ1ZmZlciI6MCwiYnl0ZUxlbmd0aCI6NDgsImJ5dGVPZmZzZXQiOjQ4LCJ0YXJnZXQiOjM0OTYyfSx7ImJ1ZmZlciI6MCwiYnl0ZUxlbmd0aCI6MzIsImJ5dGVPZmZzZXQiOjk2LCJ0YXJnZXQiOjM0OTYyfSx7ImJ1ZmZlciI6MCwiYnl0ZUxlbmd0aCI6MTIsImJ5dGVPZmZzZXQiOjEyOCwidGFyZ2V0IjozNDk2M31dLCJidWZmZXJzIjpbeyJieXRlTGVuZ3RoIjoxNDB9XX2MAAAAQklOAAAAgL8AAAAAAACAPwAAgD8AAAAAAACAPwAAgL8AAAAAAACAvwAAgD8AAAAAAACAvwAAAAAAAIA/AAAAgAAAAAAAAIA/AAAAgAAAAAAAAIA/AAAAgAAAAAAAAIA/AAAAgAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAABAAMAAAADAAIA”; BABYLON.SceneLoader.Append(“”, base64_model_content, scene, () => {
console.log(‘loaded scene’);

This would be the Drop box link to a text file of the decoded base64 file: https://dl.dropbox.com/s/nhti6d16aqmjf9w/base which is how I want to import the model.

4

You could just get the content of the file with a fetch(url) and use the response text as the input for SceneLoader.Append.

So, in your case, something like that:

1 Like
5

Thanks Evgeni this looks promising :slight_smile: , just one more error on the way I do it: I haven’t got async function in my create scene so it errors. See the playground example@

I use : var delayCreateScene = function () {
Not sure if I have to change a lot in my playground to get everything to work with the async function

6

You should normally should add the async keyword and it should work. If you don’t want to do it, you must use the promises directly:

7

Thank you so much :slight_smile: I have a few errors to sort out in my model now - not related to this change but it works perfectly, thank you. for reference - hopefully it’s showing now as it wasn’t earlier on my website for others - The Block City

8

Hey Evgeni,

How do I include the console.log code that was previously in my load screen. It’s loading part of the scene early as it’s not capturing the console.log. Previous I had:

//Import meshes
BABYLON.SceneLoader.Append(“link”, “link”, scene, () => {
console.log(‘loaded scene’);

In your playground the console log is not there, it’s loading some parts of the scene early. I’ve been playing around with the code to include console.log but I can’t seem to get it right with your new suggestions.

9

You can also add this callback in the code I provided:

10

Funnily enough, that’s the code I tried but for some reason, it’s still

Capture.PNG
Capture.PNG1715×897 38.7 KB

loading my character first before the scene. but the other method of loading the scene (nonbase64) didn’t load the character before. Baffling.

11

Would you be able to provide a repro in the Playground? It would be easier to understand what’s going on.

1 Like