Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

3D Geometries: Polyhedra Shapes

Explore how to create and customize various polyhedron geometries in Three.js. Understand the use of PolyhedronGeometry and specific shapes like tetrahedrons, octahedrons, and dodecahedrons to build 3D scenes. This lesson provides practical knowledge for applying vertices, faces, radius, and detail levels to enhance 3D object creation.

We'll cover the following...

The THREE.PolyhedronGeometry

With this geometry, we can easily create polyhedrons. A polyhedron is a geometry that has only flat faces and straight edges. Most often, though, we won’t use THREE.PolyhedronGeometry directly. Three.js provides a number of specific polyhedrons we can use without having to specify the vertices and faces of THREE.PolyhedronGeometry. We’ll discuss these polyhedrons later on in this lesson.

If we want to use THREE.PolyhedronGeometry directly, we have to specify the vertices and the faces. For instance, we can create a simple tetrahedron like this:

Javascript (babel-node-es2024)
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
];
new THREE.PolyhedronBufferGeometry(vertices, indices, radius, detail)

Example: Polyhedron geometries

To construct THREE.PolyhedronGeometry, we pass in the vertices, indices, radius, and detail properties (line 13). The ...