javascript - three.js - drawing two overlapping transparent spheres and hiding intersection -

i have 2 transparent, overlapping spheres in webgl context. during overlap, control how spheres drawn. can see problem @ page:

http://andrewray.me/stuff/circle-clip.html

when red , blue sphere overlap, blue sphere hidden behind red sphere.

if change order in spheres added scene (if add big sphere first), desired behavior: http://andrewray.me/stuff/circle-clip-correct.html

however, things different in project. see intersection though add big sphere first.

the closest have gotten moving smaller spheres closer camera. in example, have moved smaller spheres 10 units closer: http://andrewray.me/stuff/b-test/

however, if move around arrow keys, can see intersection flash every , then, , flat out rudely stay visible (especially bubbles coming in side)

i have tried setting depwthwrite: false on both materials doesn't have effect.

i have messed bit renderer.sortobjects = false think removing "natural" draw order want occur rest of scene. these spheres @ issue with.

1. can force draw order of transparent objects in webgl / three.js? seems z-fighting when moving smaller spheres 10 units closer
2. or there way force behavior of overlapping transparent objects?

after head banging (not kind) have discovered can force draw order flag on mesh.

for 3 r70 , above use renderorder

mesh.renderorder = 0.5; // value 0 1 

for 3 r69 , below use renderdepth

mesh.renderdepth = 0.5; // value 0 1 

it draws lowest first, highest last.