Preloading files

Questions
1

i know that i can pre load images like this

// preload image
new Image().src = "http://domain.tld/preload.png";

BUT HOW DO I PRELOAD OTHER FILES LIKE OBJ or GLTF’s

function preload(as) {
  window.prefiles = [];
  for (var x in as) {
    fetch(as[x])
      .then(response => response.text())
      .then(data =>
        window.prefiles.push(
          "data:application/octet-stream;base64," + Base64.encode(data)
        )
      );
  }
}
// get.weapon() // it returns the model url
var files = [
  get.weapon("plain"), //./assets/weapons/plain/model.obj?Date.now()
  get.weapon("glock"), //./assets/weapons/glock/model.obj?Date.now()
  get.weapon("Order_95") //./assets/weapons/Order_95/model.obj?Date.now()
];
preload(files);

//then loads it 
loader.load(prefiles[0], function ( gltf ) {
  scene.add( gltf.scene );
} );
2

Hi!
Not sure if I got you correctly, but maybe you’re looking for THREE.LoadingManager()?

3

@Hoodgail_Benjamin can you explain in more detail what you are hoping to achieve?

Please also read over this post for guidelines on how to ask a good question here:

https://discourse.threejs.org/t/please-read-this-before-posting-a-question/24/2

1 Like
4

I think preloading is some weird concept from the olden days. I think there were even libraries for “preloading” stuff (what stuff i dont know, i think images and what not).

Im wondering if it’s pre something, what is it pre to.

5

Loading:

loader.load( 'model.glb', function ( gltf ) {
  scene.add( gltf.scene );
} );

Preloading:

var model;

loader.load( 'model.glb', function ( gltf ) {
  model = gltf.scene;
} );

:innocent:

3 Likes
6

OOO perfect

7

@donmccurdy :joy:

8

:smile: lol i should have thought of that

1 Like
9

Hoodgail_Benjamin if @donmccurdy’s solution is what you are looking for, it probably means your question would better be written as:

How can I access the loaded glTF model outside the onLoad callback?

Is that correct?

10

No what he sent me is not what I wanted but it made me know how to do what I wanted

1 Like
11

Can you share your solution here please?

2 Likes
12

I think the meaning of “preloading” (in this case) is that @Hoodgail_Benjamin wanted to get the model ready in advance, so that it would be available to render immediately when needed by the application. More than one way to do that of course. :slight_smile:

2 Likes
13

yes

function preload(as) {
  window.prefiles = [];
  for (var x in as) {
    fetch(as[x])
      .then(response => response.text())
      .then(data =>
        window.prefiles.push(
          "data:application/octet-stream;base64," + Base64.encode(data)
        )
      );
  }
}
// get.weapon() // it returns the model url
var files = [
  get.weapon("plain"), //./assets/weapons/plain/model.obj?Date.now()
  get.weapon("glock"), //./assets/weapons/glock/model.obj?Date.now()
  get.weapon("Order_95") //./assets/weapons/Order_95/model.obj?Date.now()
];
preload(files);

//then loads it 
loader.load(prefiles[0], function ( gltf ) {
  scene.add( gltf.scene );
} );

something like this…
but is there a better way to do this?

1 Like
14

or making obj.load not load the same object twice

… i was thinking of saving the obj data in a variable and obj.load would load it from that variable
and it would not have to keep loading it from the url each time its requesting it

15

Am i misunderstanding something or @donmccurdy example is missing an async/await statement. I don’t see much that could be done with the model var until it is set some time in the future.

16

There are many ways to do this. Promises, async/await, callbacks, etc. I’m not suggesting that those four lines of code are a production-grade preloading system, but a vague question gets vague answers. Seems like the OP is on the right path.

@Hoodgail_Benjamin don’t use base 64 if you don’t have to, it is slow. If you can store the load() output object, rather than the raw string from the OBJ, you’ll avoid the cost of parsing the string every time you need a copy of the object. Just load it once and .clone() to make copies.

17

Aaaah thank you

18

I’m having an anxiety attack reading all this :confused:

Can we finally clarify what is being asked here? What does i mean to “preload” a gltf?

1 Like
19

You are overthinking this. :slight_smile:

The goal is to do [some action] in advance, so that — much later — when the application needs to add a resource to the scene, that resource is already available (aka “preloaded”) and can be added very quickly.

Yes, you could use async/await and have callbacks to know exactly when that resource is ready, and do something then, but I think all that is more detail than has been asked for.

2 Likes
20

I I probably am lol. On that note, are all of threes loaders basically pre loaders?

With webpack I can see the scenario the op later described. Instead of copying a static asset you can embed it into the js or even the html. This would cause a truly preloaded asset in my mind, as you finish downloading the code, the asset is already available.

All other scenarios though, fall under just… loading?

1 Like