# Simple custom geometry

Hello,
I simply would like to implement this custom geometry with fiber:

Thanks.

@hofk’s example is a rounded plane i think, you can just use the code 1:1. i have a rounded box otherwise:

``````export function BoxBlendGeometry({ width = 1, height = 1, radius = 0.2, depth = 1 }) {
const geometry = useRef()
const shape = useMemo(() => {
const s = new THREE.Shape()
s.moveTo(-width / 2, -height / 2 + radius)
s.lineTo(-width / 2, height / 2 - radius)
s.absarc(-width / 2 + radius, height / 2 - radius, radius, 1 * Math.PI, 0.5 * Math.PI, true)
s.lineTo(width / 2 - radius, height / 2)
s.absarc(width / 2 - radius, height / 2 - radius, radius, 0.5 * Math.PI, 0 * Math.PI, true)
s.lineTo(width / 2, -height / 2 + radius)
s.absarc(width / 2 - radius, -height / 2 + radius, radius, 2 * Math.PI, 1.5 * Math.PI, true)
s.lineTo(-width / 2 + radius, -height / 2)
s.absarc(-width / 2 + radius, -height / 2 + radius, radius, 1.5 * Math.PI, 1 * Math.PI, true)
return new THREE.Shape(s.getPoints(10))
const config = useMemo(() => ({ depth, bevelEnabled: false }), [depth])
useLayoutEffect(() => {
geometry.current.translate(0, 0, -depth / 2)
geometry.current.computeVertexNormals()
}, [shape])
return <extrudeGeometry ref={geometry} args={[shape, config]} />
}
``````

you’d use it like this:

``````<mesh>
<meshStandardMaterial color="tomato" />
</mesh>
``````

Thanks a lot !

There is another Round-edged box flat .

1 Like

i think the outcome might even be the same, just a different technique. or would triangulating have benefits over serving extrudegeometry a shape? curious myself …

The code of ExtrudeGeometry is more complex because it covers more functionality.

The result is certainly similar.

Another variation would be to take a circle, double the points at the top, bottom, right, and left, and then use the center point as for the circle for the triangles. Here the doubled points are pushed apart according to the height and width.