How to prevent objects from overlapping



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.js


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


It might also be useful to play with renderOrder


@Mugen87 thanks this solved my problem