feat: Create and export RoundedBoxGeometry (#2464)

* feat: Create and export RoundedBoxGeometry

* fix: formatting, linting and test workflow

---------

Co-authored-by: Faraz Shaikh <[email protected]>

Author: mommysgoodpuppy

.storybook/stories/RoundedBox.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, StoryObj } from '@storybook/react-vite'
 import { Setup } from '../Setup'
 import { useTurntable } from '../useTurntable'
 
-import { RoundedBox } from '../../src'
+import { RoundedBox, RoundedBoxGeometry } from '../../src'
 
 export default {
   title: 'Shapes/RoundedBox',
@@ -20,6 +20,7 @@ export default {
 } satisfies Meta<typeof RoundedBox>
 
 type Story = StoryObj<typeof RoundedBox>
+type GeometryStory = StoryObj<typeof RoundedBoxGeometry>
 
 function RoundedBoxScene(props: React.ComponentProps<typeof RoundedBox>) {
   const ref = useTurntable<React.ComponentRef<typeof RoundedBox>>()
@@ -65,3 +66,30 @@ export const RoundedBoxSt2 = {
   render: (args) => <RoundedBoxScene2 {...args} />,
   name: 'Solid',
 } satisfies Story
+
+function RoundedBoxGeometryScene(props: React.ComponentProps<typeof RoundedBoxGeometry>) {
+  const ref = useTurntable<React.ComponentRef<typeof RoundedBox>>()
+
+  return (
+    <>
+      <spotLight position={[35, 35, 35]} intensity={2 * Math.PI} decay={0} />
+      <mesh ref={ref}>
+        <RoundedBoxGeometry {...props} />
+        <meshPhongMaterial color="#f3f3f3" />
+      </mesh>
+    </>
+  )
+}
+
+export const RoundedBoxGeometrySt = {
+  args: {
+    args: [20, 20, 20],
+    radius: 2,
+    smoothness: 8,
+    bevelSegments: 2,
+    steps: 1,
+    creaseAngle: 0.1,
+  },
+  render: (args) => <RoundedBoxGeometryScene {...args} />,
+  name: 'From Geometry',
+} satisfies GeometryStory

docs/shapes/rounded-box.mdx

@@ -9,6 +9,7 @@ A box buffer geometry with rounded corners, done with extrusion.
 <RoundedBox
   args={[1, 1, 1]} // Width, height, depth. Default is [1, 1, 1]
   radius={0.05} // Radius of the rounded corners. Default is 0.05
+  steps={1} // Extrusion steps. Default is 1
   smoothness={4} // The number of curve segments. Default is 4
   bevelSegments={4} // The number of bevel segments. Default is 4, setting it to 0 removes the bevel, as a result the texture is applied to the whole geometry.
   creaseAngle={0.4} // Smooth normals everywhere except faces that meet at an angle greater than the crease angle
@@ -17,3 +18,23 @@ A box buffer geometry with rounded corners, done with extrusion.
   <meshPhongMaterial color="#f3f3f3" wireframe />
 </RoundedBox>
 ```
+
+Geometry is also available. Useful for '@react-three/csg'
+
+```jsx
+<mesh>
+  <RoundedBoxGeometry
+    args={[1, 1, 1]}
+    radius={0.05}
+    steps={1}
+    smoothness={4}
+    bevelSegments={4}
+    creaseAngle={0.4}
+  />
+  <meshPhongMaterial color="#f3f3f3" wireframe />
+</mesh>
+```
+
+> **Tip:** If you animate `args` every frame, memoise the
+> `[width, height, depth]` tuple with `React.useMemo` to avoid replacing the
+> geometry each tick.

src/core/Caustics.tsx

@@ -1,6 +1,3 @@
-// TODO: ESLint thinks Caustics is executed in a loop.
-/* eslint-disable react-hooks/rules-of-hooks */
-
 /** Author: @N8Programs https://github.com/N8python
  *    https://github.com/N8python/caustics
  */

src/core/Image.tsx

@@ -145,7 +145,6 @@ const ImageBase: ForwardRefComponent<Omit<ImageProps, 'url'>, THREE.Mesh> = /* @
           planeBounds[1] * ref.current.geometry.parameters.height
         )
       }
-      /* eslint react-hooks/exhaustive-deps: 1 */
     }, [planeBounds[0], planeBounds[1]])
     return (
       <mesh ref={ref} scale={Array.isArray(scale) ? [...scale, 1] : scale} {...props}>

src/core/RoundedBox.tsx

@@ -25,6 +25,9 @@ export type RoundedBoxProps = {
   creaseAngle?: number
 } & Omit<ThreeElements['mesh'], 'ref' | 'args'>
 
+export type RoundedBoxGeometryProps = Omit<RoundedBoxProps, 'children'> &
+  Omit<ThreeElements['extrudeGeometry'], 'args' | 'ref'>
+
 export const RoundedBox: ForwardRefComponent<RoundedBoxProps, Mesh> = /* @__PURE__ */ React.forwardRef<
   Mesh,
   RoundedBoxProps
@@ -41,32 +44,57 @@ export const RoundedBox: ForwardRefComponent<RoundedBoxProps, Mesh> = /* @__PURE
   },
   ref
 ) {
-  const shape = React.useMemo(() => createShape(width, height, radius), [width, height, radius])
-  const params = React.useMemo(
-    () => ({
-      depth: depth - radius * 2,
-      bevelEnabled: true,
-      bevelSegments: bevelSegments * 2,
-      steps,
-      bevelSize: radius - eps,
-      bevelThickness: radius,
-      curveSegments: smoothness,
-    }),
-    [depth, radius, smoothness]
-  )
-  const geomRef = React.useRef<ExtrudeGeometry>(null!)
-
-  React.useLayoutEffect(() => {
-    if (geomRef.current) {
-      geomRef.current.center()
-      toCreasedNormals(geomRef.current, creaseAngle)
-    }
-  }, [shape, params])
-
   return (
     <mesh ref={ref} {...rest}>
-      <extrudeGeometry ref={geomRef} args={[shape, params]} />
+      <RoundedBoxGeometry
+        args={[width, height, depth]}
+        radius={radius}
+        steps={steps}
+        smoothness={smoothness}
+        bevelSegments={bevelSegments}
+        creaseAngle={creaseAngle}
+      />
       {children}
     </mesh>
   )
 })
+
+export const RoundedBoxGeometry: ForwardRefComponent<RoundedBoxGeometryProps, ExtrudeGeometry> =
+  /* @__PURE__ */ React.forwardRef<ExtrudeGeometry, RoundedBoxGeometryProps>(function RoundedBoxGeometry(
+    {
+      args: [width = 1, height = 1, depth = 1] = [],
+      radius = 0.05,
+      steps = 1,
+      smoothness = 4,
+      bevelSegments = 4,
+      creaseAngle = 0.4,
+      ...rest
+    },
+    ref
+  ) {
+    const shape = React.useMemo(() => createShape(width, height, radius), [width, height, radius])
+    const params = React.useMemo(
+      () => ({
+        depth: depth - radius * 2,
+        bevelEnabled: true,
+        bevelSegments: bevelSegments * 2,
+        steps,
+        bevelSize: radius - eps,
+        bevelThickness: radius,
+        curveSegments: smoothness,
+      }),
+      [depth, radius, smoothness, bevelSegments, steps]
+    )
+    const geomRef = React.useRef<ExtrudeGeometry>(null!)
+
+    React.useLayoutEffect(() => {
+      if (geomRef.current) {
+        geomRef.current.center()
+        toCreasedNormals(geomRef.current, creaseAngle)
+      }
+    }, [shape, params, creaseAngle])
+
+    React.useImperativeHandle(ref, () => geomRef.current)
+
+    return <extrudeGeometry ref={geomRef} args={[shape, params]} {...rest} />
+  })