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 7. Particles, Sprites, and the Point Cloud

In the previous chapters, we discussed the most important concepts, objects, and APIs that Three.js has to offer. In this chapter, we'll look into the only concept we've skipped until now: particles. With particles (sometimes also called sprites), it is very easy to create many small objects that you can use to simulate rain, snow, smoke, and other interesting effects. For instance, you can render individual geometries as a set of particles and control these particles separately. In this chapter, we'll explore the various particle features provided by Three.js. To be more specific, we'll look at the following subjects in this chapter:

Creating and styling particles using THREE.SpriteMaterial
Using a point cloud to create a grouped set of particles
Creating a point cloud from existing geometries
Animating particles and the particle system
Using a texture to style the particles
Using the canvas to style a particle with THREE.SpriteCanvasMaterial...

Understanding particles

Like we do with most new concepts, we'll start with an example. In the sources for this chapter, you'll find an example with the name 01-particles.html. Open this example and you'll see a grid of very uninteresting-looking white cubes, as shown in the following screenshot:

What you see in this screenshot are 100 sprites. A sprite is a 2D plane that always faces the camera. If you create a sprite without any properties, they are rendered as small, white, two-dimensional squares. These sprites were created with the following lines of code:

function createSprites() {
  var material = new THREE.SpriteMaterial();
  for (var x = -5; x < 5; x++) {
    for (var y = -5; y < 5; y++) {
      var sprite = new THREE.Sprite(material);
      sprite.position.set(x * 10, y * 10, 0);
      scene.add(sprite);
    }
  }
}

In this example, we create the sprites manually using the THREE.Sprite(material) constructor. The only item we pass in is a material. This has to be either THREE...

Particles, THREE.PointCloud, and THREE.PointCloudMaterial

At the end of the previous section, we quickly introduced THREE.PointCloud. The constructor of THREE.PointCloud takes two properties: a geometry and a material. The material is used to color and texture the particles (as we'll see later on), and the geometry defines where the individual particles are positioned. Each vertex and each point used to define the geometry is shown as a particle. When we create THREE.PointCloud based on THREE.BoxGeometry, we get 8 particles, one for each corner of the cube. Normally, though, you won't create THREE.PointCloud from one of the standard Three.js geometries, but add the vertices manually to a geometry created from scratch (or use an externally loaded model) just like we did at the end of the previous section. In this section, we'll dive a bit deeper into this approach and look at how you can use THREE.PointCloudMaterial to style the particles. We'll explore this using the 03-basic-point-cloud...

Styling particles with the HTML5 canvas

Three.js offers three different ways you can use an HTML5 canvas to style your particles. If you use THREE.CanvasRenderer, you can directly reference an HTML5 canvas from THREE.SpriteCanvasMaterial. When you use THREE.WebGLRenderer, you need to take a couple of extra steps to use an HTML5 canvas to style your particles. In the following two sections, we'll show you the different approaches.

Using HTML5 canvas with THREE.CanvasRenderer

With THREE.SpriteCanvasMaterial, you can use the output from an HTML5 canvas as a texture for your particles. This material is specifically created for THREE.CanvasRenderer and only works when you use this specific renderer. Before we look at how to use this material, let's first look at the attributes you can set on this material:

Using textures to style particles

In the previous example, we saw how you could style THREE.PointCloud and individual THREE.Sprite objects using an HTML5 canvas. Since you can draw anything you want and even load external images, you can use this approach to add all kinds of styles to the particle system. There is, however, a more direct way to use an image to style your particles. You can use the THREE.ImageUtils.loadTexture() function to load an image as THREE.Texture. THREE.Texture can then be assigned to the map property of a material.

In this section, we'll show you two examples and explain how to create them. Both these examples use an image as a texture for your particles. In the first example, we create a simulation of rain, 06-rainy-scene.html. The following screenshot shows this example:

The first thing we need to do is get a texture that will represent our raindrop. You can find a couple of examples in the assets/textures/particles folder. In Chapter 9, Animations and Moving the...

Working with sprite maps

At the beginning of this chapter, we used a THREE.Sprite object to render single particles with THREE.CanvasRenderer and THREE.WebGLRenderer. These sprites were positioned somewhere in the 3D world, and their size was based on the distance from the camera (this is also sometimes called billboarding). In this section, we'll show an alternative use of the THREE.Sprite object. We'll show you how you can use THREE.Sprite to create a layer similar to head-up display (HUD) for your 3D content using an extra THREE.OrthographicCamera instance. We will also show you how to select the image for a THREE.Sprite object using a sprite map.

As an example, we're going to create a simple THREE.Sprite object that moves from left to right over the screen. In the background, we'll render a 3D scene with a moving camera to illustrate that THREE.Sprite moves independently of the camera. The following screenshot shows what we'll be creating for the first example (08-sprites.html):

If you...

Creating THREE.PointCloud from an advanced geometry

As you remember, THREE.PointCloud renders each particle based on the vertices from the supplied geometry. This means that if we provide a complex geometry (for example, a torus knot or a tube), we can create THREE.PointCloud based on the vertices from that specific geometry. For this last section of this chapter, we'll create a torus knot, like the one we saw in the previous chapter, and render it as THREE.PointCloud.

We've already explained the torus knot in the previous chapter, so we won't go into much detail here. We're using the exact code from the previous chapter, and we've added a single menu option that you can use to transform the rendered mesh into THREE.PointCloud. You can find the example (10-create-particle-system-from-model.html) in the sources for this chapter. The following screenshot shows the example:

As you can see in the preceding screenshot, every vertex used to generate the torus knot is used as a particle. In this...

Summary

That's a wrap for this chapter. We've explained what particles, sprites, and particle systems are and how you can style these objects with the available materials. In this chapter, you saw how you can use THREE.Sprite directly with THREE.CanvasRenderer and THREE.WebGLRenderer. If you want to create a large number of particles, however, you should use THREE.PointCloud. With THREE.PointCloud, all the particles share the same material, and the only property you can change for an individual particle is their color by setting the vertexColors property of the material to THREE.VertexColors and providing a color value in the colors array of THREE.Geometry used to create THREE.PointCloud. We also showed how you can easily animate particles by changing their position. This works the same for an individual THREE.Sprite instance and the vertices from the geometry used to create THREE.PointCloud.

So far, we have created meshes based on geometries provided by Three.js. This works great for simple...

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
`color`	This is the color of the particle. Depending on the specified `blending` mode, this affects the color of the canvas image.
`program`	This is a function that takes...