How to replace Collada-imported textures with ShaderMaterial ones in Three.js?

Question

Is there a way to replace all textures in a simple 3D model imported via Collada loader in the Three.js library?

What I'd like to accomplish is to apply colour, specular and normal maps to the model via ShaderMaterial by pointing to new files with the model's material names but added "-color", "-normal" and "-spec" wording:

"brochureFrontCover" -> "brochureFrontCover-color.jpg", "brochureFrontCover-normal.jpg", "brochureFrontCover-spec.jpg"

If any good soul could show me how such function should look, I'd be very grateful.

The script: http://dev.printhouse.co.uk/uv-simulator/j/Brochure.js

Collada model: http://dev.printhouse.co.uk/uv-simulator/m/Brochure.dae

mrdoob mrdoob · Accepted Answer · 2012-05-28T14:16:40

I think it should be something like this:

THREE.SceneUtils.traverseHierarchy( dae, function ( child ) {

    if ( child.material ) {

        var shader = THREE.ShaderUtils.lib[ "normal" ];
        var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

        uniforms[ "tDiffuse" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-color.jpg" );
        uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-normal.jpg" );
        uniforms[ "tSpecular" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-spec.jpg" );

        uniforms[ "enableDiffuse" ].value = true;
        uniforms[ "enableSpecular" ].value = true;

        child.geometry.computeTangents();

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

    }

} );

This example should be a good reference if you need to tweak uniforms.

How to replace Collada-imported textures with ShaderMaterial ones in Three.js?

1 Answers