feat: replaced ExtrudeGeometry with RoundedBoxGeometry

.storybook/stories/Shapes.RoundedBox.stories.tsx

@@ -21,7 +21,7 @@ function RoundedBoxScene() {
       ref={ref}
       args={[number('width', 25), number('height', 25), number('depth', 25)]}
       radius={number('radius', 1)}
-      smoothness={number('smoothness', 5)}
+      segments={number('segments', 5)}
     >
       <meshPhongMaterial color="#f3f3f3" wireframe />
     </RoundedBox>
@@ -41,7 +41,7 @@ function RoundedBoxScene2() {
         ref={ref}
         args={[number('width', 25), number('height', 25), number('depth', 25)]}
         radius={number('radius', 8)}
-        smoothness={number('smoothness', 5)}
+        segments={number('segments', 5)}
       >
         <meshPhongMaterial color="#f3f3f3" />
       </RoundedBox>

README.md

@@ -1160,14 +1160,13 @@ Short-cuts for a [mesh](https://threejs.org/docs/#api/en/objects/Mesh) with a [b
 
 #### RoundedBox
 
-A box buffer geometry with rounded corners, done with extrusion.
+A box buffer geometry with rounded corners.
 
 ```jsx
 <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
-  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.
+  segments={4} // The number of curve segments. Default is 4, setting it to 0 corresponds to the <Box /> component
   creaseAngle={0.4} // Smooth normals everywhere except faces that meet at an angle greater than the crease angle
   {...meshProps} // All THREE.Mesh props are valid
 >

src/core/RoundedBox.tsx

@@ -1,68 +1,52 @@
 import * as React from 'react'
-import { Mesh, Shape, ExtrudeGeometry } from 'three'
+import { Mesh } from 'three'
+import { RoundedBoxGeometry, toCreasedNormals } from 'three-stdlib'
+import { Node, extend } from '@react-three/fiber'
 import { ForwardRefComponent, NamedArrayTuple } from '../helpers/ts-utils'
-import { toCreasedNormals } from 'three-stdlib'
 
-const eps = 0.00001
-
-function createShape(width: number, height: number, radius0: number) {
-  const shape = new Shape()
-  const radius = radius0 - eps
-  shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true)
-  shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true)
-  shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true)
-  shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true)
-  return shape
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      roundedBoxGeometry: Node<any, any>
+    }
+  }
 }
 
 type Props = {
   args?: NamedArrayTuple<(width?: number, height?: number, depth?: number) => void>
+  segments?: number
   radius?: number
-  smoothness?: number
-  bevelSegments?: number
-  steps?: number
   creaseAngle?: number
 } & Omit<JSX.IntrinsicElements['mesh'], 'args'>
 
 export const RoundedBox: ForwardRefComponent<Props, Mesh> = /* @__PURE__ */ React.forwardRef<Mesh, Props>(
   function RoundedBox(
     {
       args: [width = 1, height = 1, depth = 1] = [],
+      segments = 4,
       radius = 0.05,
-      steps = 1,
-      smoothness = 4,
-      bevelSegments = 4,
       creaseAngle = 0.4,
       children,
       ...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]
-    )
-    const geomRef = React.useRef<ExtrudeGeometry>(null!)
+    React.useMemo(() => extend({ RoundedBoxGeometry }), [])
+
+    const geomRef = React.useRef<RoundedBoxGeometry>(null!)
+
+    const args = React.useMemo(() => [width, height, depth, segments, radius], [width, height, depth, segments, radius])
 
     React.useLayoutEffect(() => {
       if (geomRef.current) {
         geomRef.current.center()
         toCreasedNormals(geomRef.current, creaseAngle)
       }
-    }, [shape, params])
+    }, [args])
 
     return (
       <mesh ref={ref} {...rest}>
-        <extrudeGeometry ref={geomRef} args={[shape, params]} />
+        <roundedBoxGeometry ref={geomRef} args={args} />
         {children}
       </mesh>
     )