Create Custom 3D Geometry With Three.JS

Richard Mattka shows you how to create custom 3D geometry using the popular Three.js WebGL library

- Richard Mattka

WebGL enables real-time rendering of complex 3D and 2D scenes and animations in the web browser. WebGL is now integrated fully into web standards, enabling physics, image processing and effects to be part of the web page canvas. You get the benefit of GPU-accelerated experiences, with the worldwide reach of the internet via the browser. All users now have instant access to beautiful experiences in their browser and right in the palm of their hands.

In this article we’ll explore 3D geometry using Three.js. You’ll add some built-in geometry first and progress to customising those shapes. Then you’ll learn how to merge shapes to create new, optimised ones. You’ll also discover how to create your custom geometry from scratch!

THREE.JS 3D FOR THE WEB

Three.js is an open-source 3D library created by Ricardo Cabello. It boasts an incredible community of active developers and extensive documentation. It includes a wide range of useful components, classes and tools. It is feature rich, flexible and has excellent performance, making it an ideal choice for pursuing WebGL development.

WHAT IS GEOMETRY IN 3D?

In this article, we’ll be looking at how to customise geometry for your 3D scenes. Three.js includes lots of basic geometry already but often you’ll want to combine these into a single geometry, customise them or create your own. 3D geometry is comprised of vertices, faces and edges but what are these?

FACES: A face is a flat or curved surface on a 3D shape. It’s what we typically think of as having the colour or texture we see on a shape. For example, a cube has six faces, a cylinder has three and a sphere has just one.

EDGES: An edge is where two faces meet or intersect. A sphere has one face and no edges at all, whereas a cube has 12 edges.