Search code examples
javascriptthree.jstextures

Three.js is there a way to adapt the geometry to the texture

I am working in a project in Three.js and I need to have multiple images floating into a 3D space. So I started to simply use these images as textures on planes. However, images have a different height and width so I am just wondering if there is a way to make the plane adapt to the size of the textures. Or be proportional with it.

There's maybe a simple way to do it but I didn't find anything. May one of you can help me, or tell me to stop looking for it ?

Solution

  • When loading a texture, you can check its size and THEN create the plane to host it with the right width/height ratio:

    var loader = new THREE.TextureLoader();
var texture = loader.load( "./img.png", function ( tex ) {
    console.log( tex.image.width, tex.image.height );
    // here you can create a plane based on width/height image linear proportion

} );