Display Mesh On Top Of Another | Remove Overalapping | Render Order | Three.js

I have 2 obj meshes. They both have some common areas but not completely.

I displayed them both by adding them to screen .. Just like a mesh on top of another. But the lower mesh overlaps the top mesh But what I want to acheive is the lower mesh should always stay below without overlapping and giving the space to the entire top mesh.

I went through this fiddle..Fiddle with renderorder

And I tried something with this like..

var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
           root.renderOrder = 0;
           scene.add(root);
       });
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
           root.renderOrder = 1;
           scene.add(root);
      });

But I don't know for what reason the overlap still stays ..

I tried...

var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
           objLoader1.renderOrder = 0;
           scene.add(root);
       });
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
           objLoader2.renderOrder = 1;
           scene.add(root);
      });

Then I tried going through this Fiddle .. Another Fiddle But when I run in I get only the lower or the upper mesh . But I want to see both without any overlaps..

 var layer1 = new Layer(camera);
 composer.addPass(layer1.renderPass);
 layer1.scene.add(new THREE.AmbientLight(0xFFFFFF));
 var objLoader1 = new OBJLoader2();
 objLoader1.load('assets/object1.obj', (root) => {
        layer1.scene.add(root);
  });
  var layer2 = new Layer(camera);
  composer.addPass(layer2.renderPass);
  layer2.scene.add(new THREE.AmbientLight(0xFFFFFF));
  var objLoader2 = new OBJLoader2();
  objLoader2.load('assets/object2.obj', (root) => {
        layer2.scene.add(root);
  });

I made the material depthTest to False But Nothing Helped..

Can anyone help me achieve what I wanted .. If anyone couldn't figure what I mean by overlapping see the image below..

And Thanks to anyone who took time and effort to go through and help me...

You can use polygonOffset to achieve your goal, which modifies the depth value right before a fragment is written to help move polygons off of eachother without visually changing the position:

material.polygonOffset = true;
material.polygonOffsetUnit = 1;
material.polygonOffsetFactor = 1;

Here is a fiddle demonstrating the solution:

https://jsfiddle.net/5s8ey0ad/1/

Here is what the OpenGL Docs have to say about polygon offset:

When GL_POLYGON_OFFSET_FILL, GL_POLYGON_OFFSET_LINE, or GL_POLYGON_OFFSET_POINT is enabled, each fragment's depth value will be offset after it is interpolated from the depth values of the appropriate vertices. The value of the offset is factor×DZ+r×units, where DZ is a measurement of the change in depth relative to the screen area of the polygon, and r is the smallest value that is guaranteed to produce a resolvable offset for a given implementation. The offset is added before the depth test is performed and before the value is written into the depth buffer.