Images assigned to 3D UI Elements show up as black boxes

I have a some PNG images with transparent backgrounds that I’m trying to display on 3D UI Elements via the Image property, but most of them are showing up as transparent black boxes in the experience, but not in the Studio itself.

I’m using a small PNG “hotspot” icon in a few places that sometimes is displayed correctly, but not all the time. That makes me think there be a loading issue, like maybe the images are not fully loaded before they are passed to the code (shader?) for displaying the image in 3D. If so, is there an in-Studio way to preload images for UI Elements?

In the DevTools console I see that Three.js is trying to convert images to JPG for some reason, and no image data is actually being passed to the rendered object. So maybe the conversion process is breaking, or the code responsible for passing the image data is not waiting for it to finish?


Hello,

Thanks for reaching out, I’m just now seeing this post.

This is a known issue with the 3D UI system right now, the team is looking into it.

1 Like

Thanks! For now it looks like I can use Plane entities and use my images as color maps for the MeshStandardMaterial. Seems like they are loading now, they just need a little tweaking so that the scene lights don’t affect the colors too much.