Problem with textureloader and image real size

Hi everyone!
I need display image in scene in real size without scale. I dont know how i can add this image in scane with textureLoader and how i can calculate planeGeometry. My image size have 3976px / 2392px. In the moment when i add image with terture i have very blured and distorted picture

My code:

		function init() {
	
			container = document.getElementById('cad-view');
	
			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xffffff );
	
			height = $('.page-footer').offset().top - $('.frame-wrap').offset().top - $('.frame-wrap').outerHeight();

			camera = new THREE.PerspectiveCamera( 70, window.screen.width / height, 1, 5000 );
	
			camera.position.z = 2;
			camera.position.x = 0;
			camera.position.y = 0;
		
			renderer = new THREE.WebGLRenderer({antialias: true});
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			container.appendChild( renderer.domElement );
		
			var loader = new THREE.TextureLoader();

			var texture = loader.load( "mapa.jpg", function ( tex ) {
			
			    console.log( tex.image.width, tex.image.height );
			    console.log( texture.image.width, texture.image.height );
			   
			    var objectMap = new THREE.Mesh(
			  			    
			        new THREE.PlaneGeometry(10,5),
			        new THREE.MeshBasicMaterial({
			            map: tex
			        })
				);

			    scene.add(objectMap);
			    objects.push( objectMap );
				controls = new DragControls( [ ... objects ], camera, renderer.domElement );
				controls.addEventListener( 'drag', render );
			
				window.addEventListener( 'resize', onWindowResize );
				document.addEventListener( 'click', onClick );
				window.addEventListener( 'keydown', onKeyDown );
				window.addEventListener( 'keyup', onKeyUp );
			} );

			render();
		}

Please show what you do with a live example. You can modify the following fiddle that I have already prepared with a dummy texture: Edit fiddle - JSFiddle - Code Playground