O'Reilly logo

Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Geometries and meshes

In each of the examples until now, 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: 0x7777ff);
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

We defined the shape of the object and its geometry (THREE.SphereGeometry), we defined what this object looks like (THREE.MeshBasicMaterial) and its material, 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 what a geometry is and what a mesh is. We'll start with the geometry.

The properties and functions of a geometry

Three.js ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required