Three.js models turning black after calling computeVertexNormals?
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 '18 at 18:24
ihatevectorsihatevectors
1
|
show 2 more comments
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 '18 at 18:24
ihatevectorsihatevectors
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 '18 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 '18 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 '18 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 '18 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 '18 at 5:14
|
show 2 more comments
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 '18 at 18:24
ihatevectorsihatevectors
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 '18 at 18:24
ihatevectorsihatevectors
1
asked Nov 19 '18 at 18:24
ihatevectorsihatevectors
1
asked Nov 19 '18 at 18:24
ihatevectorsihatevectors
1
asked Nov 19 '18 at 18:24
ihatevectorsihatevectors
1
asked Nov 19 '18 at 18:24
ihatevectorsihatevectors
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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 5:14
|
show 2 more comments
0
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',
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%2f53380587%2fthree-js-models-turning-black-after-calling-computevertexnormals%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
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.
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 '18 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 '18 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 '18 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 '18 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 '18 at 5:14