三js渲染OBJ为线框（应该是渲染面和阴影）答案

【问题标题】：Three-js Rendering OBJ as Wireframe (Should be rendering faces and shading)三js渲染OBJ为线框（应该是渲染面和阴影）
【发布时间】：2019-10-04 23:33:01
【问题描述】：

我已经将一个 .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

【问题讨论】：

标签： javascript asp.net three.js 3d

【解决方案1】：

很难说有什么问题。更一般地说，OBJ 不是一个很好的格式.. 你的材料在一个单独的文件中，需要你制作一个 THREE.MTLLoader 也.. 除了 OBJLoader ...我可以建议使用 GLTFLoader 并从搅拌机导出作为二进制 .gltf 代替（.glb 格式）？使用 GLTF，Blender 可以将材质和纹理直接嵌入到 .glb 文件中。只需要一个加载器，并且还支持动画和 PBR 等现代渲染功能。

【讨论】：

我切换到 GLTF 格式并适当地更改了该静态内容标签中的 mime 类型，它解决了问题。感谢您的回答，绝对不会再使用 .obj 了！
酷！是的，您仍然可以为您的原始资产保留其他格式，这只是 GLTF 真正理想的最终交付网络。