Simple custom geometry

Questions
1

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

It must be easy but I don’t find so much code about this anywhere.

Thanks.

2

@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))
  }, [width, height, radius, depth])
  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>
  <BoxBlendGeometry radius={0.4} />
  <meshStandardMaterial color="tomato" />
</mesh>
3

Thanks a lot !

4

There is another Round-edged box flat .

1 Like
5

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 …

6

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.