Three-js将OBJ渲染为线框（应该渲染面和阴影）

Question

我已将.obj文件导入Three-js，但未按预期呈现模型。该模型正在渲染为线框，甚至似乎正在添加不存在的几何图形。

我已经使用https://3dviewer.net/在浏览器中预览了对象，没有问题，因此我知道它不是对象本身。

我在计算机上为.obj格式（应用程序/八位字节流）添加了一个新的MIME类型，这似乎没有什么区别。

    var crescentMaterial;
    var crescentTexture;
    var loader = new THREE.TextureLoader();

    crescentTexture = loader.load(
        'Textures/crescent.png', function () { }, function () {
            renderer.render(scene);
        });

    crescentMaterial = new THREE.MeshPhongMaterial();
    crescentMaterial.map = crescentTexture;

    //Load 3d model
    var modelLoader = new THREE.OBJLoader();
    modelLoader.load(
        'Models/concerto_crescent.obj',

        function (obj) {

            obj.traverse(function (child) {
                if (child.isMesh) {
                    child.material = crescentMaterial;
                }
            });
            scene.add(obj);
        },

        function (xhr) {

            console.log((xhr.loaded / xhr.total * 100) + '% loaded');

        },

        function (error) {

            console.log(error);

        }
    );

最初它根本不会渲染。我根据找到的答案将其添加到web.config文件中，并开始渲染

  <staticContent>
    <mimeMap fileExtension=".obj" mimeType="application/octet-stream" />
  </staticContent>

模型的渲染方式：https://imgur.com/zu7rnyZ

[额外几何：https://imgur.com/9fvrhLF

[模型在Blender中的外观：https://imgur.com/A7xm4LB

Answer 1

很难说问题出在哪里。不过，更一般而言，OBJ并不是一种很好的格式。.您的材料位于单独的文件中，除了OBJLoader之外，您还需要制作THREE.MTLLoader。作为二进制.gltf替代（.glb格式）？有了GLTF，Blender可以将材质和纹理直接嵌入.glb文件中。仅需一个加载器，即可支持动画和PBR等现代渲染功能。