加载纹理中的伪像-三个js

时间:2018-08-23 11:32:02

标签: three.js 3d textures

我正在尝试使用UV贴图渲染对象,并通过三个JS使用加载的图像更新纹理。我的问题是,渲染结果上存在伪影。为什么会这样?

enter image description here

注意:

  • 对象来自gltf文件
  • 我用Blender创建了模型
  • 我使用KhronosGroup的Blender gltf导出器导出模型
  • 图像纹理大3239x2745

这是我的代码

var inside_image = load_image("texture/inside.jpg");
var outside_image = load_image("texture/outside.jpg");
var textures      = [];

Promise.all([inside_image, outside_image]).then((images)=>{
    console.log('image', images);
    for (var i in images) {
        var canvas = document.createElement('canvas');
        var compositeTexture = new THREE.Texture(canvas);
        compositeTexture.wrapS = compositeTexture.wrapT = THREE.RepeatWrapping;
        compositeTexture.repeat.y = -1;
        var ctx = canvas.getContext('2d');
        canvas.width = images[i].width;
        canvas.height = images[i].height;
        ctx.globalCompositeOperation = 'source-over';
        ctx.fillRect(0,0,0,0);

        ctx.drawImage(images[i], 0, 0, images[i].width, images[i].height);
        compositeTexture.needsUpdate = true;
        textures.push(compositeTexture);
    }

        loader.load(
        'http://local.webgl.com/model.gltf',
        function ( gltf ) {
            console.log('gltf', gltf);
            gltf.scene.traverse( function ( child ) {

                if ( child.isMesh ) {
                    if (child.material.name == "Inside") {
                        child.material.map = textures[0];
                    } else {
                        child.material.map = textures[1];
                    }
                console.log('child', child);
                }
            });


            scene.add(gltf.scene);

            // mixer = new THREE.AnimationMixer(gltf.scene);
            // animations = gltf.animations;
        },
        // called when loading is in progresses
        function ( xhr ) {

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {

            console.log( 'An error happened', error );

        }
    );

});

0 个答案:

没有答案