Book Image

Three.js Essentials

By : Jos Dirksen
Book Image

Three.js Essentials

By: Jos Dirksen

Overview of this book

<p>Create beautiful visualizations and 3D scenes using Three.js with this practical, example-rich book. Learn all the core concepts of Three.js, and whether you are targeting mobile devices or desktop browsers, you will gain the necessary skills to build a 3D application and improve web performance.</p> <p>From setting up a development environment and creating your first Three.js scene, you will quickly dive into more complex scene-making. Discover a variety of possible scenes from how to make a rotating planet with data overlay to mini games. Through these examples, you will be shown an array of skills from using materials, controls, and lighting to creating particle systems and geometries from scratch.</p> <p>By the end of this book, you'll be able to effectively and confidently create 3D scenes using different lights and materials, create visualizations using particle systems, animate web pages, and incorporate Blender in your 3D workflow.</p>
Table of Contents (15 chapters)
Three.js Essentials
Credits
About the Author
Acknowledgment
About the Reviewers
www.PacktPub.com
Preface
Index

Creating parametric trees


For the last example, we'll look at how you can use an existing library to easily create parametric geometries. In this case, we'll show you how to create trees like the ones shown in the following screenshot (05.05-generated-tree):

Note

The library we use to create this generated tree is called proctree.js, which you can download from GitHub at the following link:

https://github.com/supereggbert/proctree.js/

This library allows you to specify a bunch of parameters, which are used to create a tree geometry. To get this to work with Three.js, we have to convert the information provided by this library to Three.js. Let's look at what proctree.js generates so that we can decide how to convert it:

var myTree = new Tree({
  // configuration
});

console.log(myTree);

The following screenshot shows this result in the Chrome console:

As shown in the previous screenshot, the proctree.js library creates the following components when generating a tree:

Property

Description

UV...