Load image from URL


#1

Hi!

How can I load an image from a URL and use it as a material for a Plane object inside ZapWorks Studio?

This is the code I’m currently using to fetch a json with some fields with images URLs:

Z.getJSON("https://juanmaramon.com/Test/json.json", function(data) {
    console.log(data.sample[0].imageurl);


}, function() {
    console.log("Unable to retrieve information. Check your network connection.");
});

How can I use the result URL to replace a plane material?

Kind regards,
Juanma


#2

I just posted something like this the other week for someone else.
Let me know if this works for you as well.
Load material/texture from URL

Steve


#3

Thanks @stevesanerd!

I tested the code snipped, it works on Zappar desktop but not in web mobile (after clicking the buttons the material disappears).

Do you know what could be wrong?

Juanma


#4

I didn’t know you were looking at using WebAR.
I changed the files to my S3 server thinking it was a CORS problem but the problem is still there. Hay @George any thought?

Steve


#5

Hi @juan.m.ramon.vigo,

So it looks the image you are trying to skin isn’t a power of two so you’ll need to set the image texture wrap mode to clamp. Something like this -

Z.ImageTexture("https://juanmaramon.com/Test/video_white.png").wrap(Z.Texture.Wrap.clamp);

Let me know if that solves it!

George


#6

Hi @George !

Yes, with this code now it is working.

Thanks!
Juan


#7

Thanks @George I didn’t even look t that. I just uploaded the images and went.

Steve