[React-Three-Fiber] Size planeGeometry in relation to image texture

Questions
1

Hello everyone!

I am building a 3D gallery image with planes mapped with image textures. I am having trouble sizing the planes in accordance to the images’ size, as well as dynamically changing the planes’ size, as the images’ slightly differ.

here what I have at the moment: https://codesandbox.io/s/alligatordemoreact-three-fiber-forked-24mw9?file=/src/components/Cubes/Cube.js:1733-1746

thanks a lot!

2

Hi @Audreyk,

I came up with a simple solution like this. Seeing most of the images are around 1000*1000 pixel size and the plane sizes are around 1 unit, I decided to get the width and height of the image, divide them by 1000 to normalize the values and use them as plane size.

So if you add these lines just before your return statement in Cube.js it should look fine:

  const imgHeight = props.props.link.image.height / 1000;
  const imgWidth = props.props.link.image.width / 1000;

Additionally, if you have small and larger images in there as well you can make them to fit in some min width or height similar way.

image
image788×764 93.8 KB

3

@Sarge it works like a charm! thank you so much :slight_smile:

1 Like
4

for varied sized images you can use drei’s useAspect: https://github.com/pmndrs/drei#useaspect

you will probably have to copy the hook and change the 2 lines of source a bit because, as is, it fills the screen similar to css cover.

const { viewport } = useThree()
const size = useAspect("cover", imageWidth, imageHeight, 1 - (maxWidth / viewport.width)
5

I’ve been trying to edit those 2 lines of source code but I can’t seem to get it…
Sorry but could you assist please?

Here’s what I have thus far, but does not appear to be working…

export function useAspect(width, height, factor = 1, targetImg) {
  const adaptedHeight =
    height *
    (targetImg.width / targetImg.height > width / height
      ? targetImg.width / width
      : targetImg.height / height);
  const adaptedWidth =
    width *
    (targetImg.width / targetImg.height > width / height
      ? targetImg.width / width
      : targetImg.height / height);
  return [adaptedWidth * factor, adaptedHeight * factor, 1];
}