Mixing
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.
javascript three.js .obj 3ds
asked Nov 22 '18 at 8:01
Colin BarstowColin 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 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.
javascript three.js .obj 3ds
asked Nov 22 '18 at 8:01
Colin BarstowColin 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 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.
javascript three.js .obj 3ds
asked Nov 22 '18 at 8:01
Colin BarstowColin 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 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.
javascript three.js .obj 3ds
javascript three.js .obj 3ds
asked Nov 22 '18 at 8:01
Colin BarstowColin Barstow
394110
asked Nov 22 '18 at 8:01
Colin BarstowColin Barstow
394110
edited Nov 22 '18 at 10:13
Colin Barstow
asked Nov 22 '18 at 8:01
Colin BarstowColin Barstow
394110
asked Nov 22 '18 at 8:01
Colin BarstowColin Barstow
394110
asked Nov 22 '18 at 8:01
Colin BarstowColin Barstow
394110
394110
add a comment |
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-JanPaul-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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
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-JanPaul-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-JanPaul-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-JanPaul-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-JanPaul-Jan
13.8k4881
answered Nov 22 '18 at 13:07
Paul-JanPaul-Jan
13.8k4881
answered Nov 22 '18 at 13:07
Paul-JanPaul-Jan
13.8k4881
answered Nov 22 '18 at 13:07
Paul-JanPaul-Jan
13.8k4881
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
1
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 |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
