Canvas Three.js-更改collada纹理有效，但不适用于画布

我正在深入研究Three.js，正在试验vrml，现在是collada文件

导入collada文件有效。它使用webGL和canvas作为后备：我的3D模型旋转，显示模型…在webGL中，我甚至可以产生像阴影、凹凸等美妙的效果

我确实实现了加载另一个纹理文件，并将其分配给webGL渲染器……但在这种情况下，画布渲染器完全失败：帧从60fps下降到2fps，纹理在多边形上“滑动”

我想我错过了一些东西，以便“修复”模型的纹理，或者在导入纹理时，我可能错过了一些参数？再一次，它在不改变纹理的情况下工作良好…但我真的需要这样做：p

以下是工作预览：

这里是魔术失败的地方：

//model loading
      loader = new THREE.ColladaLoader();
      loader.load('models/collada/7cm.005.dae',function colladaReady( collada ){
        player = collada.scene;
        skin = collada.skins [ 0 ];
        player.scale.x = player.scale.y = player.scale.z = 0.10;

        if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
          var newskinTexture = new THREE.ImageUtils.loadTexture( 'models/collada/dokMixer.png' );
          themodel = collada.scene.children[0];
          themodel.material = new THREE.MeshBasicMaterial( { map: newskinTexture, overdraw: true} );
        }
        else {
          var newskinTexture = new THREE.ImageUtils.loadTexture( 'models/collada/dokMixer.png' );
          var bumpTexture = new THREE.ImageUtils.loadTexture( 'models/collada/noise.png' );
          bumpTexture.anisotropy = 2;
          player_material = collada.scene.children[0].material;
          themodel = collada.scene.children[0];
          themodel.material = new THREE.MeshPhongMaterial( { map: newskinTexture, bumpMap: bumpTexture, bumpScale: 0.05} );
        }

        //utile pour avoir les ombres
        daemesh = player.children[0];
        daemesh.castShadow = true;
        daemesh.receiveShadow = true;

        scene.add( player ); 
      });

要研究的部分是第一条if语句（在扩展到其他支持画布的设备之前，我正在使用Safari测试画布）。指定新材质时，渲染器将完全失败。您可以使用Safari进入页面来测试效果

注意：我正在OSX上工作，如果这能提供任何相关信息的话

感谢您的帮助：）

---

编辑：我想我在这里设置了一个新材质，而不是只替换源图像文件？

好的，终于找到了一个解决方法

我为画布交换纹理的方式是错误的，我认为这是一个错误。 我发现了这个答案的线索

因此，我没有加载然后更改纹理，而是更改了ColladaLoader.js文件中的代码。嗯，几乎一样。由于我使用了“load”，我在load函数中添加了几次imageReload，并且在调用“parse”函数时。然后，在parse函数中，我也做了一些更改，因为给出的代码在它们的链接上是错误的。 对于那个些感兴趣的人，一个变更列表，以及我的最终代码。遗憾的是，我无法实现“相同”的功能（发送一组纹理，执行regExp操作，并同时替换多个纹理），这部分对我来说有缺陷，因为我只需要更改一个纹理文件

• 我不做iamge.init\u from=iR.new\u image；在regExp循环中，添加image.init_from=iR；就在regExp事件之前
• 在我的文件中调用函数时，我发送了一个数组…它没有文档记录，没有示例，很难理解它。好的，不要试图直接发送.png或.jpeg url，在调用该数组的函数之前和函数中，将这些名称放在一个表中。不要忘记删除路径，因为它应该与collada文件中描述的路径相同（因此，在我的例子中，只需纹理名称，因为我的collada文件与纹理共享同一文件夹）
• 在psychok的代码中，显然在“parseLib”调用中有一个错误，他编写了类似parseLib的东西（“//dae:library\u materials/dae:material”，material，“material”）；而不是parseLib（“库材料”，材料，“材料”）；（正在工作，是原始代码）

长话短说，下面是我称之为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 ); 
      });

这是colladaLoader中的代码。它取代了函数load和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;

}

函数加载（url、imageReplace、readyCallback、progressCallback）{
变量长度=0；
if（document.implementation&&document.implementation.createDocument）{
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
if（request.status==0 | | request.status==200）{
if（request.responseXML）{
readyCallbackFunc=readyCallback；
解析（request.responseXML，imageReplace，未定义，url）；
}else if（request.responseText）{
readyCallbackFunc=readyCallback；
var xmlParser=new DOMParser（）；
var responseXML=xmlParser.parseFromString（request.responseText，“application/xml”）；
解析（responseXML、imageReplace、未定义、url）；
}否则{
错误（“ColladaLoader:空的或不存在的文件（“+url+”））；
}
}
}else if（request.readyState==3）{
if（progressCallback）{
如果（长度==0）{
长度=request.getResponseHeader（“内容长度”）；
}
progressCallback（{total:length，loaded:request.responseText.length}）；
}
}
}
打开（“获取”，url，true）；
请求发送（空）；
}否则{
警告（“不知道如何解析XML！”）；
}
}
函数解析（doc、imageReplace、回调、url）{
COLLADA=doc；
回调=回调| | readyCallbackFunc；
如果（url！==未定义）{
var parts=url.split（'/'）；
parts.pop（）；
baseUrl=（parts.length<1？）：parts.join（“/”）+“/”；
}
parseAsset（）；
setUpConversion（）；
images=parseLib（“库图像”、“图像”、“图像”）；
用于（imageReplace中的var i）{
var iR=图像替换[i]；
用于（图像中的变量i）{
var image=images[i]；
//添加了线条，但没有多个纹理！
image.init_from=iR；
//RegExp和patt.test不工作
var patt=新的RegExp（'[a-zA-Z0-9\-\\\\\\\\]*\/'+iR.name，'g'）；
//if（image.id==iR.id）
//
if（部分测试（图像初始化自））
image.init_from=iR.new_image；
}//为了
}
materials=parseLib（“库\材料”，材料，“材料”）；
effects=parseLib（“库_effects effect”，effect，“effect”）；
几何体=parseLib（“库”\u geome