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();
}