O'Reilly logo

Three.js Essentials 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

Creating a parametric terrain using CSS sprites

So far, we've shown you examples where we've used THREE.CSS3DObjects to show our HTML elements. Three.js, however, provides another way in which we can show and animate HTML elements using a THREE.CSS3DSprite object. The main difference is that a CSS3DSprite always faces the camera directly. To demonstrate this, we've extended the example from the previous chapter where we created a random terrain. This time, instead of defining faces, we will render each vertex of the generated terrain geometry as a CSS3DSprite. Basically, what we are doing is creating a particle system using CSS3DSprites. The result will look something similar to what is shown in the following screenshot (the 06.04-CSS3DSprites.html ...

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