...

/

3D Geometries: TorusGeometry and TorusKnotGeometry

3D Geometries: TorusGeometry and TorusKnotGeometry

Learn how to use THREE.TorusGeometry, THREE.TorusKnotGeometry and set their properties.

The THREE.TorusGeometry

A torus is a simple shape that looks like a donut. The following screenshot shows THREE.TorusGeometry in action:

Press + to interact
3D TorusGeometry
3D TorusGeometry

Example: TorusGeometry

Let’s execute the torus-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/torus-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.TorusGeometry

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

Properties of THREE.TorusGeometry

Just like most of the simple geometries, there aren’t any mandatory arguments when creating THREE.TorusGeometry. The following list mentions the arguments we can specify when creating this geometry:

  • radius: This sets the size of the complete torus. The default value is 100.

  • tube ...