UI button to upload image using external plugins

Questions
,
1

Hi,

we are trying to upload image texture and apply to the mesh, am trying to add UI control to upload image.
i checked this link its working out.

I tried this approach but no luck

can somebody look into this
Thanks
vijay

2

You were trying to change the texture of the material of the mesh named ā€œWolf3D_Outfit_Top.005ā€.
This mesh doesnā€™t exist in your model.
Also, there is no sense in assigning any material to the root mesh newMeshes[0].
Here is the example with changing texture - https://playground.babylonjs.com/#JHRF6T#452
Please note that the shirt consists of several meshes, so youā€™ll need to change texture for all of them.

image
image779Ɨ782 34.6 KB

1 Like
3

@labris am looking for UI control Button to upload image from the sys, then append the image to the mesh.

4

Here you are - https://playground.babylonjs.com/#JHRF6T#453

1 Like
5

@labris
am looking this kind of feature to upload image with dialog box for selecting the image
image

6

What is preventing you from using usual HTML in this case? All the mechanics is already in PG, one needs just to add file input, the same way like it is done in Sandbox.

1 Like
7

I suppose you are looking for an example, are you? I found this one (below) from a recent post.
You would just need to add all actions TbD after file load to assign it to your texture/material.
Hope this helps,

8

Thanks @mawa almost thereā€¦

using theFile object trying to get the file path so that i can pass to shirtTexture object
const shirtTexture = new BABYLON.Texture(ā€œhttps://fashion-desings.s3.ap-south-1.amazonaws.com/common/casuals/tshirts/userchoice/blue_color.PNGā€, scene);

to get file path tried using Window.URL.createObjectURL(theFile); but its not working out

9

Hi,
Hope you are well. Iā€™m really not a specialist of this. I guess there must be other methods.
I also rushed this PG, It might require some ā€˜cleaningā€™ especially for the refreshing of the DOM container/input which seems a bit buggy. Iā€™m sorry, I donā€™t have too much time this morning but this part shouldnā€™t be all too hard to fix.

As for your issue, the essential part to understand is that when you are uploading a ā€˜Fileā€™ as an input, it actually creates a blob. Problem is a new texture requires a path/URL. So in order to get this url and pass it on to your texture, youā€™re gonna need two lines of code.

  • One that declares the new BLOB and one that creates the object url for this blob.(lines 34&35 in PG)

I have also added an id to the element. It can eventually help if you need to dispose of it or stuff. I have added some console.log just for your understanding of what data is called.
I hope this helps a little and meanwhile, have a great day :sunglasses:

Edit: Sorry, just edited the link. Was missing the part of assigning user texture to material. Click on your button to apply loaded texture.

2 Likes
10

Thanks @mawa its done

fine tuned slightlyā€¦

2 Likes
11

@Mawa one small helpā€¦

With our existing logic we are using two buttons like ā€˜choose fileā€™ and ā€˜uploadā€™ to upload images.
Now we want to use single button(green color) to upload images, Now i changed the logic accordingly.

Seems unless there is event handler we cannot upload imageā€¦ Any workaround for this
pls suggest

Thanks
vij

12

Sorry, I donā€™t have time today and then, as I said, Iā€™m no specialist of that.
Looks like you are willing to use the BJS gui to import the file. I donā€™t know if and how you can import directly in the canvas using the BJS GUI only. I suppose so but would need to investigate. May be better to try ask someone more knowledgeable than me for that. @carolhmj
Iā€™m sorry but today and tomorrow will be a bit complicated for me so I will have to let the others enlighten you this. Meanwhile, have a great day :sunglasses:

13

You can do it like this:

5 Likes