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

Questions
1 
scene.onPointerPick = (evt, pickInfo) => {
      console.log(
        `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 ?

2 
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

3

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

4

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

5

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

6

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

7

you can use this or maybe is some method for mesh

8

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 = evt.target.files;
var filename = files[0].name;
var blob = new Blob([files[0]]);
BABYLON.FilesInput.FilesToLoad[filename.toLowerCase()] = blob;

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

Thank you very much for your help :slightly_smiling_face:

1 Like
10

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