Packt+ | Advance your knowledge in tech

You're reading from Learning Three.js - the JavaScript 3D Library for WebGL

Product typeBook

Published inMar 2015

Reading LevelIntermediate

Publisher

ISBN-139781784392215

Edition1st Edition

Languages

JavaScript

Tools

Three.js WebGL

Concepts

Data Visualization

Author (1)

Jos Dirksen

Chapter 6. Advanced Geometries and Binary Operations

In the previous chapter, we showed you all the basic geometries provided by Three.js. Besides these basic geometries, Three.js also offers a set of more advanced and specialized objects. In this chapter, we'll show you these advanced geometries and cover the following subjects:

How to use advanced geometries such as THREE.ConvexGeometry, THREE.LatheGeometry, and THREE.TubeGeometry.
How to create 3D shapes from 2D shapes using THREE.ExtrudeGeometry. We'll do this based on a 2D shape drawn using functionality provided by Three.js, and we'll show an example where we create a 3D shape based on an externally loaded SVG image.
If you want to create custom shapes yourself, you can easily amend the ones we've discussed in the previous chapters. Three.js, however, also offers a THREE.ParamtericGeometry object. With this object, you can create a geometry based on a set of equations.
Finally, we'll look at how you can create 3D text effects using THREE...

THREE.ConvexGeometry

With THREE.ConvexGeometry, we can create a convex hull around a set of points. A convex hull is the minimal shape that encompasses all these points. The easiest way to understand this is by looking at an example. If you open up the 01-advanced-3d-geometries-convex.html example, you'll see the convex hull for a random set of points. The following screenshot shows this geometry:

In this example, we generate a random set of points and based on these points we create THREE.ConvexGeometry. In the example, you can click on redraw, which will generate 20 new points and draw the convex hull. We also add each of these points as a small THREE.SphereGeometry object to clearly show how a convex hull works. THREE.ConvexGeometry isn't included in the standard Three.js distribution, so you have to include an additional JavaScript file to use this geometry. At the top of your HTML page, add the following:

<script src="../libs/ConvexGeometry.js"></script>

The following piece...

THREE.LatheGeometry

THREE.LatheGeometry allows you to create shapes from a smooth curve. This curve is defined by a number of points (also called knots) and is most often called a spline. This spline is rotated around the central z axis of the object and results in vase-like and bell-like shapes. Once again, the easiest way to understand what THREE.LatheGeometry looks like is by looking at an example. This geometry is shown in 02-advanced-3d-geometries-lathe.html. The following screenshot taken from the example shows this geometry:

In the preceding screenshot, you can see the spline as the set of small red spheres. The positions of these spheres are passed in to THREE.LatheGeometry, together with a couple of other arguments. In this example, we rotate this spline for half a circle, and based on this spline, we extract the shape you can see. Before we look at all the arguments, let's look at the code used to create the spline and how THREE.LatheGeometry uses this spline:

function generatePoints...

Creating 3D text

In the last part of this chapter, we'll have a quick look at how you can create 3D text effects. First, we'll look at how to render text using the fonts provided by Three.js, and after that, we'll have a quick look at how you can use your own fonts for this.

Rendering text

Rendering text in Three.js is very easy. All you have to do is define the font you want to use and the basic extrude properties we saw when we discussed THREE.ExtrudeGeometry. The following screenshot shows the 07-text-geometry.html example on how to render text in Three.js:

The code required to create this 3D text is as follows:

var options = {
  size: 90,
  height: 90,
  weight: 'normal',
  font: 'helvetiker',
  style: 'normal',
  bevelThickness: 2,
  bevelSize: 4,
  bevelSegments: 3,
  bevelEnabled: true,
  curveSegments: 12,
  steps: 1
};

// the createMesh is the same function we saw earlier
text1 = createMesh(new THREE.TextGeometry("Learning", options));
text1.position.z = -100;
text1.position.y = 100...

Using binary operations to combine meshes

In this section, we'll look at a different way of creating geometries. In this chapter, so far, and in the previous chapter, we used the default geometries provided by Three.js to create interesting-looking geometries. With the default set of properties, you can create beautiful models, but you are limited to what Three.js provides. In this section, we'll show you how you can combine these standard geometries to create new ones—a technique known as Constructive Solid Geometry (CSG) To do this, we use the Three.js extension ThreeBSP, which you can find online at https://github.com/skalnik/ThreeBSP. This additional library provides the following three functions:

Summary

We saw a lot in this chapter. We introduced a couple of advanced geometries and even showed you how you can create interesting-looking geometries using a couple of simple binary operations. We showed you how you can create really beautiful shapes using advanced geometries such as THREE.ConvexGeometry, THREE.TubeGeometry, and THREE.LatheGeometry and experiment with these geometries to get the results you're looking for. A very nice feature is that we can also convert existing SVG paths to Three.js. Remember, though, that you still might need to fine-tune the paths using tools such as GIMP, Adobe Illustrator, or Inkscape.

