Replace current material with png's that can be uploaded via a button

Help & Support
1

I’m new to play canvas, and the advanced scripting concepts are still unclear to me.
I would like to be able to create a button that allows me to upload png and put them in place of the present material.

For example if I have a red cube, I would like via an upload button, to download an image and replace the current diffuse which is red, by my png, is it possible to do that?

I don’t know if I’m clear, maybe it’s too complicated for me at this moment

Cheers, Xora.

2

Hi @Xora and welcome,

That’s definitely possible! Things you will need to do to make that happen:

  1. Program your upload button using regular HTML and JS (you will find a lot of tutorials online on that).

  2. Convert that image to a PlayCanvas texture and apply it to your material.

Here is a helpful post that contains code and an example on how to do step 2.

2 Likes
3

Thanks for you’re answer , that’s pretty cool! But now the problem i have is to interact with my native html page with the Upload button made in Javascript with the Canvas Iframe. I saw there was a tutorial in the documentation to do it but I can’t reproduce it.

4

PlayCanvas scripts are regular JavaScript, meaning anywhere in your scripts you can access objects like window or document. For example you can access an HTML element via its ID like this:

// access an HTML element with ID button-upload
const buttonElement = document.getElementById('button-upload');

These example projects work like that:
https://developer.playcanvas.com/en/tutorials/?tags=html

2 Likes
5

You’re a legends thanks ! I have to put my html in the canvas files , I thought I could make myself an html page locally, and interact with it through the iframe , but infact I have to add my html/css files on the player canvas.

1 Like