Having trouble loading an image with texture loader in Three.js? The issue may be related to the size and scale of the plane geometry

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 :)

Answer №1

If you're adjusting a perfectly square plane using PlaneGeometry(1.052, 0.6329), you have a couple of choices:

  1. Modify the original texture in an image editing program to fit the new aspect ratio.
  2. Utilize the Texture.repeat() function to adjust the texture scale. You'll need to determine the correct aspect ratio and apply it. The calculation might look something like this:
const texture = loader.load('mapa.jpg');

const ratio = 0.6329 / 1.052;
texture.repeat.set(1, ratio);

var imageMap = new THREE.MeshBasicMaterial({map: texture});

For more information on the texture.repeat method, refer to the documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

I have successfully implemented a method to change CSS variables using advice found here. However, I am running into an issue where the changes do not persist. After clicking on a navigation link, the styles momentarily switch to the new values but quickly ...

The compatibility issue between Bootstrap4 Navbar and "jQuery.BgSwitcher" is causing functionality limitations on mobile devices

Currently, I am utilizing Bootswatch4 within Bootstrap4 and have a requirement for a div with backgrounds that change or fade. After some research, I stumbled upon a JavaScript solution that aligns closely with my needs at: https://github.com/rewish/jquery ...

"Utilizing AngularJS to asynchronously send an HTTP POST request and dynamically update

I've been working on an angularjs chat module and have come across a challenge. I developed an algorithm that handles creating new chats, with the following steps: Click on the 'New Chat' button A list of available people to chat with wil ...

Utilizing JavaScript within the Spring MVC form tag

Can you please assist me with the following question? I am currently working on a project using JSP, where we are utilizing Spring form tags. My issue involves creating two radio buttons that, when clicked, will display different options and pass the sele ...

Unlocking the secret to accessing state in a JavaScript file using VUEX

Can anyone help me figure out why I can't access the currentUser property from the state in my vuex store's user.js file? I'm trying to use it in auth.js, but when I write: store.state.currentUser.uid === ... This is the error message I&apo ...

The sidebar.querySelector method is not working as expected

Attempting to assign an 'active' class to the clicked 'nav-link' element in order for it to stay active on the next page the user navigates to. Encountering an issue with sidebar.getElementsByClassName is not a function showing up in t ...

I cannot seem to locate the module npm file

Currently, I am in the process of following a Pluralsight tutorial. The instructor instructed to type 'npm install' on the terminal which resulted in the installation of a file named npm module in the specified folder. However, when I attempted t ...

Issue with draggable div containing gmap not functioning on mobile browsers

Is it possible to make a specific div draggable without dragging the content inside, such as a gmap widget? I have tried implementing this functionality in my code and it works on a computer browser but not on a mobile browser. Here is the simplified versi ...

Unable to bind to property as it is not recognized as a valid attribute of the selector component

I have a situation where I need to pass a variable from one component to another using @input. Here is my parent component : @Component({ selector: 'aze', templateUrl: './aze.component.html', styleUrls: [('./aze.compo ...

Issue with VueJS instance: Unable to prevent default behavior of an event

Is there a way to disable form submission when the enter key is pressed? Take a look at the different methods I've attempted along with the code and demo example provided below. SEE PROBLEM DEMO HERE Intended outcome: When you focus on the input, pr ...

Guide to invoking a server-side function through JSON data?

Here is the code I am working on: <script type="text/JavaScript> var myarray = new array(); function getsvg1() { $.ajax({ alert("hello"); type: "post", url: "WebForm1.aspx/getsvg1", ...

Is there a package available in nodejs that offers an array with a maximum length?

Looking for a nodejs package that offers an array-like structure with a maximum length feature. This package should automatically delete the oldest data and add new data when you push a new record into it. ...

The terminal in VS CODE is not able to detect Stripe

When I attempt to run the command 'stripe listen' in the VS Code terminal, an error is thrown: The term 'stripe' is not recognized as the name of a cmdlet, function, script file, or operable program. Please check the spelling of the ...

Issue: unable to inject ngAnimate due to uncaught object error

Whenever I attempt to inject 'ngAnimate' into my app, I encounter issues with instantiation. Here is the code snippet in question: var app = angular.module('musicsa', [ 'ngCookies', 'ngResource', 'ngSanit ...

Securing socket.io connection in a nodejs application

I'm currently developing a chat application that utilizes sockets for bi-directional message sharing. Although the socket is functioning properly, I would like to implement user authentication before granting access to the socket connection. I'v ...

Angular 2 Error: When used in strict mode functions or arguments objects, the properties 'caller', 'callee', and 'arguments' may cause a TypeError

I'm facing an issue with Angular 2 that seems to be a common problem, but I haven't been able to find a solution yet. I've created a service that is called from another Component, which works fine. The problem arises when I try to make an h ...

Create a JavaScript object containing placeholders and another JavaScript object that holds the substitutions to be used

I have a placeholder object named ${var_name} { "name": "${title}", "description": "${description}", "provider": { "@type": "Organization" }, "hasInstance": [ ...

Expanding the fields in passport.js local strategy

Passport.js typically only allows for username and password in its middleware as default. I am looking to include a third field in Passport.js. Specifically, I require username, email, and password to be utilized in my case. ...

Angular2 - HTML not displaying the response

I am currently mastering angularjs2. In my latest project, I attempted to fetch data from an API and received a response successfully. However, I encountered an issue where the response is not rendering in homepage.component.html as expected. I am unsure o ...

The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

I am encountering an issue with the dropdown menu that is not closing when clicking outside of the menu button. Despite having faced this problem before, I can't seem to find a solution now. Any help would be greatly appreciated as I am uncertain why ...