THREE.JS从OBJ/MTL文件中途加载纹理

Question

我有一个从Cinema 4D输出的OBJ，MTL和纹理图像。设计师给了我一个ZIP里的文件。我正试图在THREE.JS的帮助下显示它们。我使用以下代码：

    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('shipka-obj/');
    mtlLoader.load('shipka.mtl', function (materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath('shipka-obj/');
        objLoader.load('shipka.obj', function (object) {
            scene.add(object);
        });
    });

问题是纪念碑漏掉了部分：

​

​

设计师说我做错了什么，但我看不出来是什么？求你了救命！谢谢。

编辑:我已经上传了zip与obj，mtl和纹理图像到Dropbox。这是一个链接。https://www.dropbox.com/s/ah8yhjadgihrihr/shipka-obj.zip?dl=0

Answer 1

你没做错什么。我看了一下你的OBJ，看起来这个几何学建模的人犯了几个错误：

Faces:

Three.js只能渲染三面(三角形).它理解四边形，它会自动细分成三角形，但它不知道如何处理有五个或更多边的脸。你得到的OBJ有很差的效果，有8张，12张，有时甚至是20面的脸！

​

​

正如您所看到的，在Three.js中没有呈现超过4条边的脸，但是四边和三边按预期呈现：

​

​

我建议你要求一个网格与更好的镶嵌。要求它的所有面孔被简化为四人或三人，以避免这个问题。

范数

在下面的图片中，您可以看到您的结构所处的平台上有指向内部的法线：

​

​

Three.js渲染器认为您希望这些面孔指向那个方向。这就是为什么你可以看到这个平台远处斜坡的底部，但不能看到离摄像机最近的那些：

​

​

我建议你让你的3d艺术家通过几何学，确保法线都面向向外的，而不是内向的，这样渲染器就能理解你想要渲染的脸的哪一边。

或者，您可以向渲染背面，或脸的两边。询问呈现器，但我不建议这样做，因为您将一整天都在选择对象。此外，渲染双方的计算成本更高。