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

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 ...

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