How to use GLTF Loader in three.js? Texture and material displaying as black
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm having issues loading a gltf. The model is able to load successfully but all the textures and materials (already embedded in the .gltf) are completely black. When I view it in the gltfviewer, all the textures and materials show up correctly. I'm new to three.js so if anyone can walk me through using the GLTF loader, I would greatly appreciate it!!
three.js
asked Nov 16 '18 at 19:40
AymaAyma
445
add a comment |
I'm having issues loading a gltf. The model is able to load successfully but all the textures and materials (already embedded in the .gltf) are completely black. When I view it in the gltfviewer, all the textures and materials show up correctly. I'm new to three.js so if anyone can walk me through using the GLTF loader, I would greatly appreciate it!!
three.js
asked Nov 16 '18 at 19:40
AymaAyma
445
Do you have any light source in the scene?
– prisoner849
Nov 16 '18 at 20:58
I believe so. If I add a phong material and set color to white, the black changes to white.
– Ayma
Nov 16 '18 at 21:04
What kind of lights? Can you share the model or a demo? Note that metallic materials may require an environment map. In the gltf viewer (gltf-viewer.donmccurdy.com) you can adjust direct and ambient light to see the effect.
– Don McCurdy
Nov 16 '18 at 22:05
thanks for replying. How do I share the model? I have the gltf uploaded on github... Also, its a hemisphere light (I just copied the code off another post); the light should be working though? Since I can see the material when I add a phong material with a white color.
– Ayma
Nov 16 '18 at 22:14
A link to the GitHub project may be enough. Otherwise, Google Drive, Dropbox, Gist, or some other file link.
– Don McCurdy
Nov 17 '18 at 2:16
add a comment |
I'm having issues loading a gltf. The model is able to load successfully but all the textures and materials (already embedded in the .gltf) are completely black. When I view it in the gltfviewer, all the textures and materials show up correctly. I'm new to three.js so if anyone can walk me through using the GLTF loader, I would greatly appreciate it!!
three.js
asked Nov 16 '18 at 19:40
AymaAyma
445
I'm having issues loading a gltf. The model is able to load successfully but all the textures and materials (already embedded in the .gltf) are completely black. When I view it in the gltfviewer, all the textures and materials show up correctly. I'm new to three.js so if anyone can walk me through using the GLTF loader, I would greatly appreciate it!!
three.js
three.js
asked Nov 16 '18 at 19:40
AymaAyma
445
asked Nov 16 '18 at 19:40
AymaAyma
445
asked Nov 16 '18 at 19:40
AymaAyma
445
asked Nov 16 '18 at 19:40
AymaAyma
445
asked Nov 16 '18 at 19:40
AymaAyma
445
445
Do you have any light source in the scene?
– prisoner849
Nov 16 '18 at 20:58
I believe so. If I add a phong material and set color to white, the black changes to white.
– Ayma
Nov 16 '18 at 21:04
What kind of lights? Can you share the model or a demo? Note that metallic materials may require an environment map. In the gltf viewer (gltf-viewer.donmccurdy.com) you can adjust direct and ambient light to see the effect.
– Don McCurdy
Nov 16 '18 at 22:05
thanks for replying. How do I share the model? I have the gltf uploaded on github... Also, its a hemisphere light (I just copied the code off another post); the light should be working though? Since I can see the material when I add a phong material with a white color.
– Ayma
Nov 16 '18 at 22:14
A link to the GitHub project may be enough. Otherwise, Google Drive, Dropbox, Gist, or some other file link.
– Don McCurdy
Nov 17 '18 at 2:16
add a comment |
Do you have any light source in the scene?
– prisoner849
Nov 16 '18 at 20:58
I believe so. If I add a phong material and set color to white, the black changes to white.
– Ayma
Nov 16 '18 at 21:04
What kind of lights? Can you share the model or a demo? Note that metallic materials may require an environment map. In the gltf viewer (gltf-viewer.donmccurdy.com) you can adjust direct and ambient light to see the effect.
– Don McCurdy
Nov 16 '18 at 22:05
thanks for replying. How do I share the model? I have the gltf uploaded on github... Also, its a hemisphere light (I just copied the code off another post); the light should be working though? Since I can see the material when I add a phong material with a white color.
– Ayma
Nov 16 '18 at 22:14
A link to the GitHub project may be enough. Otherwise, Google Drive, Dropbox, Gist, or some other file link.
– Don McCurdy
Nov 17 '18 at 2:16
Do you have any light source in the scene?
– prisoner849
Nov 16 '18 at 20:58
Do you have any light source in the scene?
– prisoner849
Nov 16 '18 at 20:58
I believe so. If I add a phong material and set color to white, the black changes to white.
– Ayma
Nov 16 '18 at 21:04
I believe so. If I add a phong material and set color to white, the black changes to white.
– Ayma
Nov 16 '18 at 21:04
What kind of lights? Can you share the model or a demo? Note that metallic materials may require an environment map. In the gltf viewer (gltf-viewer.donmccurdy.com) you can adjust direct and ambient light to see the effect.
– Don McCurdy
Nov 16 '18 at 22:05
What kind of lights? Can you share the model or a demo? Note that metallic materials may require an environment map. In the gltf viewer (gltf-viewer.donmccurdy.com) you can adjust direct and ambient light to see the effect.
– Don McCurdy
Nov 16 '18 at 22:05
thanks for replying. How do I share the model? I have the gltf uploaded on github... Also, its a hemisphere light (I just copied the code off another post); the light should be working though? Since I can see the material when I add a phong material with a white color.
– Ayma
Nov 16 '18 at 22:14
thanks for replying. How do I share the model? I have the gltf uploaded on github... Also, its a hemisphere light (I just copied the code off another post); the light should be working though? Since I can see the material when I add a phong material with a white color.
– Ayma
Nov 16 '18 at 22:14
A link to the GitHub project may be enough. Otherwise, Google Drive, Dropbox, Gist, or some other file link.
– Don McCurdy
Nov 17 '18 at 2:16
A link to the GitHub project may be enough. Otherwise, Google Drive, Dropbox, Gist, or some other file link.
– Don McCurdy
Nov 17 '18 at 2:16
add a comment |
1 Answer
1
active
oldest
votes
This issue is essentially the same as How to use AmbientLight in combination with MeshStandardMaterial? — your model has a 100% metallic material, and pure metals do not reflect diffuse (ambient and hemisphere) lights.
Ideally, always add an environment map to PBR models. Another solution is to add non-diffuse/direct lights, such as PointLight or DirectionalLight instances. If you are able to edit the model, reducing its metalness would also work.
For more details, see https://github.com/mrdoob/three.js/issues/9228.
answered Nov 17 '18 at 7:48
Don McCurdyDon McCurdy
5,28311539
You're actually a life saver! I just changed the metallic factor in blender and now everything works. Thanks so much!!
– Ayma
Nov 17 '18 at 16:58
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%2f53344348%2fhow-to-use-gltf-loader-in-three-js-texture-and-material-displaying-as-black%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
This issue is essentially the same as How to use AmbientLight in combination with MeshStandardMaterial? — your model has a 100% metallic material, and pure metals do not reflect diffuse (ambient and hemisphere) lights.
Ideally, always add an environment map to PBR models. Another solution is to add non-diffuse/direct lights, such as PointLight or DirectionalLight instances. If you are able to edit the model, reducing its metalness would also work.
For more details, see https://github.com/mrdoob/three.js/issues/9228.
answered Nov 17 '18 at 7:48
Don McCurdyDon McCurdy
5,28311539
You're actually a life saver! I just changed the metallic factor in blender and now everything works. Thanks so much!!
– Ayma
Nov 17 '18 at 16:58
add a comment |
This issue is essentially the same as How to use AmbientLight in combination with MeshStandardMaterial? — your model has a 100% metallic material, and pure metals do not reflect diffuse (ambient and hemisphere) lights.
Ideally, always add an environment map to PBR models. Another solution is to add non-diffuse/direct lights, such as PointLight or DirectionalLight instances. If you are able to edit the model, reducing its metalness would also work.
For more details, see https://github.com/mrdoob/three.js/issues/9228.
answered Nov 17 '18 at 7:48
Don McCurdyDon McCurdy
5,28311539
You're actually a life saver! I just changed the metallic factor in blender and now everything works. Thanks so much!!
– Ayma
Nov 17 '18 at 16:58
add a comment |
This issue is essentially the same as How to use AmbientLight in combination with MeshStandardMaterial? — your model has a 100% metallic material, and pure metals do not reflect diffuse (ambient and hemisphere) lights.
Ideally, always add an environment map to PBR models. Another solution is to add non-diffuse/direct lights, such as PointLight or DirectionalLight instances. If you are able to edit the model, reducing its metalness would also work.
For more details, see https://github.com/mrdoob/three.js/issues/9228.
answered Nov 17 '18 at 7:48
Don McCurdyDon McCurdy
5,28311539
This issue is essentially the same as How to use AmbientLight in combination with MeshStandardMaterial? — your model has a 100% metallic material, and pure metals do not reflect diffuse (ambient and hemisphere) lights.
Ideally, always add an environment map to PBR models. Another solution is to add non-diffuse/direct lights, such as PointLight or DirectionalLight instances. If you are able to edit the model, reducing its metalness would also work.
For more details, see https://github.com/mrdoob/three.js/issues/9228.
answered Nov 17 '18 at 7:48
Don McCurdyDon McCurdy
5,28311539
answered Nov 17 '18 at 7:48
Don McCurdyDon McCurdy
5,28311539
answered Nov 17 '18 at 7:48
Don McCurdyDon McCurdy
5,28311539
answered Nov 17 '18 at 7:48
Don McCurdyDon McCurdy
5,28311539
5,28311539
You're actually a life saver! I just changed the metallic factor in blender and now everything works. Thanks so much!!
– Ayma
Nov 17 '18 at 16:58
add a comment |
You're actually a life saver! I just changed the metallic factor in blender and now everything works. Thanks so much!!
– Ayma
Nov 17 '18 at 16:58
You're actually a life saver! I just changed the metallic factor in blender and now everything works. Thanks so much!!
– Ayma
Nov 17 '18 at 16:58
You're actually a life saver! I just changed the metallic factor in blender and now everything works. Thanks so much!!
– Ayma
Nov 17 '18 at 16:58
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%2f53344348%2fhow-to-use-gltf-loader-in-three-js-texture-and-material-displaying-as-black%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
Do you have any light source in the scene?
– prisoner849
Nov 16 '18 at 20:58
I believe so. If I add a phong material and set color to white, the black changes to white.
– Ayma
Nov 16 '18 at 21:04
What kind of lights? Can you share the model or a demo? Note that metallic materials may require an environment map. In the gltf viewer (gltf-viewer.donmccurdy.com) you can adjust direct and ambient light to see the effect.
– Don McCurdy
Nov 16 '18 at 22:05
thanks for replying. How do I share the model? I have the gltf uploaded on github... Also, its a hemisphere light (I just copied the code off another post); the light should be working though? Since I can see the material when I add a phong material with a white color.
– Ayma
Nov 16 '18 at 22:14
A link to the GitHub project may be enough. Otherwise, Google Drive, Dropbox, Gist, or some other file link.
– Don McCurdy
Nov 17 '18 at 2:16