While experimenting with three.js, I encountered an issue with objects appearing fuzzy when they overlap. The distortion looks like this. Can anyone provide assistance with this problem? Below is the code I'm currently using:

 // Initializing basic objects
var scene;
var renderer;
var camera;

var backgroundScene;
var backgroundCamera;

// Initializing supporting modules
var stats;
var axis;
var cameraMode = 1;

// Time and acceleration values
var milis = 0;
var scale = 170;
var acceleration = 10000 * scale;
var acceleratedTime;

// Initializing object properties and constants
var sunGeo;
var sunMat;
var sun;

var sunLight;

// Earth properties
var earthGeo;
var earthMat;
var earth;

// Ecliptic Axis
var eclipticAxisGeo;
var eclipticAxisMat;
var eclipticAxis;

// Start the code execution
function init() {
    // Create scene
    scene = new THREE.Scene();

    // Initialize renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setClearColor(new THREE.Color(0x000000, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);

    // Initialize camera
    camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, EARTH_RADIUS * 100);

    // Creating supporting modules
    stats = new Stats();
    stats = initStats();

    axis = new THREE.AxisHelper(100000000000000);
    scene.add(axis);

    // Creating the Background
    var backgroundMaterial = new THREE.MeshBasicMaterial();
    backgroundMaterial.map = new THREE.TextureLoader().load("resources/textures/sky.jpg");

    var background = new THREE.Mesh(new THREE.PlaneGeometry(2, 2, 2), backgroundMaterial);

    background.rotation.z += Math.PI / 2;
    background.material.depthTest = false;
    background.material.depthWrite = false;

    backgroundScene = new THREE.Scene();
    backgroundCamera = new THREE.Camera();

    backgroundScene.add(background);
    backgroundScene.add(backgroundCamera);

    // Creating the Sun
    sunGeo = new THREE.SphereGeometry(SUN_RADIUS, SUN_MERIDIANS_AND_PARALLELS, SUN_MERIDIANS_AND_PARALLELS);

    sunMat = new THREE.MeshPhongMaterial();
    sunMat.emissive = new THREE.Color(0xffffff);
    sunMat.emissiveMap = new THREE.TextureLoader().load("resources/textures/sun.jpg");

    sun = new THREE.Mesh(sunGeo, sunMat);

    sun.position.x = 0;
    sun.position.y = 0;
    sun.position.z = 0;

    scene.add(sun);

    sunLight = new THREE.PointLight(0xFFFFFF, 1.0, 0);
    sunLight.position.x = 0;
    sunLight.position.y = 0;
    sunLight.position.z = 0;
    scene.add(sunLight);

    // Creating the Earth
    earthGeo = new THREE.SphereGeometry(EARTH_RADIUS, EARTH_MERIDIANS_AND_PARALLELS, EARTH_MERIDIANS_AND_PARALLELS);

    earthMat = new THREE.MeshPhongMaterial();
    earthMat.map = new THREE.TextureLoader().load("resources/textures/earth.jpg");

    earth = new THREE.Mesh(earthGeo, earthMat);

    earth.position.x = EARTH_SEMI_MAJOR_AXIS;
    earth.position.y = 0;
    earth.position.z = 0;

    earth.rotation.y = Math.Pi / 2;
    earth.rotation.z += EARTH_AXIAL_TILT;

    scene.add(earth);

    // Creating the EclipticAxis
    eclipticAxisGeo = new THREE.CircleGeometry(EARTH_SEMI_MAJOR_AXIS, 10000);
    eclipticAxisGeo.vertices.shift();

    eclipticAxisMat = new THREE.LineBasicMaterial({
        color: 0xFF00FF
    });

    eclipticAxis = new THREE.Line(eclipticAxisGeo, eclipticAxisMat);

    eclipticAxis.rotation.x = Math.PI / 2;

    scene.add(eclipticAxis);

    // Camera positioning
    camera.position.set(earth.position.x, earth.position.y, earth.position.z);
    camera.position.y += 1000000000 * scale;
    camera.position.z += 1000000000 * scale;
    camera.lookAt(earth.position);

    document.getElementById("WebGL-output").appendChild(renderer.domElement);

    setInterval(function() {
        ++milis;
        acceleratedTime = milis * acceleration / 1000;
    }, 1);

    renderScene();
};

// Rendering the scene
function renderScene() {
    stats.update();

    sun.rotation.y = SUN_ANGULAR_ROTAION * acceleratedTime;

    earth.rotation.y = EARTH_ANGULAR_ROTATION * acceleratedTime;

    earth.position.x = Math.cos(EARTH_ANGULAR_REVOLUTION * acceleratedTime) * EARTH_SEMI_MAJOR_AXIS;
    earth.position.z = Math.sin(-EARTH_ANGULAR_REVOLUTION * acceleratedTime) * EARTH_SEMI_MAJOR_AXIS;

    if (cameraMode == 0) {
        camera.position.x = earth.position.x + 10000000 * scale;
        camera.position.y = earth.position.y + 10000000 * scale;
        camera.position.z = earth.position.z + 10000000 * scale;
        camera.lookAt(earth.position);
    } else if (cameraMode == 1) {
        camera.position.x = EARTH_SEMI_MAJOR_AXIS;
        camera.position.y = 1000000000 * scale;
        camera.position.z = 1000000000 * scale;
        camera.lookAt(new THREE.Vector3(EARTH_SEMI_MAJOR_AXIS, 0, 0));
    } else if (cameraMode == 2) {
        camera.position.x = sun.position.x;
        camera.position.y = sun.position.y + SUN_RADIUS * scale / 50;
        camera.position.z = sun.position.z;
        camera.lookAt(sun.position);
    } else {
        camera.position.x = earth.position.x;
        camera.position.y = 0;
        camera.position.z = 0;
        camera.lookAt(earth.position);
    }

    requestAnimationFrame(renderScene);

    renderer.autoClear = false;
    renderer.clear();
    renderer.render(backgroundScene, backgroundCamera);
    renderer.render(scene, camera);
};

// Initializing stats module
function initStats() {
    stats.setMode(0);

    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';

    document.getElementById("Stats-output").appendChild(stats.domElement);

    return stats;
};

// Handling window resize
function onResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
};