For objects to be transparent (i.e. to see colour blending rather than opaque blocking), position objects back-to-front rather than front-to-back.
Both rows of sphere are identical except in the left row, the first circle is closest to the camera (with subsequent circles placed at increasing distance). The right row positions the furthest circle first (with subsequent circles closer to the camera).
For more information watch Transparency and three.js and take a look at the last third of lesson three from Udacity's "Interactive Computer Graphics" course.
