Learn Three.js for 3D Computer Graphics/

...

/

Geometries and Meshes

Geometries and Meshes

Learn about geometries, meshes, and their properties.

We'll cover the following...

How geometries and meshes are related 

In each of the examples so far, we’ve seen geometries and meshes being used. For instance, to create a sphere and add it to the scene, we used the following: 

Press + to interact
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
const sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff);
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

  • Line 1: We defined the geometry THREE.SphereGeometry, which is the shape of an object.

  • Line 2: We set its material THREE.MeshBasicMaterial.

  • Line 3: We combined these two in a mesh THREE.Mesh.

  • Line 4: Finally, we added it to a scene.

In this lesson, we’ll take a closer look at geometries and meshes. We’ll start with geometries.

The properties and functions of a geometry 

Three.js comes with a large set of geometries that we can use in our 3D scene. Just add a material, create a mesh and we’re pretty much done. The following playground shows a couple of the standard geometries available in Three.js:

Press + to interact
Some of the basic geometries available in the scene
Some of the basic geometries available in the scene

Example: Standard geometries

Click the “Run” button to see the basic geometries:

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-1': './samples/chapters/chapter-2/geometries.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',
  }
}
Shows some of the basic geometries available in the Three.js 

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

Create custom geometries: Cube

A geometry in Three.js and in most other 3D libraries, is basically a collection of points in a 3D space, also called vertices (where a single point is called a vertex) along with a number of faces connecting those points. Take, for example, a cube: 

  • A cube has eight corners. Each of these corners can be defined as an x−x-, ...