I'm setting up a texture on a mesh in three.js and when it loads it looks how I want it too:

        texture = THREE.ImageUtils.loadTexture("textures/hash.png");

        texture.needsUpdate = true;

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

        vertexShader = "varying vec2 vUv; void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}",

        fragmentShader = "uniform vec3 color; uniform sampler2D texture; varying vec2 vUv; void main() { vec4 tColor = texture2D( texture, vUv ); gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );}",

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

but I want to change the texture that is on this mesh later on, I have tried this:

obj.mesh.material.uniforms.texture = THREE.ImageUtils.loadTexture("textures/1.png");
obj.mesh.material.uniforms.texture.needsUpdate = true;

but this doesn't change the texture being displayed on the mesh, how can I change a texture on a THREE.ShaderMaterial ?

I'm setting up a texture on a mesh in three.js and when it loads it looks how I want it too:

        texture = THREE.ImageUtils.loadTexture("textures/hash.png");

        texture.needsUpdate = true;

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

        vertexShader = "varying vec2 vUv; void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}",

        fragmentShader = "uniform vec3 color; uniform sampler2D texture; varying vec2 vUv; void main() { vec4 tColor = texture2D( texture, vUv ); gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );}",

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

but I want to change the texture that is on this mesh later on, I have tried this:

obj.mesh.material.uniforms.texture = THREE.ImageUtils.loadTexture("textures/1.png");
obj.mesh.material.uniforms.texture.needsUpdate = true;

but this doesn't change the texture being displayed on the mesh, how can I change a texture on a THREE.ShaderMaterial ?

• javascript
• textures
• three.js

• 1 Try assigning it to obj.mesh.material.uniforms.texture.value like you did before. Also consider setting the needsUpdate flag after the texture has successfully loaded (subscribing to the load event). – Matthias Commented Nov 27, 2012 at 11:25
• you were right I needed to assign it to texture.value, thanks – Daniel Robinson Commented Nov 27, 2012 at 13:30
• Nice. I added an answer so you can close this question. – Matthias Commented Nov 27, 2012 at 14:30

1 Answer 1

Assign the texture to obj.mesh.material.uniforms.texture.value instead. Also consider setting the needsUpdate flag after the texture has successfully loaded (by subscribing to the load event).