ThreeJS: Geometry not getting a clear view

Here, I have added a simple line geometry and some shapes where the geometry is no in clear format where the geometry is getting blurred and not giving a clearview.

You can clearly view in the screenshot which I have added. The line geoemtry will be shattered and not in a clear view.

I'm pretty noob to threejs and I have no idea about it. Kindly, hep me out with the issue.

The fiddle link https://jsfiddle.net/ery47cmo/

    // Inset window with axes showing world orientation
// Useful with Trackball controls when zooming
// WestLangley

// three.js r.69

var container,
    container2,
    camera,
    scene,
    renderer,
    axes,
    camera2,
    scene2,
    renderer2,
    axes2,
    cube,
    CANVAS_WIDTH = 200,
    CANVAS_HEIGHT = 200,
    CAM_DISTANCE = 300;

// main canvas
// -----------------------------------------------

// dom
container = document.getElementById( 'container' );

// renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff, 1 );
renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );

// scene
scene = new THREE.Scene();

// camera
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 150;
camera.position.z = 500;

// controlls
controls = new THREE.TrackballControls( camera, renderer.domElement );
var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

var geometry = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3( -75, 0, 0 ),
    new THREE.Vector3( 0, 75, 0 ),
    new THREE.Vector3( 75, 0, 0 )
);


// cube
cube = new THREE.Mesh( 
    new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 ), 
    new THREE.MeshBasicMaterial( { color : 0xff0000, wireframe: true } 
) );
scene.add( cube );

// axes
axes = new THREE.AxisHelper( 100 );
scene.add( axes );

// inset canvas
// -----------------------------------------------

// dom
container2 = document.getElementById('inset');

// renderer
renderer2 = new THREE.WebGLRenderer();
renderer2.setClearColor( 0xf0f0f0, 1 );
renderer2.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container2.appendChild( renderer2.domElement );

// scene
scene2 = new THREE.Scene();

// camera
camera2 = new THREE.PerspectiveCamera( 50, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
camera2.up = camera.up; // important!

// axes
axes2 = new THREE.AxisHelper( 100 );
scene2.add( axes2 );
var line = new THREE.Line( geometry, material );
scene.add( line );var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

var geometry = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3( -75, 0, 0 ),
    new THREE.Vector3( 0, 75, 0 ),
    new THREE.Vector3( 75, 0, 0 ) 
);

var line = new THREE.Line( geometry, material );
scene2.add( line );
// animate
// -----------------------------------------------

function render() {

    renderer.render( scene, camera );
    renderer2.render( scene2, camera2 );

}

(function animate() {

    requestAnimationFrame( animate );

    controls.update();

    camera2.position.copy( camera.position );
    camera2.position.sub( controls.target ); // added by @libe
    camera2.position.setLength( CAM_DISTANCE );

    camera2.lookAt( scene2.position );
    render();

})();