Create Custom 3D Geometry With Three.JS
NET|May 2019

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

Richard Mattka
Create Custom 3D Geometry With Three.JS

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.

This story is from the May 2019 edition of NET.

Start your 7-day Magzter GOLD free trial to access thousands of curated premium stories, and 9,000+ magazines and newspapers.

This story is from the May 2019 edition of NET.

Start your 7-day Magzter GOLD free trial to access thousands of curated premium stories, and 9,000+ magazines and newspapers.

MORE STORIES FROM NETView All
Camille Gribbons
NET

Camille Gribbons

UX designer at Booking.com, Camille Gribbons reveals how she first got into the industry

time-read
7 mins  |
June 2020
THE 5G UI REVOLUTION
NET

THE 5G UI REVOLUTION

Tris Tolliday describes his vision of a web UI catapulted forwards by 5G

time-read
3 mins  |
June 2020
HOW TO SHOWCASE YOUR DEV SKILLS
NET

HOW TO SHOWCASE YOUR DEV SKILLS

Aude Barral shares 5 top tips for landing your dream developer job

time-read
3 mins  |
June 2020
KNIVES OUT
NET

KNIVES OUT

Murder mystery film, Knives Out, grabbed everyone’s attention, and so did the fun website that promoted it. Oblio tells Tom May how it created its innovative 3D navigation

time-read
6 mins  |
June 2020
HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH
NET

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

Christine Brewis, head of digital marketing at Studio Graphene, discusses how gender parity in tech has changed over the last ten years, and what more can be done

time-read
5 mins  |
June 2020
EDAN KWAN
NET

EDAN KWAN

He swapped life as a singer for a career making eye-popping digital visuals. The Lusion founder chats to Tom May about battling demons, winning awards and where digital advertising is heading

time-read
8 mins  |
June 2020
ANDREW COULDWELL
NET

ANDREW COULDWELL

The Brit in LA discusses his new book on design systems, Laying the Foundations

time-read
3 mins  |
June 2020
Top 5 Tips For Ensuring Web Content Is Accessible For All
NET

Top 5 Tips For Ensuring Web Content Is Accessible For All

Merlyn Meredith outlines five top tips for ensuring web content is accessible for all

time-read
2 mins  |
May 2020
WHAT DOES THE FUTURE HOLD FOR BROWSERS?
NET

WHAT DOES THE FUTURE HOLD FOR BROWSERS?

Nico Turco examines the state of play with browsers, whether developers should encourage diversity or monopoly and how Google fits into it all

time-read
6 mins  |
May 2020
YEARS IN THE MAKING
NET

YEARS IN THE MAKING

Exclusively for net: The latest in a series of anonymous accounts of nightmare clients

time-read
3 mins  |
May 2020