Changing texture and color on Three.js collada object

Question

I recently got three.js example from the official site working with my collada objects (.dae) using the ColladaLoader.js. Now my question is, how do i change t

Answer 1

One thing you can do is modify your collada model (dae file) locate the texture reference there and change it to your liking.

Answer 2

if ( url !== undefined ) {
    var parts = url.split( '/' );
    parts.pop();
    baseUrl = ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';

}

parseAsset();
setUpConversion();
images = parseLib( "//dae:library_images/dae:image", _Image, "image" );

for(var i in imageReplace) {
    var iR = imageReplace[i];

    for(var i in images) {
        var image = images[i];

        var patt=new RegExp('[a-zA-Z0-9\-\_]*\/'+iR.name,'g');

        //if(image.id==iR.id)
        if(patt.test(image.init_from))
            image.init_from = iR.new_image; 
    }//for
}

Answer 3

You can override your collada scene materials recursively with this kind of function. It goes through the whole hierarchy and assigns a material.

var setMaterial = function(node, material) {
  node.material = material;
  if (node.children) {
    for (var i = 0; i < node.children.length; i++) {
      setMaterial(node.children[i], material);
    }
  }
}

Use it like setMaterial(dae, new THREE.MeshBasicMaterial({color: 0xff0000}));

You could probably adapt that to modify the existing material properties instead of assigning a new one, if needed.

Answer 4

After many problems, we wrote a small hack in ColladaLoader.js taking the idea from @gaitat witch basically replaces the old path to the textures from the images, passing some new ones in an array, and using regular expressions to parse the xml for the .png or .jpg under images tag. Not sure if there is an easier way but since support was limited we had to come up with a fix somehow

function parse( doc, imageReplace, callBack, url ) {

    COLLADA = doc;
    callBack = callBack || readyCallbackFunc;

    if ( url !== undefined ) {

        var parts = url.split( '/' );
        parts.pop();
        baseUrl = ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';

    }

    parseAsset();
    setUpConversion();
    images = parseLib( "//dae:library_images/dae:image", _Image, "image" );

    for(var i in imageReplace) {
        var iR = imageReplace[i];

        for(var i in images) {
            var image = images[i];

            var patt=new RegExp('[a-zA-Z0-9\-\_]*\/'+iR.name,'g');

            //if(image.id==iR.id)
            if(patt.test(image.init_from))
                image.init_from = iR.new_image; 
        }//for
    }

    materials = parseLib( "//dae:library_materials/dae:material", Material, "material" );
    effects = parseLib( "//dae:library_effects/dae:effect", Effect, "effect" );
    geometries = parseLib( "//dae:library_geometries/dae:geometry", Geometry, "geometry" );
    cameras = parseLib( ".//dae:library_cameras/dae:camera", Camera, "camera" );
    controllers = parseLib( "//dae:library_controllers/dae:controller", Controller, "controller" );
    animations = parseLib( "//dae:library_animations/dae:animation", Animation, "animation" );
    visualScenes = parseLib( ".//dae:library_visual_scenes/dae:visual_scene", VisualScene, "visual_scene" );

    morphs = [];
    skins = [];

    daeScene = parseScene();
    scene = new THREE.Object3D();

    for ( var i = 0; i < daeScene.nodes.length; i ++ ) {

        scene.add( createSceneGraph( daeScene.nodes[ i ] ) );

    }

// unit conversion
scene.position.multiplyScalar(colladaUnit);
scene.scale.multiplyScalar(colladaUnit);

    createAnimations();

    var result = {

        scene: scene,
        morphs: morphs,
        skins: skins,
        animations: animData,
        dae: {
            images: images,
            materials: materials,
            cameras: cameras,
            effects: effects,
            geometries: geometries,
            controllers: controllers,
            animations: animations,
            visualScenes: visualScenes,
            scene: daeScene
        }

    };

    if ( callBack ) {

        callBack( result );

    }

    return result;

};