3D model appears black

[androidparth90]

Description

I am facing the same issue with one of my models (.glb). below is the link to download the same. Can this one be re-opened please?

https://drive.google.com/file/d/1H_xq6xqd7s9jht8i1ZmIvZXe11NflPeB/view?usp=sharing

my model appears like this

My code

Code

<model-viewer 
seamless-poster shadow-intensity="1"
data-name="sample model"
ar
background-color="#ffffff"
ar-modes="scene-viewer quick-look"
src="assets/models/sample.glb" 
ios-src="assets/models/sample.usdz"
alt="A 3D model" auto-rotate camera-controls>
</model-viewer>

Version

• model-viewer: v1.9.0

Browser Affected

• Chrome, version: 94.0.4606.81 (Official Build) (x86_64)

OS

• MacOS

AR

• WebXR
• QuickLook

[C-7]

Same here. The quick look shows the (black) glb model even if ios-src is given.
Update: seems to be a problem with the gab-version of my model not with the library.

BTW - great work!

[androidparth90]

@C-7 So what is the solution? should I change the model or should I ask the designer to send an updated model? What exactly do you mean by gab-version?

[C-7]

@C-7 So what is the solution? should I change the model or should I ask the designer to send an updated model? What exactly do you mean by gab-version version?
Sorry, auto-correct issue, 'gab' should read 'glb'.
It really seems to be a problem with the model (at least for me) but I can't test on Android devices today. I have this issue (black) with a relatively large 3D scan https://ǝǝ.com/000 but it works very well with a smaller model https://ǝǝ.com/07g
Was assuming that is it a library issue when I came across your comment. I am not involved in the development of model-viewer, so I can't help with that. Perhaps, ist an model issue, try with another one.

[androidparth90]

Tried with another .glb model but the same issue persists

[elalish]

The problem is your occlusion channel is black (zero), which is a surprisingly common error for glTF exporters. Some viewers show the object okay because they use a punctual light and don't both applying AO to that, but we only use environmental lighting, which makes it very clear the model is wrong.

[androidparth90]

@elalish : hello thanks for your reply. How do I fix the occlusion channel. I have no background of 3D modeling. I have simply downloading 3d models from here (https://www.turbosquid.com)
and all of them when importted are black.. so what do I need to do?

[ghost]

@androidparth90 one solutions is to just remove the occlusion channel by setting that texture to null

example:

modelViewer.addEventListener('load', () => {
        for (const material of modelViewer.model.materials) {
          // Removes occlusion map from all materials.
          material.occlusionTexture.setTexture(null);
        }
      });