Geometries and Meshes - Three.js - page 69

control = new function() {
this.rotationSpeedX = 0.001;
this.rotationSpeedY = 0.001;
this.rotationSpeedZ = 0.001;
};
With this control object, we'll control the rotation around any of the three
axes. We pass this control object to the addControls function:
function addControls(controlObject) {
var gui = new dat.GUI();
gui.add(controlObject,
'rotationSpeedX', -0.2, 0.2);
gui.add(controlObject,
'rotationSpeedY', -0.2, 0.2);
gui.add(controlObject,
'rotationSpeedZ', -0.2, 0.2);
}
Now when we call the addControls function, we'll get the nice GUI that you
saw in the screenshot at the beginning of this recipe.
2. Now that we can control the rotation through the GUI, we can use these val-
ues to directly set the rotation of our object. In this example, we continuously
update the rotation property of the mesh, so you get the nice animation
you can see in the example. For this, we define the render function like this:
function render() {
var cube =
scene.getObjectByName('cube');
cube.rotation.x +=
control.rotationSpeedX;
cube.rotation.y +=
control.rotationSpeedY;
cube.rotation.z +=
control.rotationSpeedZ;
renderer.render(scene, camera);