Learn Three.js for 3D Computer Graphics/

...

/

Advanced Geometries: ConvexGeometry and LatheGeometry

Advanced Geometries: ConvexGeometry and LatheGeometry

Learn about advanced geometries and explore THREE.ConvexGeometry, THREE.LatheGeometry and their properties.

We'll cover the following...

In this lesson, we’ll look at a number of advanced Three.js geometries. We’ll start with THREE.ConvexGeometry, which we can use to create convex hulls.

The THREE.ConvexGeometry

With THREE.ConvexGeometry, we can create a convex hull from a set of points. A convex hull is the minimal shape that encompasses all these points. The following screenshot shows this geometry:

Press + to interact
The convex hull encompassing all the points
The convex hull encompassing all the points

Example: ConvexGeometry

Let’s execute the convex-geometry.js example by clicking the “Run” button. Once the application is running, please click the provided link to view the output in a new window.

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-6': './samples/chapters/chapter-6/convex-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.ConvexGeometry

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

In this example, we generate a random set of points and based on these points, we create THREE.ConvexGeometry. We can use the “redraw” button in the menu on the right, which will generate 20 new points and draw the convex hull. If we try this for ourselves, enable the material’s transparency and set the opacity to a level below one to see the points that are ...