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...。我建议您使用GLTFLoader并从Blender中导出作为二进制.gltf替代（.glb格式）？借助GLTF，Blender可以将材质和纹理直接嵌入到.glb文件中。仅需一个加载器，即可支持动画和PBR等现代渲染功能。

三js渲染OBJ作为线框（应该渲染面和底纹）

1 个答案: