How can I change a mesh image or video texture with mouse click?

scene.onPointerPick = (evt, pickInfo) => {
        `Clicked Mesh: ${pickInfo?.pickedMesh?.name} - Clicked Material: ${pickInfo?.pickedMesh?.material?.name}`

I can choose a mesh but I dont know how to change it’s texture. Can you help me ?

const pbr = new BABYLON.PBRMetallicRoughnessMaterial('pbr', this.scene);
        this.scene.meshes[0].material = pbr;
        pbr.baseTexture = new BABYLON.Texture(this.dataURL, this.scene);

Hi! its very easy - you can use creating texture every time then texture has changed

Thanks IgorSushko1
can I choose the file from the file browser?

i think you can add some input to drag file from pc or phone and then use it image like a texture

Isn’t it possible to change the texture of a mesh with click in babylon ? do I have to use input html tag ? By the way I am really thankful for your helps

if you downloaded a few texture you can change them like you want, in babylon you can pick objects and handle clicks

you can use this or maybe is some method for mesh

Hey @yigitozdamar

Here is some additional information about the file browser piece. I don’t know if it is possible to do it directly by clicking the mesh.

In this demo, we are parsing the file to load in a mesh but you can modify it to do a texture instead. Perhaps something like this?

var files =;
var filename = files[0].name;
var blob = new Blob([files[0]]);
BABYLON.FilesInput.FilesToLoad[filename.toLowerCase()] = blob;

this.scene.meshes[0].material = filename;

Thank you very much for your help :slightly_smiling_face:

1 Like

Hello @yigitozdamar just checking in, has your question been answered? :smiley: