Load assets according to the user

[Xora]

Hey!

I am currently working on a business card project, where the user can upload these images to change the front and back of the card.

For this I downloaded the build of a blank map that I created on PlayCanvas like this:

And then I created in the index.html buttons to upload these images. These buttons call an ajax request that takes the downloaded images and puts them in the folders defined by PlayCanvas for the assets.

Now I am creating a login and registration page so each user can save these business cards, or create new ones, so the base template will still be used but the assets will be different.

And that’s where I’m stuck, I can’t understand how I can load assets based on a user id for example because the paths of the assets is defined in the config.json.

What I would like is for user A to see the business card with assets A and user B to see the business card with assets B,.
I saw there is a function FindByTag the load the assets by Tag, but my png don’t have tags , maybe i can add the user id as a tag , but i don’t know how to process.

If you have any solution , i will take it aha.

Thanks

[Leonidas]

Hi @Xora,

If you select any asset in editor, you can add tags to it in the inspector.

You can then find those assets by their tag or tags, and load them.

const assets = this.app.assets.findByTag('user-a');

Here is an example project on how to load multiple assets at runtime:
https://developer.playcanvas.com/en/tutorials/load-multiple-assets-at-runtime/

[Xora]

Hi Leonidas, thanks for you’re answer.

In my case the user upload their assets alone and they don’t have acces to the editor , it is possible to add this tags(user_id) when they upload their assets with my buttons?

This is my input/buttons

[yaustar]

Where do the files that the user uploads go?
Is it only on the user device or are they uploaded to a server?
How are they retrieved later by the user again?

[Xora]

Hey yaustar,

The upload files will be upload in an database, but for the moment they juste go in a path where PlayCanvas knows its the back or front of the cards.

This files/assets/74234066/1 for exemple , i found this path in the json.config file.

Later one , they will be uploaded to a server, so they can share there business card , to show to some ppl i guess.

They will find them when they log into their account, and go into some section “my-cards”.

I’m new in the “coding world” so maybe my way of thinking is not good at all

[yaustar]

If the files are uploaded to the server, you need to store them in some way that you can get a list of files and URLs by user.

At which point, you can load them by URL at runtime depending on the user.

[Xora]

Yes I save the images in a database with a user_id.

But i’m not sure how to process to load them by Url in the PlayCanvas

I should take a look in the__start__.js to load them on start?

I’m a bit lost

[yaustar]

You can create an asset at runtime from URL using this API: https://developer.playcanvas.com/api/pc.AssetRegistry.html#loadFromUrlAndFilename

For example, if you wanted to load a texture from a url, it be:

this.app.assets.loadFromUrlAndFilename("https://someUrl.com/somefilename.png", "texture.png", "texture", function (err, asset) {
    var texture = asset.resource;
    // Do something with the loaded asset
});

And I suggest doing this at runtime with an in app loading screen rather than in the preload. It’s much easier to do workflow wise

[Xora]

Okey i see i will try to code something around this , thanks a lot , iI will post my progress here

[Xora]

Hey it’s me again aha!

I tried things but I can’t overwrite the paths in the json.config, it is possible to do that? because any function i use is not used because of the json.config i have the impression.

This paths looks static no?

Maybe I can change them to then be able to use my paths and be able to access images depending on the database?

[yaustar]

You wouldn’t need to change config.json for this. The user uploaded files would be uploaded at runtime using the API I linked above.

[yaustar]

Here is a really quick example of what I mean https://playcanvas.com/project/916288/overview/loading-from-url

[Xora]

Not all hero wear capes… thanks a lot man !

it’s so much clearer to me now !

So now i have this 3 meshInstance who use the StandardMaterial

This StandardMaterial is one part one my card the “verso” one

So now it is possible to apply my choosing material to this

Like i have 3 standardMaterial? or i got only one and i have to change the Material#0 , Material#1 and Material#2 into it ?

Update :

I have used you’re script to do two scripts :

One with the DiffuseMap and one with the GlossMap, not optimal i would say , but it works:

and diffuse one