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);
        });
    });

问题是纪念碑缺少部分：

设计师说我做错了什么，但我看不出是什么？请帮忙！谢谢。

编辑：我已经将包含 obj、mtl 和纹理图像的 zip 上传到 Dropbox。这里有一个link。 https://www.dropbox.com/s/ah8yhjadgihrihr/shipka-obj.zip?dl=0

Answer 1

你没有做错任何事。我看了你的OBJ，看起来建模几何的人犯了一些错误：

面孔：

Three.js只能渲染三边面（三角形）。它理解四边形，它会自动将其细分为三角形，但它不知道如何处理具有五个或更多边的面。给你的 OBJ 的曲面细分很差，有八个、十二个，有时甚至是 20 个面！

如您所见，在 Three.js 中未渲染具有 4 个以上边的面，但四边形和三边形按预期渲染：

我建议您申请一个细分效果更好的网格。要求将其所有面缩小为四边形或三边形以避免此问题。

法线

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

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

我建议您让您的 3d 美工检查几何体并确保法线全部朝向向外而不是向内，这样渲染器就会了解您的面的哪一侧想要渲染。

或者，您可以要求渲染器 render the backside, or both sides of faces，但我不推荐这样做，因为您将整天都在挑选对象。此外，渲染两侧的计算成本更高。

THREE.JS 从 OBJ/MTL 文件中加载纹理到一半

THREE.JS loads the textures from an OBJ/MTL file half way

3d

cinema-4d

three.js