3.3 Tweening

So our rotating dice, as lovely as it is, is pretty useless as a dice. The purpose of a dice is to generate a random number from one to six, and it does this by stopping on a certain face when you roll it. So we need some way of moving from face-to-face as the dice rolls, and then finally stop on one to show the face with the number it's landed on. To do this, we need to tween between each face. Tweening is short for and a short for inbetweening. And it's a common concept in animation. Basically we say we want to move from one position to another. So with our project, we want to move from one face to another. With tweening, all the inbetween steps and transitions are taken care of for us. Though Three doesn't have tweening built in, but luckily there's an excellent library called tween.js, which works great with Three. Head over to the tween.js GitHub page. And scroll down to this link, simply save the file and put it in the same directory as your project. Then reference it in your HTML. Well, once after Three, but before the script with her code in it. Okay, back to our main.js. First, let's remove this line of code that's making our cube automatically rotate. Great. Let's create a roll dice function. In here, we'll just log out the cube object to start with. We'll also need a way for the user to roll the dice. So let's just add a click handler to our webpage and call it in there. Let's write, document.addEventListener, click rollDice. Okay, let's just check if that's working. Super. Okay, now inside our rollDice function, let me just write this line and explain it afterward. Var myTween = new TWEEN.Tween(cube.rotation) and we say, to, give it an object. And we'll say y: degreesToRadians, and we'll make that 90. So what are we saying here? Well, we're saying, let's create a new instance of a tween that has a transition between two positions. We're saying we want to update the values in our cube rotation object which is how much a cube is rotated along the X, Y, or Zed-axis. And these all start off as zero. We're seeing then that we want to transition the Y value to 90 degrees in radians, using our previously run function. We're basically saying, rotate our cube 90 degrees along the Y axis. Make sense? We then have to tell the tween to star by saying, myTween.start. One last thing, in order for the tween to update our cube incrementally, we need to tell it to update every time we draw, or before every time we draw, even. So inside our draw function, just before the render, we say tween.update. Okay, let's have a look. Click on your dice, and lovely. Vegas would call this a loaded dice, it always lands in the same position. The animation's a bit slow, so let's tell our tween to go a little bit faster. To do this just add an extra argument in the function call, specifying the number of milliseconds you want the transition to take, let's say 100. Looks good In the next lesson, we'll figure out how to turn this tweening and to randomly rolling a number.