Pick a theme:

Three.js geometries

by Lea Rosema

Three.js provides several built-in primitive objects you can use in your scene, these include planes, spheres, boxes and many more shapes.

To add a primitive object to the scene, you will need to choose a material and geometry and provide it in the Mesh constructor arguments.

Example

const scene = new THREE.Scene();

// specify a sphere with radius 1 and 16 sides, 16 segments
const geometry = new THREE.SphereGeometry(1, 16, 16);

// Choose a material (MeshBasicMaterial is the simplest choice, it ignores lighting)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

Geometry vs BufferGeometry

THREE.js releases prior to version r125 had a Geometry type next to BufferGeometry. Geometry is now deprecated and removed from its core.

All geometries are based on BufferGeometry.

Building a geometry from scratch

Check out the official examples:

Using SVG paths to create geometries

You can use the three.js Shape class to create a shape and then use a ShapeGeometry or ExtrudeGeometry to create a geometry from it.

The example from the official the threejs site parses an SVG path string and converts it into a bunch of three.js Shape objects. It is based on a d3 plugin that is currently abandoned: d3-threeD.

Three.js also provides a ready-to-use SVGLoader for that.

Using text and fonts to create geometries

Three.js provides a FontLoader utility class. Fonts use a Font data structure which is an array of Shape representing the font. The font file needs to be provided as a JSON file which can be generated by facetype.js.

To create a geometry from a font, you can use TextGeometry.

See also