pmndrs / drei

🥉 useful helpers for react-three-fiber
https://docs.pmnd.rs/drei
MIT License
8.39k stars 701 forks source link

Hidden Overflowing of <Image /> inside <mesh /> #1402

Closed cecinuga closed 4 days ago

cecinuga commented 1 year ago

^0.151.3 - three version: ^8.12.0 - @react-three/fiber version: ^9.62.2 - @react-three/drei version: v18.12.1 - node version: 8.19.2 - npm (or yarn) version:

Problem description:

Context: a mesh containing an Image , if the mesh scale is different between axes (x: 0.6, y: 0.5) AND the Image scale is equal between axes ( x: 0.5, y: 0.5 ): So the Image overflow in hidden mode on the different axis.

Relevant code:

    const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale]//HERE IS THE BUG
    scale={Array.isArray(scale) ? [...scale, 1] : scale}
    <mesh ref={ref} scale={Array.isArray(scale) ? [...scale, 1] : scale} {...props}>
     <imageMaterial
            color={color}
            map={texture!}
            map-encoding={gl.outputEncoding}
            zoom={zoom}
            grayscale={grayscale}
            opacity={opacity}
            scale={planeBounds}  //HERE IS THE BUG
            imageBounds={imageBounds}
            toneMapped={toneMapped}
            transparent={transparent}
          />

Suggested solution:

Very Simple!!!, pass another prop, (example, imageScale) and add use it for planeBounds

github-actions[bot] commented 2 weeks ago

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

github-actions[bot] commented 4 days ago

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!