javascript - 将OBJ文件加载到Three.js中的过程

Question

我正在尝试使用可爱的 Three.js 将一个 OBJ 及其关联的 MTL 文件上传到 WebGL 场景中。

我刚刚提出了一个问题，但我找不到合理的理由。我在代码中放置了一些全局变量来监视加载 OBJ 和 MTL 文件时发生的情况。虽然它只是一组文件，但“obj”变量来自“Group”类型，并且它确实有两个“子级”。正如 console.log() 所说，它本身不是网格实例，而是它的子实例。然而，当我检查子节点内部时，第一个子节点(由 geo[0] 测量)仅包含顶点，而“faces”数组为空。然而，第二个 child ——通过 geo[1] 测量——拥有所有的顶点和面。甚至当你使用 obj 时，只使用 geo[1] 就可以得到相同的场景。

我关心的是这背后的逻辑。为什么对于一组 OBJ 和 MTL 文件，我们有一个具有两个子对象的对象，其中第一个子对象只有顶点，而第二个子对象也有顶点和面。

这对我来说很重要，因为我想处理顶点和面以获得体素化体积，这需要对场景对象进行直接操作。

scapula = new THREE.OBJMTLLoader();
scapula.load('obj/scapulaTWO.obj', 'obj/scapulaTWO.mtl', function (object) {
    // var material = new THREE.MeshFaceMaterial(materials);
    var material = new THREE.MeshLambertMaterial({
        color: 0xFFFF66
    });
    obj = object; //group

    object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            console.log(child instanceof THREE.Mesh)

            geo[i] = child; //mesh
            // apply custom material
            child.material = material;

            // enable casting shadows
            child.castShadow = true;
            child.receiveShadow = true;

            i = i + 1;
        }
    });

    scene.add(geo[1]);
});

Answer 1

加载器解析对象后，您将在对象中找到由您的模型生成的内容。

您可以使用文本编辑器打开 *.obj 并亲自查看组等。它不像 Three.js 删除顶点并将它们放入单独的组中。