1

我有一个 OBJ、MTL 和从Cinema 4D. 设计师给了我一个 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。这是一个链接。https://www.dropbox.com/s/ah8yhjadgihrihr/shipka-obj.zip?dl=0

4

1 回答 1

2

你没有做错什么。我查看了您的 OBJ,看起来建模几何的人犯了一些错误:

面孔:

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

在此处输入图像描述

如您所见,在 Three.js 中没有渲染超过 4 条边的面,但四边形和三边形按预期渲染:

在此处输入图像描述

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

法线

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

在此处输入图像描述

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

在此处输入图像描述

我建议您让您的 3D 艺术家检查几何图形并确保法线全部朝外而不是朝内,这样渲染器就可以了解您想要渲染的面的哪一侧。

或者,您可以要求渲染器渲染背面或两侧,但我不建议这样做,因为您将整天挑选对象。此外,渲染两边的计算成本更高。

于 2017-07-31T18:47:34.580 回答