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

Enhancing the basic scene

You can easily experiment with the previous examples by changing the code and refreshing your browser. In this section, we'll introduce two additional components that will make experimenting easier and allow you to keep an eye on the performance of your 3D web application.

Adding easy controls with the dat.GUI library

The first thing that we do is add the dat.GUI library (https://code.google.com/p/dat-gui/) to our basic scene. Even though this library isn't part of Three.js, we can use it to easily add a simple UI element that can be used to control some properties of your scene. For instance, in the following screenshot (the 01.05-controls.html file), you can use the menu on the top right-hand side of the window to control ...

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