# How to change the color and texture in uniforms three.js become image?

**URL:** <https://discourse.threejs.org/t/how-to-change-the-color-and-texture-in-uniforms-three-js-become-image/2057>\
**Category:** Questions\
**Tags:** textures\
**Created:** [March 7, 2018, 4:36am UTC](https://discourse.threejs.org/t/how-to-change-the-color-and-texture-in-uniforms-three-js-become-image/2057 "2018-03-07T04:36:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Muhamad\_Gofur](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@Muhamad\_Gofur](https://discourse.threejs.org/u/Muhamad_Gofur)\
**Post date:** [March 7, 2018, 4:36am UTC](https://discourse.threejs.org/t/how-to-change-the-color-and-texture-in-uniforms-three-js-become-image/2057/1 "2018-03-07T04:36:26Z")

</div>

```auto
var THREE = require('three');
var defaultTexture = require('./particle-texture.js');
var vertexShader = require('./particle-vertex-shader.js');
var fragmentShader = require('./particle-fragment-shader.js');

// var fixTexture = require('./index.png');
//var color = require ('/home/ubuntu/Training/pm-master/src/galaxy/native/defaultnode.js');
// //var defaultnode = require('./src/galaxy/native/defaultnode.js');
module.exports = createParticleMaterial;
// var texture = new THREE.Texture();
// var imageLoader = new THREE.ImageLoader(manager);
// createParticleMaterial(0xff00ff);
// var texture = THREE.ImageUtils.loadTexture("/home/ubuntu/Training/pm-master/node_modules/unrender/lib/index.png");
//
// texture.needsUpdate = true;
// imageLoader.load("index.png",function (image){
// texture.image = image;
// texture.needsUpdate = true;
// });
//obj.mesh.material.uniforms.texture.value = THREE.ImageUtils.loadTexture(defaultTexture);
var texture = new THREE.ImageLoader.load("aaaa.jpg");
//obj.mesh.material.uniforms.texture.needsUpdate = true;
texture.needsUpdate = true;
function createParticleMaterial() {

    var attributes = {
        size: {
            type: 'f',
            value: null
        },
        customColor: {
            type: 'c',
            value: null
        }
    };

    var uniforms = {
          color: {
              type:"c",
              value :new THREE.Color(0xffffff)
          },
        texture: {
            type: "t",
            value: texture
        }
    }

    var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        attributes: attributes,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
        transparent: false
    });

    return material;
}

```

---

<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:** [March 7, 2018, 7:37am UTC](https://discourse.threejs.org/t/how-to-change-the-color-and-texture-in-uniforms-three-js-become-image/2057/2 "2018-03-07T07:37:30Z")

</div>

What revision of Three.js do you use?

---

<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:** [March 7, 2018, 8:11am UTC](https://discourse.threejs.org/t/how-to-change-the-color-and-texture-in-uniforms-three-js-become-image/2057/3 "2018-03-07T08:11:03Z")

</div>

> [@Muhamad\_Gofur](#):
>
> var texture = new THREE.ImageLoader.load(“aaaa.jpg”);

You should load your texture like this:

```js
var loader = new THREE.TextureLoader();
var texture = loader.load( 'aaaa.jpg' );

```

No need to set `needsUpdate` to true. This happens automatically by `TextureLoader` when the texture is fully loaded.