I'm working with a Three.js Cube that has six distinct sides.
I've created a random number generator that produces a number between 1-6. When a button is clicked, I want the cube to rotate to that specific side based on the generated number.
While the fiddle from Stallion (http://jsfiddle.net/majman/6vrH8/) looks great, it doesn't work for me because I'm unsure how much to rotate the cube to reach a particular side...
In my attempt, I set the rotations individually for each face:
mesh.rotation.x =0;
mesh.rotation.y =0;
//face2
mesh.rotation.x =0;
mesh.rotation.y =1.571;
//face3
mesh.rotation.x =0;
mesh.rotation.y =3.142;
...
mesh.rotation.x =0;
mesh.rotation.y =4.714;
...
mesh.rotation.x =1.571;
mesh.rotation.y =0;
...
mesh.rotation.x =-1.571;
mesh.rotation.y =0;
Then I tried to adjust the rotation by using += or -= with the above numbers. However, I noticed that after several iterations, the values of mesh.rotation.x/y become extremely high (over 100) which greatly prolongs the time required to reach the desired faces.
Any suggestions on how to address this issue?
Here's the updated fiddle: https://jsfiddle.net/crinca15/2o8n3xox/
Update: It seems there might be some confusion... Upon clicking the Start Button, the cube initiates its rotation. When the Stop Button is pressed, the cube should move to one of the sides numbered 1-6 (randomly). The positions for each face are listed above.
Now, I can utilize
(mesh.rotation.x == wanted.rotation.x; mesh.rotation.x -= 0.02)The challenge lies in the fact that if the mesh.rotation value becomes excessively high, the cube takes a long time and requires numerous rotations to spin into position...