Is it possible to modify the geometry in Three.js to match the texture?

Question

Is it possible to modify the geometry in Three.js to match the texture?

Currently, I am immersed in a Three.js project that involves integrating multiple images into a 3D space. My approach so far has been to directly use these images as textures on planes. However, the challenge lies in the fact that these images vary in height and width. This discrepancy has led me to ponder whether there exists a method for the plane to adjust its size based on the dimensions of the textures, or at least maintain proportionality.

I have attempted to find a solution but haven't had any success thus far. If anyone out there can provide guidance or advice on this matter, it would be greatly appreciated!

javascript three.js textures

Answer 1

Answer №1

Before creating a plane to host a texture, it is advisable to first check the size of the texture. This way, you can ensure that the plane has the correct width/height ratio:

var loader = new THREE.TextureLoader();
var texture = loader.load( "./img.png", function ( tex ) {
    console.log( tex.image.width, tex.image.height );
    // Use this information to create a plane with the appropriate dimensions

} );

Answer 2

Before creating a plane to host a texture, it is advisable to first check the size of the texture. This way, you can ensure that the plane has the correct width/height ratio:

var loader = new THREE.TextureLoader();
var texture = loader.load( "./img.png", function ( tex ) {
    console.log( tex.image.width, tex.image.height );
    // Use this information to create a plane with the appropriate dimensions

} );

Is it possible to modify the geometry in Three.js to match the texture?

Answer №1

Similar questions

Optimizing the management of optional post fields in an Express.js application

selecting a number at random from a defined array

Exploring the differences between selecting an element by its class and making multiple calls to select elements

Steps to confirm if a route has been passed a prop

Creating a consolidated System.config mapping for @angular modules using a single .js file

What is the best way to eliminate the content of an element using javascript/typescript?

The color of the button does not change when the jQuery onclick event is triggered

Display a notification upon successfully submitting data in Laravel and Vue.js

Is there a way to seamlessly update button values in VueJs from an api request without needing to reload the page or manually clicking something? Or perhaps there is an alternative method to achieve this?

Is it possible to translate the content of the page into English and French simply by clicking on the designated buttons?

What are some strategies for circumventing the need for two switches?

Is it possible to utilize ag-grid's API to filter multiple checkbox values simultaneously?

What is the process for comparing two objects in TypeScript?

Is it permissible to access an iframe directly by its name?

What is the best way to include an external Javascript file from a different server?

Need help with decoding XML namespaces?

Ways to update a ViewComponent using Ajax in Asp.net Core 3.1

What steps can be taken to customize the default keyboard shortcuts functionality in Swiper.js?

Loop through the array while handling a promise internally and ensure completion before proceeding

Issues with login validation in HTML when utilizing JSON and PHP