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 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.

edited Nov 22 '18 at 10:13

asked Nov 22 '18 at 8:01

Colin Barstow

394110

add a comment |

***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 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 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.

edited Nov 22 '18 at 10:13

asked Nov 22 '18 at 8:01

Colin Barstow

394110

add a comment |

***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 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 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.

edited Nov 22 '18 at 10:13

asked Nov 22 '18 at 8:01

Colin Barstow

394110

***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 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 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.

javascript three.js .obj 3ds

edited Nov 22 '18 at 10:13

asked Nov 22 '18 at 8:01

Colin Barstow

394110

edited Nov 22 '18 at 10:13

asked Nov 22 '18 at 8:01

Colin Barstow

394110

edited Nov 22 '18 at 10:13

asked Nov 22 '18 at 8:01

Colin Barstow

394110

asked Nov 22 '18 at 8:01

Colin Barstow

394110

asked Nov 22 '18 at 8:01

Colin Barstow

394110

add a comment |

1 Answer
1

active

oldest

votes

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.

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.

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)

answered Nov 22 '18 at 13:07

Paul-Jan

13.8k4881

1

Paul-Jan, this has helped me an awful lot and i really appreciate you explaining this to me. I have discussed with the 3d artist about scaling these models down. He was working at a 1:1 ratio so some of the other models were 20 meters wide :o no wonder I wasn't seeing them in my field of view. Thank you again!

– Colin Barstow
Nov 23 '18 at 8:51

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426294%2fthree-js-not-rendering-obj-with-mtl-exporting-files-for-three-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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.

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.

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)

answered Nov 22 '18 at 13:07

Paul-Jan

13.8k4881

1

Paul-Jan, this has helped me an awful lot and i really appreciate you explaining this to me. I have discussed with the 3d artist about scaling these models down. He was working at a 1:1 ratio so some of the other models were 20 meters wide :o no wonder I wasn't seeing them in my field of view. Thank you again!

– Colin Barstow
Nov 23 '18 at 8:51

add a comment |

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.

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.

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)

answered Nov 22 '18 at 13:07

Paul-Jan

13.8k4881

1

Paul-Jan, this has helped me an awful lot and i really appreciate you explaining this to me. I have discussed with the 3d artist about scaling these models down. He was working at a 1:1 ratio so some of the other models were 20 meters wide :o no wonder I wasn't seeing them in my field of view. Thank you again!

– Colin Barstow
Nov 23 '18 at 8:51

add a comment |

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.

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.

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)

answered Nov 22 '18 at 13:07

Paul-Jan

13.8k4881

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.

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.

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)

answered Nov 22 '18 at 13:07

Paul-Jan

13.8k4881

answered Nov 22 '18 at 13:07

Paul-Jan

13.8k4881

answered Nov 22 '18 at 13:07

Paul-Jan

13.8k4881

answered Nov 22 '18 at 13:07

Paul-Jan

13.8k4881

1

Paul-Jan, this has helped me an awful lot and i really appreciate you explaining this to me. I have discussed with the 3d artist about scaling these models down. He was working at a 1:1 ratio so some of the other models were 20 meters wide :o no wonder I wasn't seeing them in my field of view. Thank you again!

– Colin Barstow
Nov 23 '18 at 8:51

add a comment |

1

Paul-Jan, this has helped me an awful lot and i really appreciate you explaining this to me. I have discussed with the 3d artist about scaling these models down. He was working at a 1:1 ratio so some of the other models were 20 meters wide :o no wonder I wasn't seeing them in my field of view. Thank you again!

– Colin Barstow
Nov 23 '18 at 8:51

Paul-Jan, this has helped me an awful lot and i really appreciate you explaining this to me. I have discussed with the 3d artist about scaling these models down. He was working at a 1:1 ratio so some of the other models were 20 meters wide :o no wonder I wasn't seeing them in my field of view. Thank you again!

– Colin Barstow
Nov 23 '18 at 8:51

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu