Three.js 部分拉伸纹理答案

【问题标题】：Three.js partially stretched textureThree.js 部分拉伸纹理
【发布时间】：2014-04-15 03:32:41
【问题描述】：

我正在使用 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 ) 的样子

纹理重复使纹理消失，纯色正在取代纹理...

【问题讨论】：

在 Three.js 中搜索不同的夹紧方式。

标签： javascript three.js textures webgl collada

【解决方案1】：

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

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

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

【讨论】：

纹理的“2 的幂”规则起到了作用，感谢您为我指明了正确的方向！
好的..但是我如何在同一个对象上应用多个纹理？有什么解决办法吗？

【解决方案2】：

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

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

【讨论】：

我已经用纹理重复的结果更新了我的问题。不幸的是，它没有按预期工作......

【解决方案3】：

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

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

【讨论】：