Three.js Pointer lock controls create hole in sky dome

My problem is that when I mouse around my scene with pointer lock controls a white circle appears in my sky dome and moves with my mouse. This is what the circle looks like. The code for my sky dome is

    var skyGeo = new THREE.SphereGeometry(1000, 50, 50);
    var skytexture = loader.load( "textures/1.jpg" );
    var skymaterial = new THREE.MeshBasicMaterial({ map: skytexture, side: THREE.DoubleSide});
    var sky = new THREE.Mesh(skyGeo, skymaterial);
    sky.position.set(0, 0, 0)
    scene.add(sky);

I tested the scene using orbit controls instead and no circle appeared, so I think its a pointer lock problem. Does anyone know what is causing this?

You probably need to increase your camera.far distance. It looks like your sky dome is getting clipped.