If you want to create 3D text, you need to specify the font to use. Three.js comes with a couple of fonts you can use, but you can also create your own fonts. However, remember that complex fonts often won't convert correctly. And finally, with ThreeBSP, you have access to three binary operations you can apply to your mesh: union, subtract, and intersect. With union...

The rest of the chapter is locked

You have been reading a chapter from

Learning Three.js - the JavaScript 3D Library for WebGL

Published in: Mar 2015Publisher: ISBN-13: 9781784392215

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime

Author (1)

Jos Dirksen

Jos Dirksen has worked as a software developer and architect for almost two decades. He has a lot of experience in many technologies, ranging from backend technologies, such as Java and Scala, to frontend development using HTML5, CSS, JavaScript, and Typescript. Besides working with these technologies, Jos regularly speaks at conferences and likes to write about new and interesting technologies on his blog. He also likes to experiment with new technologies and see how they can best be used to create beautiful data visualizations. Previously, Jos has worked in many different roles in the private and public sectors, ranging from private companies such as ING, ASML, Malmberg, and Philips to organizations in the public sector, such as the Department of Defense and the Port of Rotterdam.
Read more about Jos Dirksen

Personalised recommendations for you

Based on your interests and search pattern

Et al.

Ever wonder why speech recognition systems don't understand the Scottish accent, or what would happen if an astronaut only ate mac 'n' cheese, or other spurious reflections you'd have at a bar? We did, then collated those deliberations into absurd research articles with fake figures and methodologies inspired by even more fictionally absurd studies.

BookAug 2023230 pages5

Generative AI with LangChain

This book is a comprehensive introduction to LLMs and LangChain, demystifying the basic mechanics of LangChain, its functionalities, and the myriad of applications it can be integrated into.

BookDec 2023360 pages4

Generative AI with LangChain

This book is a comprehensive introduction to LLMs and LangChain, demystifying the basic mechanics of LangChain, its functionalities, and the myriad of applications it can be integrated into.

BookDec 2023360 pages5

Generative AI with LangChain

This book is a comprehensive introduction to LLMs and LangChain, demystifying the basic mechanics of LangChain, its functionalities, and the myriad of applications it can be integrated into.

BookDec 2023360 pages1

Generative AI with LangChain

This book is a comprehensive introduction to LLMs and LangChain, demystifying the basic mechanics of LangChain, its functionalities, and the myriad of applications it can be integrated into.

BookDec 2023360 pages5

Mastering Tableau 2023

This book is a comprehensive resource to mastering your Tableau skills and becoming a BI expert. As you progress, you will learn how to build advanced dashboards and improve your storytelling to derive key business insight, as well as make you well-versed with advanced functionalities of Tableau in the business intelligence domain.

BookAug 2023684 pages

Building AI Applications with ChatGPT APIs

This guide covers all ChatGPT API features for effortless creation of robust AI powered apps. With its help, you’ll be able to leverage ChatGPT’s cutting-edge NLP models to take your app development skills to the next level. You’ll also work on ten exciting projects that will give you the practical know-how that you can apply to your existing applications.

BookSep 2023258 pages5

Building AI Applications with ChatGPT APIs

This guide covers all ChatGPT API features for effortless creation of robust AI powered apps. With its help, you’ll be able to leverage ChatGPT’s cutting-edge NLP models to take your app development skills to the next level. You’ll also work on ten exciting projects that will give you the practical know-how that you can apply to your existing applications.

BookSep 2023258 pages2

Data Engineering with AWS

Embark on a journey to master data engineering pipelines on AWS! Our book offers a hands-on experience of AWS services for ingesting, transforming, and consuming data. Whether you're an absolute beginner or someone with basic data engineering experience, this guide is an indispensable resource.

BookOct 2023636 pages5

Modern Data Architecture on AWS

Every organization wants an agile, performant, and cost-effective data platform that meets all their current and future business needs. Purpose-built AWS analytics services and their features play a big part in building such a modern data platform. This book brings to you all the design and architectural patterns that’ll help you achieve this goal.

BookAug 2023420 pages5

Practical Guide to Applied Conformal Prediction in Python

Discover the power of Conformal Prediction with the "Practical Guide to Applied Conformal Prediction in Python." Master the latest techniques to quantify uncertainty in machine learning and computer vision models, and seamlessly apply them to your industry applications.

BookDec 2023240 pages

TinyML Cookbook

With over 70 project-based recipes, the TinyML Cookbook is a practical guide that will help you to get the most out of your microcontrollers. It provides a comprehensive understanding of the theoretical foundations while giving you hands-on experience training ML models for deployment on Arduino Nano 33 BLE Sense, Raspberry Pi Pico, and SparkFun RedBoard Artemis Nano microcontrollers.

BookNov 2023664 pages

Name	Description
`intersect`	This function allows you to create a new geometry based on the intersection of two existing geometries. The area where both geometries overlap will define the shape of this new geometry.
`union`	The union function can be used to combine two geometries and create...