Graphics Reference
In-Depth Information
requestAnimationFrame(render);
}
In this function, you can see that we increase the
rotation
property of
the
THREE.Mesh
object with the value set in the control GUI. This results
in the animation you can see in the screenshot in the
Getting ready
section.
Note that the rotation property is of the
THREE.Vector3
type. This means
that you can also set the property in one statement using
cube.rotation.set(x, y, z)
.
How it works...
When you set the rotation property on
THREE.Mesh
, as we do in this example,
Three.js doesn't directly calculate the new positions of the vertices of the geometry.
If you print out these vertices to the console, you'll see that regardless of the
rota-
tion
property, they will stay exactly the same. What happens is that when Three.js
actually renders
THREE.Mesh
in the
renderer.render
function, it is at that exact
point that its exact position and rotation is calculated. So when you translate, rotate,
or scale
THREE.Mesh
, the underlying
THREE.Geometry
object stays the same.
See also
There are different ways to rotate an object besides the one we showed here:
• In the upcoming
Rotating an object around a point in space
recipe, we'll show
you how you can rotate an object around an arbitrary point in space instead
of its own axis, as we showed in this recipe
