In this opportunity I would like to share with you some useful tools that I use while I’m working with Three.js. It is not necessary to use all, but they can be very useful sometimes.

This is the second part of a series that begins here.

Stats.js

This tool allows us to monitor the performance of our app, it’s really helpful to avoid bottlenecks and check out the stability of the project.

To use it we need to import stats.min.js:

<script src=”stats.min.js”></script>

And then add the following code:

Now only remains to add these two functions, at the beginning and the end of our code.

dat.gui

There are times when we need a UI for our projects, the simplest way to do it is using dat.gui.

As we do with stats, it’s time to import dat.gui.js:

<script src="dat.gui.min.js"></script>

Let’s create an object to control the parameters of our UI:

And then we create a Mesh using those values:

It’s time to create the UI based on that values. Dat.gui gives us different ways to control our variables, in this case we are going to use a Slider for the size and a Color Picker for the color value. This information is available in the official documentation.

Now only remains to create the functions that are responsible of modifying the Mesh when there is a change in the controls.

That’s all! Now we have an interface for our project.

OrbitControls

Manipulating the camera from the code can be very frustrating sometimes, so it’s really common to use OrbitControls. This tool let us control the camera with our mouse in a similar way that any 3D Software does it.

It’s really simple, we need to import OrbitControls:

<script src="OrbitControls.js"></script>

And then we add this line to activate it:

Responsive Renderer

Maybe in the beginning it’s not necessary, but there’ll be a moment when we need a responsive renderer. To fix that we can use this simple snippet:

Later we’ll see that having a responsive renderer is very useful when we want to export our work in a higher resolution.

TJS Snippets

As I always forget the functions and their parameters, I did make a list of snippets that I use every time when I’m working. Currently only available for Sublime Text (any help to port it to other IDE is welcome).

Exporting our work

One of the first problems that I encountered when I was starting with Three.js was finding a way to export my works to video.

In case you don’t need too much quality, we can use screen recorder as:

K ap (Free) (OS X)

(Free) (OS X) Camtasia (Paid) (Cross-platform)

(Paid) (Cross-platform) Screenflow (Paid) (OS X)

A better option, in my case, is to use a Chrome Extension called Rendercan.

Rendercan gives us a PNG Sequence that we can join together with any video editor. Another option is to use ffmpeg from the terminal:

ffmpeg -r 60 -i canvas-%09d.png out.mp4

A little tip that I would like to share with you is that if you use the Zoom Out function of the browser in a responsive renderer you can export images in a very high resolution that can be used for HD videos or printing.

In the next article

In the next article I’ll talk about how to import more geometries and the different types of lights that we can implement in Three.js.

Give Me Feedback

Please don’t hesitate to write a comment or send me a message. I invite you to check out my personal web page and follow me on Instagram to see more projects created with Three.js, it would help me a lot ❤.