THREE.js 不使用 .mtl 渲染 .obj - 为 THREE.js 导出文件

THREE.js not rendering .obj with .mtl - exporting files for THREE.js

***更新***这一定是文件及其导出方式的问题,我只是不知道那个问题是什么。我已经下载了更多示例模型,它们都渲染得很好。

我在加载 .obj 和 .mtl 文件时遇到 Three.js 问题。

我有一堆对象及其相应的 material 从 3ds 导出的文件。我不是导出这些文件的人,我不是 3d 建模师,但是如果结果证明这是文件的问题,我可以要求建模师再次导出它们。

我已经使用 THREE.js 几次,但从未遇到过这个问题,我正在使用以下方法加载 .mtl 和 .obj 文件:

mtlLoader.load("stands/objects/Table&Chairs.mtl", function(materials){

            materials.preload();
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);

            objLoader.load("stands/objects/Table&Chairs.obj", function(object){

                scene.add(object);
                object.position.set(-5, 0, 4);
            });

        });

我的问题是对象加载正常,没有错误,但是没有显示任何内容。对象没有被渲染到场景中。

如果我从其他来源下载一些示例资产并切换出正在上传的文件,而不更改任何其他内容,则对象会呈现。

这让我相信这可能是文件导出方式的问题。

正在渲染我的 .obj 的屏幕显示

显示示例 .obj 正在渲染的屏幕

如能提供有关可能导致此问题的任何帮助,我们将不胜感激。

我已经上传了对象和 materials here

我的是 Table&Chairs,示例是 Tent_Poles_01 个文件。

.OBJ 文件的优点在于您可以在您选择的文本编辑器中打开它们并查看其中的内容。这将使您对位置和比例有一个大概的了解:

  • 查看您的 tent 模型中的顶点,似乎每个维度的大小约为 2 个单位,以原点为中心。
  • 查看 Table & Chairs 模型中的顶点,它们的大小为几个 hundred/thousand 单位,并且开始接近 (+ 6000,0,-2000)。

换句话说,第一个怀疑是您的模型被渲染到远离可见视口的某个地方。

通常,当你与 3D 艺术家一起工作时,你会事先讨论你想要工作的比例,并让他们将模型与原点很好地对齐。

您可以(某种程度上)在代码中更正此问题,但它不那么实用。

  1. mesh.geometry.center() 将使几何体围绕 (0, 0, 0) 重新居中... 但请注意,这通常不是您想要的 .例如,table 将在其默认居中位置穿过地板的一半。

  2. 要将几何缩放到绝对大小,请使用类似(伪代码)

    var currentSize = new THREE.Box3().setFromObject(model).getSize();
    mesh.geometry.scale(
        targetWidth / currentSize.X, 
        targetHeight / currentSize.Y, 
        targetDepth / currentSize.Z)