# Cannot update texture successfully

**URL:** <https://discourse.threejs.org/t/cannot-update-texture-successfully/13038>\
**Category:** Questions\
**Tags:** loaders, textures\
**Created:** [February 25, 2020, 2:04pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038 "2020-02-25T14:04:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Momohanfeng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/momohanfeng/32/9741_2.png) [@Momohanfeng](https://discourse.threejs.org/u/Momohanfeng)\
**Post date:** [February 25, 2020, 2:04pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/1 "2020-02-25T14:04:09Z")

</div>

I want to change texture on a cube, but I cannot watch the texture update when I load the image and set the needsUpdate=true.

```auto
let geometry=new THREE.BoxGeometry(2,2,2)；
let material = new THREE.MeshBasicMaterial();
let cube =new THREE.Mesh(geometry,material);
scene.add(cube);
let loader = new THREE.TextureLoader();
loader.load(url, function(tex){
            material.map = tex;
            material.map.needsUpdate=true
}};

```

these code cannot update the texture on the cube, how to change the cube textures dynamically, thank you！

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 25, 2020, 2:07pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/2 "2020-02-25T14:07:58Z")

</div>

The following example changes the texture after 1 second:

[https://jsfiddle.net/osdmwevn/](https://jsfiddle.net/osdmwevn/)

Use it as a template for your code.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 25, 2020, 2:10pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/3 "2020-02-25T14:10:28Z")

</div>

From your code, there is no texture on the box initially.

Try  
`material.needsUpdate = true;`  
instead of  
`material.map.needsUpdate = true;`

---

<div class="post-metadata">

**Author:** ![Momohanfeng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/momohanfeng/32/9741_2.png) [@Momohanfeng](https://discourse.threejs.org/u/Momohanfeng)\
**Post date:** [February 25, 2020, 2:22pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/4 "2020-02-25T14:22:18Z")

</div>

yes, I try your code, but the texture will not be update. do you have any other way to update texture dynamically?

---

<div class="post-metadata">

**Author:** ![Momohanfeng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/momohanfeng/32/9741_2.png) [@Momohanfeng](https://discourse.threejs.org/u/Momohanfeng)\
**Post date:** [February 25, 2020, 2:24pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/5 "2020-02-25T14:24:20Z")

</div>

Thanks, but setTimeout is not a good way to implement the function, do you know if 3js offer some offcial codes to update texture dynamically?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 25, 2020, 2:39pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/6 "2020-02-25T14:39:35Z")

</div>

Do you mean you want to change the context of an existing texture?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 25, 2020, 2:44pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/7 "2020-02-25T14:44:58Z")

</div>

Slightly changed @Mugen87’s example: [https://jsfiddle.net/o91pz0xe/](https://jsfiddle.net/o91pz0xe/)  
works as expected with `material.needsUpdate = true;`

As far as I can understand, there are two things, happening in your code: 1. Loading of a texture is asynchronous operation, 2. Compiling of shaders happens before your texture is loaded.

When you create material without `map` property, it compiles shaders without `#define USE_MAP` and many other things, and there is no uniform for that texture. And you have exactly this thing, as your texture was not loaded yet, but shaders are already compiled.  
Then your texture is loaded, but shader doesn’t have the respect uniform and `define`'s. That’s why you need to set `material.needsUpdate = true`, so shader will be recompiled with all the features to use the texture as a map.  
Pheww… I hope you got what I mean. Anybody can correct me, if I’m wrong 🙂

---

<div class="post-metadata">

**Author:** ![Momohanfeng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/momohanfeng/32/9741_2.png) [@Momohanfeng](https://discourse.threejs.org/u/Momohanfeng)\
**Post date:** [February 25, 2020, 3:00pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/8 "2020-02-25T15:00:51Z")

</div>

Yes, I change my code below:

```auto
let material = new THREE.MeshBasicMaterial({map: new THREE.Texture()});

```

and the texture can be update after textureloader load it successfully.  
Thank you for your explanation!

---

<div class="post-metadata">

**Author:** ![Momohanfeng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/momohanfeng/32/9741_2.png) [@Momohanfeng](https://discourse.threejs.org/u/Momohanfeng)\
**Post date:** [February 25, 2020, 3:04pm UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/9 "2020-02-25T15:04:27Z")

</div>

I just want to update the texture if the texture load completely. And @prisoner849 said that I create the material without ‘map:xxxx’, this behavior will cause 3js compiles shaders without #define USE\_MAP.

So it works successfully when I add the missing code. thank you two.

---

<div class="post-metadata">

**Author:** ![sourabh\_kumar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sourabh_kumar/32/23995_2.png) [@sourabh\_kumar](https://discourse.threejs.org/u/sourabh_kumar)\
**Post date:** [March 17, 2022, 7:24am UTC](https://discourse.threejs.org/t/cannot-update-texture-successfully/13038/10 "2022-03-17T07:24:39Z")

</div>

Thanks man, you helped me