three js weird artifacts with objects intersection

Trying to get into three js and following some tutorials here and there but I'm stuck on some very basic stuff I feel, that I can't find the solution to.

The problem I have is shown better on the gif below, it's those weird artifacts in the smaller spheres that also happen when the yellow spheres go behind the red one only this time the red one is the one glitching out. I tried different base materials (phong, standard, basic) and also played with the opacity and roughness to make sure I don't have a transparent or reflective material but nothing. Some context for the scene: It's just a big sphere (S) that's standing still and there are 2 smaller spheres (s1 the smaller of the two and s2 the bigger of the two) that are orbiting it. s1 is orbiting tangentially to S surface and s2 center is on the surface of S (so it's half inside S and half outside of it).

Any ideas?

Here's my code for the renderer:

    var renderer = new THREE.WebGLRenderer({antialias: true},{ alpha: true });
    renderer.setClearColor(0x000000, 0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

And here's my code for the spheres:

    var geometry = new THREE.SphereGeometry(0.5, 32, 32);
    var material = new THREE.MeshStandardMaterial (
        {
            color:"red"
        }
    );
    var point = new THREE.Mesh(geometry, material);

And one ambient light:

    var light = new THREE.AmbientLight(0xffffff, 1);
    scene.add(light);

Solution was found by Marquizzo in his comment: The camera.near property was too low and I had to adjust it.