Three.js models turning black after calling computeVertexNormals?
up vote
0
down vote
favorite
I'm importing 3D models into three.js using MTLLoader and OBJLoader. The .obj files contain no normals so the resulting models look blocky. I'm attempting to smooth them by converting the BufferGeometry returned by OBJLoader into a Geometry object, and then calculating the normals. This works perfectly for many objects, but some of them turn almost completely black.
Investigating this, I noticed that on the models that turn black the vertex normals (computed by computeVertexNormals()) are (0, 0, 0) for almost every vertex, while on the normal-looking models they are decimal values between -1 and 1.
Here is my code:
function loadModel() {
// Load the materials first
mtlLoader.load('texture.mtl', function (materials) {
materials.preload();
// Load the object and attach the materials
objLoader
.setMaterials(materials)
.load('model.obj', function (object) {
object.children[0].geometry = new THREE.Geometry().fromBufferGeometry(object.children[0].geometry);
object.children[0].geometry.computeFaceNormals();
object.children[0].geometry.mergeVertices();
object.children[0].geometry.computeVertexNormals();
scene.add(object);
}, undefined, function (error) {
console.log(error);
});
}, undefined, function (error) {
console.log(error);
}
);
}
How can I fix/prevent this?
three.js
asked Nov 19 at 18:24
ihatevectors
1
|
show 2 more comments
up vote
0
down vote
favorite
I'm importing 3D models into three.js using MTLLoader and OBJLoader. The .obj files contain no normals so the resulting models look blocky. I'm attempting to smooth them by converting the BufferGeometry returned by OBJLoader into a Geometry object, and then calculating the normals. This works perfectly for many objects, but some of them turn almost completely black.
Investigating this, I noticed that on the models that turn black the vertex normals (computed by computeVertexNormals()) are (0, 0, 0) for almost every vertex, while on the normal-looking models they are decimal values between -1 and 1.
Here is my code:
function loadModel() {
// Load the materials first
mtlLoader.load('texture.mtl', function (materials) {
materials.preload();
// Load the object and attach the materials
objLoader
.setMaterials(materials)
.load('model.obj', function (object) {
object.children[0].geometry = new THREE.Geometry().fromBufferGeometry(object.children[0].geometry);
object.children[0].geometry.computeFaceNormals();
object.children[0].geometry.mergeVertices();
object.children[0].geometry.computeVertexNormals();
scene.add(object);
}, undefined, function (error) {
console.log(error);
});
}, undefined, function (error) {
console.log(error);
}
);
}
How can I fix/prevent this?
three.js
asked Nov 19 at 18:24
ihatevectors
1
On the objects where you get[0, 0, 0]normals, are all the faces connected? Or are they all individual triangles?
– Marquizzo
Nov 19 at 19:27
@Marquizzo I didn't make the objects, but the faces appear to all be connected (they share a lot of the vertices).
– ihatevectors
Nov 19 at 20:36
Hard to pinpoint without looking at your model, but you could try keeping it as BufferGeom and calculating only vertex normals. Instead of converting into 'Geometry'
– Marquizzo
Nov 19 at 21:06
@Marquizzo Here is the contents of the .obj file: pastebin.com/kPpZB9ci. I didn't post the texture, but I don't think it's necessary since the model is black regardless of the texture.
– ihatevectors
Nov 19 at 21:25
@ihatevectors It appears your obj model is essentially two identical models -- one with front faces and one with back faces. After merging vertices, the front-facing normals and back-facing normals cancel each other out.
– WestLangley
Nov 20 at 5:14
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm importing 3D models into three.js using MTLLoader and OBJLoader. The .obj files contain no normals so the resulting models look blocky. I'm attempting to smooth them by converting the BufferGeometry returned by OBJLoader into a Geometry object, and then calculating the normals. This works perfectly for many objects, but some of them turn almost completely black.
Investigating this, I noticed that on the models that turn black the vertex normals (computed by computeVertexNormals()) are (0, 0, 0) for almost every vertex, while on the normal-looking models they are decimal values between -1 and 1.
Here is my code:
function loadModel() {
// Load the materials first
mtlLoader.load('texture.mtl', function (materials) {
materials.preload();
// Load the object and attach the materials
objLoader
.setMaterials(materials)
.load('model.obj', function (object) {
object.children[0].geometry = new THREE.Geometry().fromBufferGeometry(object.children[0].geometry);
object.children[0].geometry.computeFaceNormals();
object.children[0].geometry.mergeVertices();
object.children[0].geometry.computeVertexNormals();
scene.add(object);
}, undefined, function (error) {
console.log(error);
});
}, undefined, function (error) {
console.log(error);
}
);
}
How can I fix/prevent this?
three.js
asked Nov 19 at 18:24
ihatevectors
1
I'm importing 3D models into three.js using MTLLoader and OBJLoader. The .obj files contain no normals so the resulting models look blocky. I'm attempting to smooth them by converting the BufferGeometry returned by OBJLoader into a Geometry object, and then calculating the normals. This works perfectly for many objects, but some of them turn almost completely black.
Investigating this, I noticed that on the models that turn black the vertex normals (computed by computeVertexNormals()) are (0, 0, 0) for almost every vertex, while on the normal-looking models they are decimal values between -1 and 1.
Here is my code:
function loadModel() {
// Load the materials first
mtlLoader.load('texture.mtl', function (materials) {
materials.preload();
// Load the object and attach the materials
objLoader
.setMaterials(materials)
.load('model.obj', function (object) {
object.children[0].geometry = new THREE.Geometry().fromBufferGeometry(object.children[0].geometry);
object.children[0].geometry.computeFaceNormals();
object.children[0].geometry.mergeVertices();
object.children[0].geometry.computeVertexNormals();
scene.add(object);
}, undefined, function (error) {
console.log(error);
});
}, undefined, function (error) {
console.log(error);
}
);
}
How can I fix/prevent this?
three.js
three.js
asked Nov 19 at 18:24
ihatevectors
1
asked Nov 19 at 18:24
ihatevectors
1
asked Nov 19 at 18:24
ihatevectors
1
asked Nov 19 at 18:24
ihatevectors
1
asked Nov 19 at 18:24
ihatevectors
1
1
On the objects where you get[0, 0, 0]normals, are all the faces connected? Or are they all individual triangles?
– Marquizzo
Nov 19 at 19:27
@Marquizzo I didn't make the objects, but the faces appear to all be connected (they share a lot of the vertices).
– ihatevectors
Nov 19 at 20:36
Hard to pinpoint without looking at your model, but you could try keeping it as BufferGeom and calculating only vertex normals. Instead of converting into 'Geometry'
– Marquizzo
Nov 19 at 21:06
@Marquizzo Here is the contents of the .obj file: pastebin.com/kPpZB9ci. I didn't post the texture, but I don't think it's necessary since the model is black regardless of the texture.
– ihatevectors
Nov 19 at 21:25
@ihatevectors It appears your obj model is essentially two identical models -- one with front faces and one with back faces. After merging vertices, the front-facing normals and back-facing normals cancel each other out.
– WestLangley
Nov 20 at 5:14
|
show 2 more comments
On the objects where you get[0, 0, 0]normals, are all the faces connected? Or are they all individual triangles?
– Marquizzo
Nov 19 at 19:27
@Marquizzo I didn't make the objects, but the faces appear to all be connected (they share a lot of the vertices).
– ihatevectors
Nov 19 at 20:36
Hard to pinpoint without looking at your model, but you could try keeping it as BufferGeom and calculating only vertex normals. Instead of converting into 'Geometry'
– Marquizzo
Nov 19 at 21:06
@Marquizzo Here is the contents of the .obj file: pastebin.com/kPpZB9ci. I didn't post the texture, but I don't think it's necessary since the model is black regardless of the texture.
– ihatevectors
Nov 19 at 21:25
@ihatevectors It appears your obj model is essentially two identical models -- one with front faces and one with back faces. After merging vertices, the front-facing normals and back-facing normals cancel each other out.
– WestLangley
Nov 20 at 5:14
On the objects where you get
[0, 0, 0] normals, are all the faces connected? Or are they all individual triangles?– Marquizzo
Nov 19 at 19:27
On the objects where you get
[0, 0, 0] normals, are all the faces connected? Or are they all individual triangles?– Marquizzo
Nov 19 at 19:27
@Marquizzo I didn't make the objects, but the faces appear to all be connected (they share a lot of the vertices).
– ihatevectors
Nov 19 at 20:36
@Marquizzo I didn't make the objects, but the faces appear to all be connected (they share a lot of the vertices).
– ihatevectors
Nov 19 at 20:36
Hard to pinpoint without looking at your model, but you could try keeping it as BufferGeom and calculating only vertex normals. Instead of converting into 'Geometry'
– Marquizzo
Nov 19 at 21:06
Hard to pinpoint without looking at your model, but you could try keeping it as BufferGeom and calculating only vertex normals. Instead of converting into 'Geometry'
– Marquizzo
Nov 19 at 21:06
@Marquizzo Here is the contents of the .obj file: pastebin.com/kPpZB9ci. I didn't post the texture, but I don't think it's necessary since the model is black regardless of the texture.
– ihatevectors
Nov 19 at 21:25
@Marquizzo Here is the contents of the .obj file: pastebin.com/kPpZB9ci. I didn't post the texture, but I don't think it's necessary since the model is black regardless of the texture.
– ihatevectors
Nov 19 at 21:25
@ihatevectors It appears your obj model is essentially two identical models -- one with front faces and one with back faces. After merging vertices, the front-facing normals and back-facing normals cancel each other out.
– WestLangley
Nov 20 at 5:14
@ihatevectors It appears your obj model is essentially two identical models -- one with front faces and one with back faces. After merging vertices, the front-facing normals and back-facing normals cancel each other out.
– WestLangley
Nov 20 at 5:14
|
show 2 more comments
active
oldest
votes
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',
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%2f53380587%2fthree-js-models-turning-black-after-calling-computevertexnormals%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53380587%2fthree-js-models-turning-black-after-calling-computevertexnormals%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
On the objects where you get
[0, 0, 0]normals, are all the faces connected? Or are they all individual triangles?– Marquizzo
Nov 19 at 19:27
@Marquizzo I didn't make the objects, but the faces appear to all be connected (they share a lot of the vertices).
– ihatevectors
Nov 19 at 20:36
Hard to pinpoint without looking at your model, but you could try keeping it as BufferGeom and calculating only vertex normals. Instead of converting into 'Geometry'
– Marquizzo
Nov 19 at 21:06
@Marquizzo Here is the contents of the .obj file: pastebin.com/kPpZB9ci. I didn't post the texture, but I don't think it's necessary since the model is black regardless of the texture.
– ihatevectors
Nov 19 at 21:25
@ihatevectors It appears your obj model is essentially two identical models -- one with front faces and one with back faces. After merging vertices, the front-facing normals and back-facing normals cancel each other out.
– WestLangley
Nov 20 at 5:14