Three.js overlapping transparent PNG textures have black backgrounds

0
votes

(Ignore the grid)

clouds

I have many planes with a Three.MeshBasicMaterial on each one, and the map is a transparent PNG cloud image.

As you can see in the above image, they are showing black backgrounds when overlapping with the rest of the scene. Strangely, when they overlap with themselves, you can see they blend and are transparent (look at the outer red clouds blending with the inner pink clouds).

  • I've verified the PNG images are actually transparent.
  • As mentioned, they're on a MeshBasicMaterial, with transparency set to true, and the map is a cloud image with anisotropy set to 16.
  • I have not manually set the blend mode on the materials

Anything obvious I'm overlooking?

1
three.jstransparency

1 Answers

0
votes

This is probably specific to my own implementation - but in case it helps anyone else: I discovered the clouds only had black backgrounds when overlapping with the background skybox. The skybox materials had transparent: true, set on them, even though they aren't transparent. Removing the transparency setting from the background materials fixed the issue.