RoundedBox

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
  {...meshProps} // All THREE.Mesh props are valid
>
  <meshPhongMaterial color="#f3f3f3" wireframe />
</RoundedBox>

Geometry is also available. Useful for '@react-three/csg'

<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/RoundedBox.tsx

Edit this page