Three.js-更改collada纹理的作品,但不适用于画布

dokMixer

我正在研究Three.js,正在尝试vrml,现在正在使用collada文件。

导入collada文件即可。它可以与webGL和canvas一起使用,作为后备:我的3D模型旋转,显示模型……并且在webGL中,我什至可以具有阴影,凹凸等奇妙的效果。

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

我想为了将纹理“修复”到模型而错过了一些东西,或者在导入纹理时也许错过了一些参数?再次,它可以在不更改纹理的情况下正常工作……但是我真的需要这样做:p

这是工作预览:http : //dokmixer.com/three-tests/

这是魔术失败的部分:

//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。

任何帮助表示赞赏:)

编辑:我想我在这里设置一种新的材料,而不是仅替换源图像文件?

dokMixer

好的,终于找到了解决方法!

我交换纹理的方式对于画布是错误的,我认为这是一个错误。我找到了psychok7的答案的线索

很好,而不是加载然后更改纹理……我更改了ColladaLoader.js文件中的代码。好吧,几乎一样。因为我使用“加载”,所以我在加载函数中以及调用“解析”函数时添加了两次imageReload。然后,在解析函数中我也做了一些更改,因为给定的代码在其链接上是错误的。对于那些感兴趣的人,列出了所做的更改以及我的最终代码。可悲的是,我无法实现“相同的”功能(发送一组纹理,执行regExp并立即替换多个纹理),这部分对我来说是个问题,因为我只需要更改一个纹理文件…

  • 我不做iamge.init_from = iR.new_image; 在regExp循环中…而是添加image.init_from = iR; 就在regExp之前。
  • 当在我的文件中调用该函数时,我发送了一个数组……它没有记录,没有示例,并且很难理解它。好吧,不要尝试直接发送.png或.jpeg网址,将名称放在表格的函数调用前和表格中。不要忘记删除路径,因为它应该与collada文件中所述的路径相同(因此,在我的情况下,仅是纹理名称,因为collada文件与纹理共享同一文件夹)。
  • 在psychok的代码中,“ parseLib”调用中显然有一个错误,在那里他编写了诸如parseLib(“ // dae:library_materials / dae:material”,Material,“ material”)之类的东西;代替parseLib(“ library_materials material”,Material,“ material”); (正在运行,并且是原始代码)。

所以,长话短说,这是我称之为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中的代码。它代替了函数加载和解析。

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;

}

希望这对某人有帮助!玩得开心 !:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

转换矩阵不适用于Three.js

来自分类Dev

地图不适用于three.js对象

来自分类Dev

Three.js不可见平面不适用于raycaster.intersectObject

来自分类Dev

FaceNormalsHelper()不适用于我创建的网格-THREE.js

来自分类Dev

Three.JS r71:透明渲染器不适用于后期处理滤镜

来自分类Dev

Three.js-更新纹理

来自分类Dev

使用Three.js仅将纹理应用于画布单击

来自分类Dev

JS适用于Chrome,但不适用于Firefox

来自分类Dev

JS适用于Chrome,但不适用于Firefox

来自分类Dev

JS适用于Firefox和Safari,但不适用于Chrome。这是我的网站

来自分类Dev

背景图像适用于 CSS 但不适用于 Webpack 的 JS

来自分类Dev

单击适用于 jQuery 但不适用于 vanilla js

来自分类Dev

使用Three.js使用画布旋转纹理

来自分类Dev

Gulp.js-`watch`不适用于`typescript`更改,但适用于`html,css`更改

来自分类Dev

Three.js-拖动Collada文件

来自分类Dev

Three.js更改网格纹理会更改整个模型

来自分类Dev

Node.js API-适用于Postman,但不适用于Angular.js

来自分类Dev

在three.js中动态更改特定面孔的纹理

来自分类Dev

Three.js JSON运行时更改材料(纹理)

来自分类Dev

Three.js:在运行时更改纹理

来自分类Dev

three.js:BufferGeometry和纹理

来自分类Dev

Three.js透明模型纹理错误

来自分类Dev

Three.js使用framebuffer作为纹理

来自分类Dev

使用Three.js进行纹理喷涂

来自分类Dev

用户在three.js中上传纹理

来自分类Dev

three.js从cubecamera创建纹理

来自分类Dev

在THREE.js中纹理球体

来自分类Dev

THREE.js-无法在本地加载纹理

来自分类Dev

如何水平翻转Three.js纹理