Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

three.js change texture on material

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 ?

like image 349
Daniel Robinson Avatar asked Nov 27 '12 11:11

Daniel Robinson


1 Answers

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).

like image 199
Matthias Avatar answered Oct 18 '22 05:10

Matthias