Three.js部分拉伸纹理

Question

我正在使用Collada加载程序在Three.js r65中加载3D对象。 在加载回调中，我使用以下代码立即将纹理应用于模型的所有部分。

var loader = new THREE.ColladaLoader();

loader.options.convertUpAxis = true;
loader.load('obj/cdg/Grenada-test1.dae', function(collada) {

    var texture = new THREE.ImageUtils.loadTexture("../models/textures/Gr1 08869 Bready Grey.jpg");


    var material = new THREE.MeshPhongMaterial({map: texture, tranparent: true});
    for (var i = 0; i < collada.scene.children.length; i++) {
        collada.scene.children[i].material = material;
    }

});

在Three.js中，它看起来像这样（在某些位置拉伸了纹理）。

该对象在应用了纹理的Unity 3D中显示良好，请参见下图。

我试过的

• 在Three.js和Blender中更新UV贴图
• 将模型加载到其他程序（Unity 3D）中，以查看是否出现问题
• 搜索了许多SO问题，但无济于事

有人知道这里发生了什么吗，我如何解决这个奇怪的纹理问题？

提前致谢！

编辑：

这就是texture.repeat.set( 2, 2 )样子

这就是texture.repeat.set( 10, 10 )样子

重复的纹理使纹理消失，并且单色取代了纹理。

Answer 1

将wrapS和wrapT属性设置为THREE.RepeatWrapping ：

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

并确保您的纹理是“ 2的幂”。 即16x16、32x32、64x64、128x64等

Answer 2

您是否尝试过开启纹理重复功能？ 像这样：

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 2, 2 );

Answer 3

好的..但是如何在同一个对象上应用多个纹理？ 有什么办法吗？

您可能要使用materialArray并为要纹理化的每个顶点面添加不同的纹理。