Shapes and Polylines

Introduction

With shapes and polylines we're able to create more complex models than just with basic shapes. Shapes from three.js offer many different curves like bezier-curves, quadratic-curves, splines,... See three.js documentation for detailed information about the Shape. Another way to draw 2D Shapes is to use polylines. Polylines are less complex but valuable, especially for drawing shapes with defined fillets (edge radius). You can specify a set of points and then, for each corner, a radius between the connecting lines.

Let's create an example for each way.

Shapes

The following example creates a simple shape of a fish and extrudes the shape.

const x = 25, y = 25

const shape = new THREE.Shape()

shape.moveTo(x, y)

shape.quadraticCurveTo(x + 50, y - 80, x + 90, y - 10)

shape.quadraticCurveTo(x + 100, y - 10, x + 115, y - 40)

shape.quadraticCurveTo(x + 115, y, x + 115, y + 40)

shape.quadraticCurveTo(x + 100, y + 10, x + 90, y + 10)

shape.quadraticCurveTo(x + 50, y + 80, x, y)

const basicBody = api.extrude([0, 0, 5], shape)

const geom = await api.createBufferGeometry(basicBody)

const mesh = new THREE.Mesh(

geom,

new THREE.MeshStandardMaterial({ transparent: true, opacity: 1, color: new THREE.Color('rgb(255, 120, 255)') }),

)

return [mesh]

First of all we defined where to start the shape by setting x and y to 25. Then we created all the necessary curves. In this case we used the quadratic curve, for more information see the docu for .quadraticCurveTo(). After closing the shape, by creating the last quadratic curve to the start point, we extruded it in z-direction by 5. The mesh can be created by calling createBufferGeometry.

Fish created with threejs Shape and extruded by Solid API

To get an idea how to use other curves vist this example on threejs.

Polylines

Polylines can be created by adding a set of points and connecting them with a straight line. By connecting the last point with the first one, we're getting a shape that can be extruded. The most straightforward shape is a triangle. To create a triangle, we need to define three points without any radius:

const fp0: FilletPoint = { point: new Vector3(0, 0, 0), radius: 0 }

const fp1: FilletPoint = { point: new Vector3(25, 25, 0), radius: 0 }

const fp2: FilletPoint = { point: new Vector3(50, 0, 0), radius: 0 }

Next, we create a rectangle and extrude it to get a box. After setting the fillet points, we must create the polyline to extrude the shape. Let's have a look at the code:

const fp0: FilletPoint = { point: new Vector3(0, 50, 0), radius: 0 }

const fp1: FilletPoint = { point: new Vector3(50, 50, 0), radius: 0 }

const fp2: FilletPoint = { point: new Vector3(50, 0, 0), radius: 0 }

const fp3: FilletPoint = { point: new Vector3(0, 0, 0), radius: 0 }

const polyline: Polyline = createPolyline([fp0, fp1, fp2, fp3])

const extrusion = api.extrude([0, 0, 50], polyline)

As you can see, we've created a polyline from the points and gave it as a parameter to the extrude function. Because of setting the extrude height to 50, our result will be a cube as in the following picture.

A simple cube created with polylines and extrusion

We didn't use any radius so far. Let's add some different radius to each of the corners. Change the code above and add for:

const fp0: ... radius: 2 }

const fp1: ... radius: 6 }

const fp2: ... radius: 10 }

const fp3: ... radius: 14 }

As you can see, the definition of a radius will add a fillet (tangentially connect the lines of a corner) to each corner.

Extruded polyline with fillets on the corners

Furthermore we can change the radius to the half of the length of the box's side length, that will lead to a circular shape and after extrusion to a simple cylinder.

Extruded polyline with fillet size = box side length / 2

Of course it's also possible to set fillets between lines, which do not include an orthogonal angle. The next example shows us two equilateral triangles. One of it contains fillets on the corners.

Fillets on corners which include non orthogonal angles

See also an interesting example about creating a profile with polylines. You can find the example in our public application buerli-examples. There are even more examples with shapes and polylines.