Search code examples
javascriptthree.js.obj3ds

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

***UPDATE***This has to be an issue with the files and the way they are exported, i just don't know what that issue is. I have downloaded some more example models and they all render just fine.

I am experiencing an issue with Three.js when loading .obj and .mtl files.

I have a bunch of objects and their corresponding material files exported from 3ds. I am not the one who has exported these files, I am not a 3d modeler however if this turns out to be an issue with the files I can ask the modeler to export them again.

I have used THREE.js a few times and never come across this issue, I am loading the .mtl and .obj file using the following:

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);
            });

        });

My problem is the object loads fine, there are no errors, however nothing is shown. The object is not being rendered to the scene.

If i download some example assets from other sources and switch out the files that are being uploaded, without changing anything else, the object renders.

This leads me to believe it could be an issue with the way in which the files are being exported.

screen showing of my .obj being rendered

screen showing of my .obj being rendered

Screen showing the example .obj being rendered

Screen showing the example .obj being rendered

Any help as to what could be causing this would be much appreciated.

I have uploaded the objects and materials here.

Mine are the Table&Chairs, the example ones are the Tent_Poles_01 files.

Solution

  • The great thing about .OBJ files is that you can just open them up in the text editor of your choice and see what is inside. This will give you a rough idea of position and scale:

    • Looking at the vertices in your tent model, it seems to have a size of about 2 units in each dimension, centered around the origin.
    • Looking at the vertices in the Table & Chairs model, they have a size of a couple of hundred/thousand units, and start near (+6000,0,-2000).

    In other words, the first suspect would be your model being rendered somewhere far outside the visible viewport.

    Usually, when you work together with a 3D artist, you discuss the scale you want to work at beforehand, and have them nicely align the model with the origin.

    You can (sort of) correct this in code, but it will not be as practical.

    1. mesh.geometry.center() will recenter the geometry around (0, 0, 0)... but do note that is usually not what you want. For example, a table will then be half-way through the floor in it's default centered position.

    2. to scale the geometry to an absolute size, use something like (pseudocode)

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