Okay, finally found a workaround !
The way i swapped texture was wrong for canvas, i assume it is a bug. I found a clue on this answer by psychok7.
So well, instead of loading and THEN changing a texture… i changed the code in the ColladaLoader.js file. Well, almost the same. Since i use "load" i added a couple times imageReload in the load function, and when calling the "parse" function. Then, in the parse function i did some changes too as the code given was wrong on their link. For those interested, a list of the changes, and my final code. Sadly i couldn't achieve the "same" functionnalities (sending an array of textures, doing the regExp thing, and replacing several textures at once), this part was buggy for me, and since i needed to change only one texture file…
- i don't do iamge.init_from = iR.new_image; in the regExp loop stuff… but instead add image.init_from = iR; just before the regExp thing.
- When calling the function in my file, i send an array… it was not documented, no examples, and had a hard time understanding it. Well, don't try to directly send the .png or .jpeg url, put that names in a table before and in the function call that array. Don't forget to remove the paths, as it should be the same path as described INSIDE your collada file (so in my case, just the texture name, as my collada file shares the same folder as the textures).
- in the code of psychok, there was obviously a mistake in the "parseLib" calls, where he writes stuff like parseLib( "//dae:library_materials/dae:material", Material, "material" ); instead of parseLib( "library_materials material", Material, "material" ); (which is working, and is the original code).
So, long story short, here's the code where i call the collada
loader = new THREE.ColladaLoader();
newtextures = ['dokMixer.png'];
loader.load('models/collada/7cm.005.dae', newtextures,function colladaReady( collada ){
player = collada.scene;
skin = collada.skins [ 0 ];
player.scale.x = player.scale.y = player.scale.z = 0.10;
//i'll add code here later for extra bump mapping on webgl versions
//usefull for shadows on webgl version
daemesh = player.children[0];
daemesh.castShadow = true;
daemesh.receiveShadow = true;
scene.add( player );
});
And here's the code inside the colladaLoader. It is a replacement of the functions load, and parse.
function load ( url, imageReplace, readyCallback, progressCallback ) {
var length = 0;
if ( document.implementation && document.implementation.createDocument ) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if( request.readyState == 4 ) {
if( request.status == 0 || request.status == 200 ) {
if ( request.responseXML ) {
readyCallbackFunc = readyCallback;
parse( request.responseXML, imageReplace, undefined, url );
} else if ( request.responseText ) {
readyCallbackFunc = readyCallback;
var xmlParser = new DOMParser();
var responseXML = xmlParser.parseFromString( request.responseText, "application/xml" );
parse( responseXML, imageReplace, undefined, url );
} else {
console.error( "ColladaLoader: Empty or non-existing file (" + url + ")" );
}
}
} else if ( request.readyState == 3 ) {
if ( progressCallback ) {
if ( length == 0 ) {
length = request.getResponseHeader( "Content-Length" );
}
progressCallback( { total: length, loaded: request.responseText.length } );
}
}
}
request.open( "GET", url, true );
request.send( null );
} else {
alert( "Don't know how to parse XML!" );
}
}
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( "library_images image", _Image, "image" );
for(var i in imageReplace) {
var iR = imageReplace[i];
for(var i in images) {
var image = images[i];
//added line, but no multiple textures !
image.init_from = iR;
//RegExp and patt.test not working
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( "library_materials material", Material, "material" );
effects = parseLib( "library_effects effect", Effect, "effect" );
geometries = parseLib( "library_geometries geometry", Geometry, "geometry" );
cameras = parseLib( "library_cameras camera", Camera, "camera" );
lights = parseLib( "library_lights light", Light, "light" );
controllers = parseLib( "library_controllers controller", Controller, "controller" );
animations = parseLib( "library_animations animation", Animation, "animation" );
visualScenes = parseLib( "library_visual_scenes visual_scene", VisualScene, "visual_scene" );
// 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;
}
Hope this helps someone ! Have fun ! :)