Three.js Geometries

Three.js provides a variety of built-in geometries to create different shapes and structures in 3D space. Below is a comprehensive list of geometries, along with examples of how to use them in both Three.js and React-Three-Fiber.

11. OctahedronGeometry

Creates an octahedron (8-faced polyhedron).

OctahedronGeometry(radius?: 1, detail?: 0)

Three.js Example

const geometry = new THREE.OctahedronGeometry(1)

React-Three-Fiber Example

<octahedronGeometry args={[1]} />

octahedron

12. TetrahedronGeometry

Creates a tetrahedron (4-faced polyhedron).

TetrahedronGeometry(radius?: 1, detail?: 0)

Three.js Example

const geometry = new THREE.TetrahedronGeometry(1)

React-Three-Fiber Example

<tetrahedronGeometry args={[1]} />

tetrahedron

13. RingGeometry

Creates a ring.

RingGeometry(innerRadius?: 0.5, outerRadius?: 1, thetaSegments?: 8, phiSegments?: 1, thetaStart?: 0, thetaLength?: Math.PI * 2)

Three.js Example

const geometry = new THREE.RingGeometry(0.5, 1, 32)

React-Three-Fiber Example

<ringGeometry args={[0.5, 1, 32]} />

ring

14. EdgesGeometry

Creates a geometry representing edges only.

EdgesGeometry(geometry: BufferGeometry, thresholdAngle?: 1)
PropertyDescription
geometryAny geometry object
thresholdAngleAn edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value

Three.js Example

const boxGeometry = new THREE.BoxGeometry(1, 1, 1)
const edgeGeometry = new THREE.EdgesGeometry(boxGeometry)
const material = new THREE.LineBasicMaterial({ color: 0xff0000 }) 
const line = new THREE.LineSegments(edgeGeometry, material)

React-Three-Fiber Example

<lineSegments>
  <edgesGeometry args={[new THREE.BoxGeometry(1, 1, 1)]} />
  <lineBasicMaterial color="red" />
</lineSegments>

or

import { Edges } from '@react-three/drei'

<mesh>
  <boxGeometry />
  <Edges />
</mesh>

edges

15. ExtrudeGeometry

Creates an extruded shape.

ExtrudeGeometry(shape: Shape | Shape[], options: ExtrudeGeometryOptions)

ExtrudeGeometryOptions: {
  curveSegments?: 12,
  steps?: 1,
  depth?: 1,
  bevelEnabled?: true,
  bevelThickness?: 0.2,
  bevelSize?: 0.1,
  bevelOffset?: 0,
  bevelSegments?: 3,
  extrudePath?: THREE.Curve,
  UVGenerator?: Object,
}

Three.js Example

const shape = new THREE.Shape()
shape.moveTo(0, 0)
shape.lineTo(0, 1)
shape.lineTo(1, 1)
shape.lineTo(1, 0)
shape.lineTo(0, 0)
const geometry = new THREE.ExtrudeGeometry(shape, { depth: 1, bevelEnabled: false })

React-Three-Fiber Example

const shape = new THREE.Shape()
shape.moveTo(0, 0)
shape.lineTo(0, 1)
shape.lineTo(1, 1)
shape.lineTo(1, 0)
shape.lineTo(0, 0)
<extrudeGeometry args={[shape, { depth: 1, bevelEnabled: false }]} />

extrude

16. LatheGeometry

Creates a geometry by rotating a set of points.

LatheGeometry(points: Vector2[], segments?: 12, phiStart?: 0, phiLength?: Math.PI * 2)

Three.js Example

const points = [...Array(10)].map((_, i) => new THREE.Vector2(Math.sin(i * 0.2) * 5 + 5, (i - 5) * 2))
const geometry = new THREE.LatheGeometry(points, 32)

React-Three-Fiber Example

const points = [...Array(10)].map((_, i) => new THREE.Vector2(Math.sin(i * 0.2) * 5 + 5, (i - 5) * 2))
<latheGeometry args={[points, 32]} />

lathe

17. PolyhedronGeometry

Creates a polyhedron using vertices and faces.

PolyhedronGeometry(vertices: number[], indices: number[], radius?: 1, detail?: 0)

Three.js Example

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, 1, 2)

React-Three-Fiber Example

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]
<polyhedronGeometry args={[vertices, indices, 1, 2]} />

polyhedron

18. ShapeGeometry

Creates a geometry from a 2D shape.

ShapeGeometry(shape: Shape | Shape[], segments?: 12)

Three.js Example

const shape = new THREE.Shape()
shape.moveTo(0, 0)
shape.lineTo(0, 1)
shape.lineTo(1, 1)
shape.lineTo(1, 0)
shape.lineTo(0, 0)
const geometry = new THREE.ShapeGeometry(shape)

React-Three-Fiber Example

const shape = new THREE.Shape()
shape.moveTo(0, 0)
shape.lineTo(0, 1)
shape.lineTo(1, 1)
shape.lineTo(1, 0)
shape.lineTo(0, 0)
<shapeGeometry args={[shape]} />

shape

19. WireframeGeometry

Creates a wireframe representation of a geometry.

WireframeGeometry(geometry: BufferGeometry)

Three.js Example

const boxGeometry = new THREE.BoxGeometry(1, 1, 1)
const wireFrameGeometry = new THREE.WireframeGeometry(boxGeometry)
const material = new THREE.LineBasicMaterial({ color: 0xff0000 }) 
const line = new THREE.LineSegments(wireFrameGeometry, material)

React-Three-Fiber Example

<lineSegments>
  <wireframeGeometry args={[new THREE.BoxGeometry(1, 1, 1)]} />
  <lineBasicMaterial color="red" />
</lineSegments>

wireframe

20. TubeGeometry

Creates a tube extruded along a 3D curve.

TubeGeometry(path: Curve<Vector3>, tubularSegments?: 64, radius?: 1, radialSegments?: 8, closed?: false)

Three.js Example

const path = new THREE.CurvePath()
const geometry = new THREE.TubeGeometry(path, 64, 1, 8, false)

React-Three-Fiber Example

<tubeGeometry args={[path, 64, 1, 8, false]} />

tube

21. CapsuleGeometry

Creates a capsule shape.

CapsuleGeometry(radius?: 1, length?: 1, capSegments?: 4, radialSegments?: 8)

Three.js Example

const geometry = new THREE.CapsuleGeometry(1, 2, 4, 8)

React-Three-Fiber Example

<capsuleGeometry args={[1, 2, 4, 8]} />

capsule