For some reason the screen always renders above the taskbar, I’ve made sure nothing is wrong with the .glb file so I’m 99% it’s something in the code that I’ve missed.
To be honest I’m not sure what’s wrong, I’ve been trying to fix this for around a week now and I’ve gotten nowhere, I’ve put the github repo in my bio if someone could take a look at the code that would be amazing.
Blender rendering engine is quite very different than three.js renderer - that includes the render order calculations and alpha blending. Could you share a screenshot of how the model looks in Blender, and a separate one showing configuration of the material alpha hashing on the screen material?
In Blender’s material tab, with the screen selected, look for the Blend mode setting and make sure it’s set to “Opaque” (not “Alpha Blend”). Same for anything that doesn’t strictly need to be transparent.
Had a look at your code, looks like you need to turn on depthWrite on the taskbar material.
You can intercept it in the material.traverse on line 70. Just chuck in something like “if material.name == ‘Working_MoniterScreen_Taskbar’” and then override material.material.depthWrite to true.
p.s. I’d suggest renaming the variable “material” to “mesh” or “object” to better represent what it is.
The problem is the alpha blending, no doubt about that. This is what causes sorting issues and disables depthWrite. You can check the material list in https://gltf.report/ and see several with alpha blending enabled, or run the script below and re-export to fix the issue.
for (const material of document.getRoot().listMaterials()) {
material.setAlphaMode("OPAQUE");
}
I was trying to figure out how to prevent this in future, didn’t know alpha blending in Blender related to depthWrite in three.js. Is this documented anywhere? I couldn’t find info about it when trying to answer the OP’s question.
In my experience it usually gives best results to disable depthWrite for “transparent” materials, so GLTFLoader (and most glTF viewers I’ve checked) do that automatically. There are some situations where you’d want to keep the transparency but disable depthWrite. But when a material is marked as transparent but doesn’t actually contain any transparency, as was the case here … things can go badly, in more ways than this.