fix: allow images to receive custom planes

README.md

@@ -1328,6 +1328,20 @@ To make the material transparent:
 <Image url="/file.jpg" transparent opacity={0.5} />
 ```
 
+You can have custom planes, for instance a rounded-corner plane.
+
+```jsx
+import { extend } from '@react-three/fiber'
+import { Image } from '@react-three/drei'
+import { easing, geometry } from 'maath'
+
+extend({ RoundedPlaneGeometry: geometry.RoundedPlaneGeometry })
+
+<Image url="/file.jpg">
+  <roundedPlaneGeometry args={[1, 2, 0.15]} />
+</Image>
+```
+
 #### Text
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st) ![](https://img.shields.io/badge/-suspense-brightgreen)

package.json

@@ -67,7 +67,7 @@
     "lodash.clamp": "^4.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",
-    "maath": "^0.9.0",
+    "maath": "^0.10.7",
     "meshline": "^3.1.6",
     "react-composer": "^5.0.3",
     "react-merge-refs": "^1.1.0",

src/core/Image.tsx

@@ -38,8 +38,8 @@ declare global {
 const ImageMaterialImpl = /* @__PURE__ */ shaderMaterial(
   {
     color: /* @__PURE__ */ new THREE.Color('white'),
-    scale: [1, 1],
-    imageBounds: [1, 1],
+    scale: /* @__PURE__ */ new THREE.Vector2(1, 1),
+    imageBounds: /* @__PURE__ */ new THREE.Vector2(1, 1),
     map: null,
     zoom: 1,
     grayscale: 0,
@@ -102,11 +102,26 @@ const ImageBase: ForwardRefComponent<Omit<ImageProps, 'url'>, THREE.Mesh> = /* @
       side,
       ...props
     }: Omit<ImageProps, 'url'>,
-    ref: React.ForwardedRef<THREE.Mesh>
+    fref: React.ForwardedRef<THREE.Mesh>
   ) => {
     extend({ ImageMaterial: ImageMaterialImpl })
+    const ref = React.useRef<THREE.Mesh>(null!)
     const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale]
     const imageBounds = [texture!.image.width, texture!.image.height]
+    React.useImperativeHandle(fref, () => ref.current, [])
+    React.useLayoutEffect(() => {
+      // Support arbitrary plane geometries (for instance with rounded corners)
+      // @ts-ignore
+      if (ref.current.geometry.parameters) {
+        // @ts-ignore
+        ref.current.material.scale.set(
+          // @ts-ignore
+          planeBounds[0] * ref.current.geometry.parameters.width,
+          // @ts-ignore
+          planeBounds[1] * ref.current.geometry.parameters.height
+        )
+      }
+    }, [])
     return (
       <mesh ref={ref} scale={Array.isArray(scale) ? [...scale, 1] : scale} {...props}>
         <planeGeometry args={[1, 1, segments, segments]} />

yarn.lock

@@ -9568,10 +9568,10 @@ lru-cache@^7.14.1, lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
   integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
 
-maath@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/maath/-/maath-0.9.0.tgz#425a9600dfc5d0aecfa48029a2e3eea852531b06"
-  integrity sha512-aAR8hoUqPxlsU8VOxkS9y37jhUzdUxM017NpCuxFU1Gk+nMaZASZxymZrV8LRSHzRk/watlbfyNKu6XPUhCFrQ==
+maath@^0.10.7:
+  version "0.10.7"
+  resolved "https://registry.yarnpkg.com/maath/-/maath-0.10.7.tgz#9289b42a5db8ac5b26407b3bfca4e3bebefe50b4"
+  integrity sha512-zQ2xd7dNOIVTjAS+hj22fyj1EFYmOJX6tzKjZ92r6WDoq8hyFxjuGA2q950tmR4iC/EKXoMQdSipkaJVuUHDTg==
 
 magic-string@^0.25.7:
   version "0.25.9"