Three.js

THREE.JS - GEOMETRIES

Geometries are used to create and define shapes in Three.js. Three.js has many types of built-in geometries both 2D and 3D.

In this chapter, we’ll discuss basic built-in geometries. We’ll first look at the 2D geometries and after that, we’ll explore all the basic 3D geometries that are available.

Plane Geometry

The THREE.PlaneGeometry is used to create a simple 2D rectangle. It takes four arguments, the width, height are mandatory and the widthSegments, heightSegments are optional.

const plane = new THREE.PlaneGeometry(
  width, height, 
  widthSegments, heightSegments
)

Example: Plane Geometry

Circle Geometry

The THREE.CircleGeometry is used to create a simple 2D circle. It takes four arguments and all are optional.

const circle = new THREE.CircleGeometry(
  radius, segments, 
  thetaStart, thetaLength
)

Example: Circle Geometry

Ring Geometry

The THREE.RingGeometry creates a 2D disc with a hole in the center. This is very similar to circle geometry.

const ring = new THREE.RingGeometry(
    innerRadius, outerRadius,
    thetaSegments, phiSegments,
    thetaStart, thetaLength
  )

Example: Ring Geometry

Box Geometry

The THREE.BoxGeometry creates a simple 3D box with specified dimensions. This is the expanded version of PlaneGeometry in z axis as depth.

const box = new THREE.CubeGeometry(
    width, height, depth, 
    widthSegments, heightSegments, depthSegments
  )

Example: Cube geometry

Sphere Geometry

The THREE.SphereGeometry is used to create 3D sphere geometries. You can create different types of sphere-related geometries by passing the arguments.

const sphere = new THREE.SphereGeometry(
    radius, 
    widthSegments, heightSegments, 
    phiStart, phiLength, 
    thetaStart, thetaLength
  )

Example: Sphere Geometry

Cylinder Geometry

To create a cylinder in Three.js, you can use the Three.CylinderGeometry.

const cylinder = new THREE.CylinderGeometry(
    radiusTop, radiusBottom, height,
    radialSegments, heightSegments,
    openEnded,
    thetaStart, thetaLength
  )

Example: Cylinder Geometry

Cone Geometry

You can use THREE.ConeGeometry to create a cone. It is very similar to CylinderGeometry, except it only allows you to set the radius instead of radiusTop and radiusBottom.

const cone = new THREE.ConeGeometry(
    radius, height,
    radialSegments, heightSegments,
    openEnded,
    thetaStart, thetaLength
  )

Example: Cone Geometry

Torus Geometry

Torus is a tube-like shape that looks like a donut. You can use THREE.TorusGeometry to create a torus in Three.js. The arguments, radialSegments and tubularSegments are the number of segments along the radius and tube respectively. With arc property, you can control whether the torus has drawn a full circle.

const torus = new THREE.TorusGeometry(
    radius, tubeRadius,
    radialSegments, tubularSegments,
    arc
  )

Example: Torus Geometry

TorusKnot Geometry

A torus knot is a special kind of knot that looks like a tube that winds around itself a couple of times. You can create a torus-knot using THREE.TorusKnotGeometry. It’s pretty similar to TorusGeometry with additional properties, the p and q.

const torusKnot = new THREE.TorusKnotGeometry(
    radius, tubeRadius, 
    tubularSegments, radialSegments, 
    p, q
  )

Example: Torus knot Geometry

Polyhedron Geometry

A polyhedron is a geometry that has only flat faces and straight edges. You can draw different types of polyhedrons by specifying vertices and indices.

The following code creates a tetrahedron, which is a polyhedron with 4 faces.

const vertices = [
    1, 1, 1,
    -1, -1, 1,
    -1, 1, -1,
    1, -1, -1
  ]

const indices = [
    2, 1, 0,
    0, 3, 2,
    1, 3, 0,
    2, 3, 1
  ]

const geometry = new THREE.PolyhedronGeometry(vertices, indices, radius, detail)

Example: Polyhedron Geometry

Three.js also has geometries for some common polyderons.

Polyhedron no. of faces code example
Tetrahedron 4 THREE.TetrahedronGeometry Tetrahedron Grometry
Octahedron 8 THREE.OctahedronGeometry Octahedron Geometry
Dodecahedron 12 THREE.DodecahedronGeometry Dodecahedron Geometry
Icosahedron 20 THREE.IcosahedronGeometry Icosahedron Geometry

Learn more about geometries here.