Confused about depth in three.js

Question

I have a great problem in three.js.

I can not render correctly the gizmos that are over a newly inserted mesh as shown in the following picture.

The old mesh is the room that is in the top part where the newly loaded mesh is the room in the lower-right part.

It is seen that the rounded mesh of the gizmo (RingGeometry, depthWrite = false, depthTest=false, transparent=true, opacity=0.5) is not rendered over the bottom room.

The camera is orthographic.

The meshes of the rooms and the camera have MeshBasicMaterial

Answer 1

I solved it. The problem was the renderOrder but not the materials.

The

this.handleGizmos.XZ[0][0].renderOrder = 1;

in TransformControls.js did the job !