我的Three.js场景中单个对象上的UV变形

Question

我已经把一个房子的三维模型拼凑起来了，现在我又陷入了另外一个加剧的障碍，就像那三个人一样。我已经习惯了。

我在Maya中创建我的场景并使用OBJ导出器编写obj和mtl文件然后导入到three.js中。我的场景中有大约9个物体，未分组，仅限于世界的儿童，历史记录被删除，以及具有环境遮挡和光照的纹理贴图通过shadingMaps分配给它们。

实际上我实际上没有运气使用mtl文件，所以我只是复制了我的纹理贴图并单独加载它们并在three.js中创建了它们的材料。

现在，除了最简单的一个，墙壁和地板对象之外，所有这些对象在浏览器中看起来都很好。这就是Maya中对象的样子：

正如你所看到的，一个相当简单的网格，在Maya中看起来很漂亮。

我了解到，当我将对象导出到obj文件时，只支持一个UV通道，因此我将UV复制到默认通道并在导出前删除所有其他UV通道。这是UV贴图：

但是当我在浏览器中分配这些材料时，我会得到一个奇怪的纹理失真：

就像紫外线到处都是。如果对于那些显示正常的其他8个（更复杂的，介意的）对象，我会非常怀疑我的方法是否接近目标。 ，包括我从有问题的部分切出的部分墙壁，这是浴室的一部分。

有没有人知道如何解决这个问题？我试过从Maya直接输出js，但我对这种方法有更多的问题。我已经尝试使用基于嵌入式浏览器的转换器将obj文件转换为js。我花了好几天时间，并没有取得任何进展。

这里有一些相关的代码。

scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true} );

var wallTexture = THREE.ImageUtils.loadTexture("obj/final_walls.jpg");
var wallMaterial = new THREE.MeshLambertMaterial( {color: 0x929EAC, map:wallTexture} );

var manager = new THREE.LoadingManager();
var loader = new THREE.OBJMTLLoader( manager );
loader.load( 'obj/wallOnly.obj','obj/wallOnly.mtl', function ( object ) {
    object.children[2].material = wallMaterial; 
    floorplan.add(object);
    camera.lookAt( object );
} );

请帮助!!

Answer 1

OMG！在我的头穿过墙后，我终于找到了解决方案！

我发现这个问题并没有像uv面孔的随机交换一样对纹理造成扭曲。那就对了！出于某种原因，webGL渲染器随机地将对象的某些面与其他面交换。

完全巧合我把我的网格变成了四边形而不是三角形，瞧！它修复了一切。四边形!!!我在三角形上浪费了3天的实力！