Geometries and meshes

 

This article is one in a series of articles about three.js.

Three.js has a large number of primitives (geometries and meshes). Primitives are generally 3D shapes that are generated at runtime with a bunch of parameters.

It's common to use primitives for things like a sphere for a globe or a bunch of boxes to draw a 3D graph. It's especially common to use primitives to experiment and get started with 3D. For the majority of 3D apps it's more common to have an artist make 3D models in a 3D modeling program. Later in this series we'll cover making and loading data from several 3D modeling programs. For now let's go over some of the available primitives.

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

var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffffcc });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

We define the geometry (THREE.SphereGeometry), the shape of an object, and its material (THREE.MeshBasicMaterial), and we combined these two in a mesh (THREE.Mesh) that can be added to a scene. In this section, we'll take a closer look at geometries and meshes. We'll start with the geometry.

 

AxisHelper

An axis object to visualize the 3 axes in a simple way. The X axis is red. The Y axis is green. The Z axis is blue.

Code

var axis = new THREE.AxisHelper(size = 57);
axis.position.set(x = 0, y = 0, z = 0);
var scene = new THREE.Scene();
scene.add(axis);

BoxGeometry

BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. On creation, the cuboid is centred on the origin, with each edge parallel to one of the axes.

Code

var material = new THREE.MeshNormalMaterial ({ opacity: 0.1 });
var cubeGeometry = new THREE.BoxGeometry (width = 97, height = 97, depth = 97);
var cubeMesh = new THREE.Mesh (cubeGeometry, material);
cubeMesh.position.set(x = 0, y = 0, z = 0);
var scene = new THREE.Scene();
scene.add(cubeMesh);

CylinderGeometry

CylinderGeometry is a geometric solid that is very common in everyday life, such as a soup can. If you take it apart you find it has two ends, called bases, that are usually circular. The bases are always congruent and parallel to each other. If you were to 'unroll' the cylinder you would find the the side is actually a rectangle when flattened out.

Code

var material = new THREE.MeshNormalMaterial ({ opacity: 0.1 });
var cylGeometry = new THREE.CylinderGeometry (radius = 37, height = 117, radialSegments = 32, heightSegments = 32);
var cylMesh = new THREE.Mesh (cylGeometry, material);
cylMesh.position.set(x = 0, y = 0, z = 0);
var scene = new THREE.Scene();
scene.add(cylMesh);

ConeGeometry

ConeGeometry is a geometric with properties similar to cylinder.

Code

var material = new THREE.MeshNormalMaterial ({ opacity: 0.1 });
var coneGeometry = new THREE.ConeGeometry (radius = 37, height = 117, radialSegments = 32, heightSegments = 32);
var coneMesh = new THREE.Mesh (coneGeometry, material);
coneMesh.position.set(x = 0, y = 0, z = 0);
var scene = new THREE.Scene();
scene.add(coneMesh);

TorusGeometry

TorusGeometry is a geometric (3d shape) made by revolving a small circle (radius r) along a line made by a bigger circle (radius R).

Code

var material = new THREE.MeshNormalMaterial ({ opacity: 0.1 });
var torusGeometry = new THREE.TorusGeometry (radiusMajor = 70, radiusMinor = 17, radialSegments=16, tubularSegments=100);
var torusMesh = new THREE.Mesh (torusGeometry, material);
coneMesh.position.set(x = 0, y = 0, z = 0);
var scene = new THREE.Scene();
scene.add(torusMesh);

SphereGeometry

The geometry is created by sweeping and calculating vertexes around the Y axis (horizontal sweep) and the Z axis (vertical sweep). Thus, incomplete spheres (akin to 'sphere slices') can be created through the use of different values of phiStart, phiLength, thetaStart and thetaLength, in order to define the points in which we start (or end) calculating those vertices.

Code

var material = new THREE.MeshNormalMaterial ({ opacity: 0.1 });
var sphereGeometry = new THREE.SphereGeometry (radius = 37, widthSegments = 32, heightSegments = 32);
var sphMesh = new THREE.Mesh (sphereGeometry, material);
sphMesh.position.set(x = 0, y = 0, z = 0);
var scene = new THREE.Scene();
scene.add(sphMesh);

PolyhedronGeometry

Polyhedron is a solid with flat faces. Each flat face is a polygon. Polyhedron comes from Greek poly- meaning "many" and -hedron meaning "face". Examples include prisms, pyramids, cubes and many more.

Code

var verticesOfCube = [
    -1, -1, -1,     1, -1, -1,     1, 1, -1,     -1, 1, -1,
    -1, -1, 1,     1, -1, 1,     1, 1, 1,     -1, 1, 1,
];
var indicesOfFaces = [
    2, 1, 0,     0, 3, 2,
    0, 4, 7,     7, 3, 0,
    0, 1, 5,     5, 4, 0,
    1, 2, 6,     6, 5, 1,
    2, 3, 7,     7, 6, 2,
    4, 5, 6,     6, 7, 4,
];
var polyhedronGeometry = new THREE.PolyhedronGeometry (verticesOfCube, indicesOfFaces, radius = 7, detail = 2);
var material = new THREE.MeshNormalMaterial ({ opacity: 0.1 });
var wireframeMat = new THREE.MeshBasicMaterial ({ color: 0x000000, wireframe: true, transparent: true });
var multiMaterial = [material, wireframeMat];
var shape = THREE.SceneUtils.createMultiMaterialObject(polyhedronGeometry, multiMaterial)
shape.position.set(x = 0, y = 0, z = 0);
var scene = new THREE.Scene();
scene.add(shape);

TetrahedronGeometry

Tetrahedron is a polyhedron (a flat-sided solid object) with 4 faces. When it is "regular" (side lengths are equal and angles are equal) it is one of the Platonic Solids.

Code

var tetrahedronGeometry = new THREE.TetrahedronGeometry (radius = 7, detail = 0);
var material = new THREE.MeshNormalMaterial ({ opacity: 0.1 });
var wireframeMat = new THREE.MeshBasicMaterial ({ color: 0x000000, wireframe: true, transparent: true });
var multiMaterial = [material, wireframeMat];
var shape = THREE.SceneUtils.createMultiMaterialObject(tetrahedronGeometry, multiMaterial)
shape.position.set(x = 0, y = 0, z = 0);
var scene = new THREE.Scene();
scene.add(shape);

Project download  geometries.zip