javascript - Three js render child mesh always before his parent -

i have scene() , meshes:

scene:

scene.add(layer1) layer.add(layer2) layer2.add(layer3)

wanted result is:

layer1 covered layer2 , covered layer3.

it works fine, when go far away camera, there start loss precision problem , looks this: (layers not correctly rendered 1 another)

enter image description here

i tried solve materials,

layer2.material.depthtest = 0; layer3.material.depthtest = 0;

works fine, there problem object between camera , layers. enter image description here

do exist best practice solution?

Migrate