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

**URL:** <https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065>\
**Category:** Questions\
**Tags:** mesh\
**Created:** [January 25, 2022, 7:50am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065 "2022-01-25T07:50:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![yigitozdamar](https://avatars.discourse-cdn.com/v4/letter/y/82dd89/32.png) [@yigitozdamar](https://forum.babylonjs.com/u/yigitozdamar)\
**Post date:** [January 25, 2022, 7:50am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/1 "2022-01-25T07:50:34Z")

</div>

```auto
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 ?

---

<div class="post-metadata">

**Author:** ![IgorSushko1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/igorsushko1/32/14671_2.png) [@IgorSushko1](https://forum.babylonjs.com/u/IgorSushko1)\
**Post date:** [January 25, 2022, 7:56am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/2 "2022-01-25T07:56:00Z")

</div>

```auto
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

---

<div class="post-metadata">

**Author:** ![yigitozdamar](https://avatars.discourse-cdn.com/v4/letter/y/82dd89/32.png) [@yigitozdamar](https://forum.babylonjs.com/u/yigitozdamar)\
**Post date:** [January 25, 2022, 7:58am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/3 "2022-01-25T07:58:46Z")

</div>

> [@IgorSushko1](#):
>
> ```auto
> const pbr = new BABYLON.PBRMetallicRoughnessMaterial('pbr', this.scene);
> this.scene.meshes[0].material = pbr;
> pbr.baseTexture = new BABYLON.Texture(this.dataURL, this.scene);
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![IgorSushko1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/igorsushko1/32/14671_2.png) [@IgorSushko1](https://forum.babylonjs.com/u/IgorSushko1)\
**Post date:** [January 25, 2022, 8:10am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/4 "2022-01-25T08:10:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yigitozdamar](https://avatars.discourse-cdn.com/v4/letter/y/82dd89/32.png) [@yigitozdamar](https://forum.babylonjs.com/u/yigitozdamar)\
**Post date:** [January 25, 2022, 8:14am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/5 "2022-01-25T08:14:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![IgorSushko1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/igorsushko1/32/14671_2.png) [@IgorSushko1](https://forum.babylonjs.com/u/IgorSushko1)\
**Post date:** [January 25, 2022, 8:23am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/6 "2022-01-25T08:23:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![IgorSushko1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/igorsushko1/32/14671_2.png) [@IgorSushko1](https://forum.babylonjs.com/u/IgorSushko1)\
**Post date:** [January 25, 2022, 8:28am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/7 "2022-01-25T08:28:16Z")

</div>

> **[Scene | Babylon.js Documentation](https://doc.babylonjs.com/typedoc/classes/babylon.scene#onpointerdown)**
>
> Represents a scene to be rendered by the engine. \[API\]

you can use this or maybe is some method for mesh

> **[Mesh Behaviors | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/behaviors/meshBehaviors)**
>
> Everything you want to know about mesh behaviors.

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [January 25, 2022, 3:12pm UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/8 "2022-01-25T15:12:53Z")

</div>

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?

```auto

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;

```

> **[Babylon.js Playground](https://playground.babylonjs.com/#SA6QBM%2337)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![yigitozdamar](https://avatars.discourse-cdn.com/v4/letter/y/82dd89/32.png) [@yigitozdamar](https://forum.babylonjs.com/u/yigitozdamar)\
**Post date:** [January 27, 2022, 9:42am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/9 "2022-01-27T09:42:36Z")

</div>

Thank you very much for your help 🙂

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 24, 2022, 11:49am UTC](https://forum.babylonjs.com/t/how-can-i-change-a-mesh-image-or-video-texture-with-mouse-click/27065/10 "2022-02-24T11:49:46Z")

</div>

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