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

Animating the cube

Before we dive into the code, let's first look at the result we're aiming for. Open the example file, 03.02-animate-cube.html, and you'll see something like the following screenshot:

Animating the cube

Using the controls at the top-right corner, you can move the cube around. What you'll see is that the cube rotates around its edges, not around its center. In this section, we'll show you how to create that effect. Let's first look at the default rotation, which is along an object's central axis, and the translation behavior of Three.js.

The standard Three.js rotation behavior

Let's first look at all the properties you can set on THREE.Mesh. They are ...

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