How to prevent objects from overlapping

Questions
1

Hi. I am looking for a way to prevent two objects from overlapping within a scene. I am trying to create 3D type menu, in which I am using spheres as buttons. I have made the spheres children of the camera. But the problem is that whenever I turn the camera downwards the spheres start to overlap with the floor. Is there a way to prevent that?
I have attached the images to show the problem.

P.S. I am a beginner to three.jscameraStraightcameraTurned

2

You might want to set depthTest of the sphere’s materials to false.

3

It might also be useful to play with renderOrder

4

@Mugen87 thanks this solved my problem