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

时间:2017-07-25 10:09:07

标签: 3d three.js cinema-4d

我有从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);
        });
    });

问题在于纪念碑缺少部分:

enter image description here

设计师说我做错了什么但我看不出它会是什么?请帮忙!感谢。

编辑:我已经将带有obj,mtl和纹理图像的zip文件上传到Dropbox。这是一个链接。 https://www.dropbox.com/s/ah8yhjadgihrihr/shipka-obj.zip?dl=0

1 个答案:

答案 0 :(得分:2)

你没有做错任何事。我看着你的OBJ,看起来模拟几何的人犯了一些错误:

<强>面孔:

Three.js只能渲染三面(三角形)。它理解四边形,它自动细分为三角形,但它不知道如何处理具有五个或更多边的面。你得到的OBJ的刻板很差,有八个,十二个,有时甚至是20个面孔!

enter image description here

如您所见,具有4个以上边的面未在Three.js中渲染,但是四边形和tris按预期呈现:

enter image description here

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

<强>法线

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

enter image description here

Three.js渲染器认为你希望面部指向那个方向。这就是为什么你可以看到这个平台的远斜坡的底面,但不是最接近相机的斜面:

enter image description here

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

或者,您可以要求渲染器render the backside, or both sides of faces,但我不建议这样做,因为您将整天挑选和选择对象。此外,渲染双方的计算成本更高。