Can someone please assist me with loading images using TextureLoader? I am encountering a major issue where I am unsure how to add images to a mesh in a 1:1 scale and calculate PlaneGeometry. My goal is to display the loaded image in its original size without any scaling function applied. It is crucial that the image is shown in its original size without any distortions or blurring.
Here is the code I am currently using:
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 = 1;
camera.position.x = 100;
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 mapGeometry = new THREE.PlaneGeometry(1.052, 0.6329);
var imageMap = new THREE.MeshBasicMaterial({map: loader.load('mapa.jpg')});
var objectMap = new THREE.Mesh(mapGeometry, imageMap);
console.log(objectMap);
objectMap.position.set(100, 0, 0);
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();
}
Any assistance or guidance on this matter would be greatly appreciated. Thank you in advance :)