Transparency

Transparency in threejs is hard. The easy part is setting transparency on the object's material, then you can freely change the opacity. But there are some "gotchas" along with this.

Mainly the problem is the rendering order. Threejs is apparently not smart enough to sort our models. The result is that sometimes making an object transparent will only turn it black, but not actually become fully transparent. This happens when the transparent object is rendered before the object in the back (behind the transparent object). The reason for this according to threejs is:

... the triangles closer to the camera might get drawn first. In that case the triangles in the back aren't drawn.

In this case, "the triangles closer to the camera" would refer to the transparent object being rendered. Then the triangles in the back don't get drawn, and the result looks like the transparent object is leaving its shadow on the object in back.

For more details on transparency gotchas, see the threejs manual on transparency

To combat this, we can control the render order to enforce what gets drawn first. Threejs renders from low numbers to high numbers. The table below shows the render order set on specific models. Leave large gaps between render orders so that new models may be inserted between others.

Render Order Table

For reference, this table holds the render order for all models and should be updated as new models are added.

Model	Render Order
Hemisphere	0
Plane	0
PFSS Lines	10000