Learn Three.js for 3D Computer Graphics/

...

/

2D Geometries: ShapeGeometry

2D Geometries: ShapeGeometry

Learn how to use THREE.ShapeGeometry and set its properties.

We'll cover the following...

The THREE.ShapeGeometry

THREE.PlaneGeometry and THREE.CircleGeometry have limited ways of customizing their appearance. If we want to create custom 2D shapes, we can use THREE.ShapeGeometry.

With THREE.ShapeGeometry, we have a couple of functions we can call to create our own shapes. We can compare this functionality with the <path/> element functionality, which is also available to the HTML canvas element and SVG. Let’s start with an example and after that, we’ll show how we can use the various functions to draw our own shape.

Example: ShapeGeometry

Let’s execute the shape-geometry.js example in the below playground by clicking the “Run” button:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises

// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {

  return {
    module: {
      rules: [
        {
          test: /\.glsl$/i,
          use: 'raw-loader'
        }
      ]
    },
    mode: 'development',
    entry: {
      'chapter-5': './samples/chapters/chapter-5/shape-geometry.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    experiments: {
      asyncWebAssembly: true
    },
    devServer: {
       allowedHosts: 'all',
       host: '0.0.0.0',
       port: '3000',
       static: [
        {
          directory: path.join(__dirname, 'assets'),
          publicPath: '/assets'
        },
        {
          directory: path.join(__dirname, 'dist')
        }
      ] 
    },
  mode: 'development',
  }
}
Explore the properties of THREE.ShapeGeometry

Note: We can change the properties of the geometries from the right control panel in the output screen.

The following screenshot shows the output of this example:

Press + to interact
A custom ShapeGeometry
A custom ShapeGeometry

In this example, we can see a custom-created 2D shape. Before going into the description of the properties, first, let’s look at the code that is used to create this shape. Before we create a THREE.ShapeGeometry object, we first have to create a THREE.Shape object. We can trace these steps by looking at the previous screenshot, where we start in the bottom-right corner. Here’s how we created a THREE.Shape object:

Press + to interact
const drawShape = () => {
// create a basic shape
    const shape = new THREE.Shape()
    // startpoint
    // straight line upwards
    shape.lineTo(10, 40)
    // the top of the figure, curve to the right
    shape.bezierCurveTo(15, 25, 25, 25, 30, 40)
    // spline back down
    shape.splineThru([new THREE.Vector2(32, 30), new
    THREE.Vector2(28, 20), new THREE.Vector2(30, 10)])
    // add 'eye' hole one
    const hole1 = new THREE.Path()
    hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true)
    shape.holes.push(hole1)
    // add 'eye hole 2'
    const hole2 = new THREE.Path()
    hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true)
    shape.holes.push(hole2)
    // add 'mouth'
    const hole3 = new THREE.Path()
    hole3.absarc(20, 16, 2, 0, Math.PI, true)
    shape.holes.push(hole3)
    return shape
}

In this piece of code, we can see that we created the outline of this shape using lines (line 6), curves (line 8), and splines (line 10). After that, we punched a number of holes (lines 13–23) into this shape by using the holes property of THREE.Shape.

Properties of THREE.ShapeGeometry

In this lesson, though, we’re talking about THREE.ShapeGeometry and not THREE.Shape–to create a geometry from THREE.Shape, we need to pass in THREE.Shape (returned, in our case, from the drawShape() function) as the argument to THREE.ShapeGeometry (line 36 ...