how to auto rotate Box

[aninja]

Hi, I just started learning babylonjs i have some doubts please help me

I am simply making a rubix cube using MeshBox, i just simply want to rotate each block as you know what we did in Rubix Cube

 now my problem if i use animation for rotating 90 degree like this

           animationBoxY = new BABYLON.Animation("myAnimation", "rotation.y", 160, BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
           BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
           animationBoxX = new BABYLON.Animation("myAnimation", "rotation.x", 160, BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
           BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
           var keys = []; 
           keys.push({ frame : 0, value : 0 });
           keys.push({ frame : 100, value : Math.PI/2 });
           animationBoxY.setKeys(keys); animationBoxX.setKeys(keys);
 

           window.addEventListener("keydown", handleKeyDown, false);
               function handleKeyDown(evt){
                if (evt.keyCode==65){
                    Box1.animations.push(animationBoxY);
                    scene.beginAnimation(Box1, 0, 400, true);
                    } if (evt.keyCode==68){
                          Box1Copy.animations.push(animationBoxX);
                          scene.beginAnimation(Box1Copy, 0, 110, true);
                    } 

by doing this i had two problem 

1. hear both the animation got combined means it's moving diagonally instead of particularly X or Y 

2. if i animate in x then y so animation for y is starting with from start not the position where it was last(hope you got what I'm saying)

i also tried rotation like this box1.position.x = -2; but this is not auto rotation i want that when i press a key it will rotate 90/-90 degree like in rubix cube

 

Please help me I'm pretty new hear

 
 

[GameMonetize]

Hello

no playground, no help

[Wingnut]

Phew, gruesome tough-love. 

Not sure if it helps, Aninja... but somebody once did some work on a Rubik's Cube demo... http://www.babylonjs-playground.com/#EQ0SF#5

I don't know much about it.  I'd suggest forum search for 'rubik', Google search for BabylonJS Rubik... and maybe a look at Jaskar's source code at http://www.jaskar.host-ed.me/BabyksCube/.  

Maybe create one future-invisible box (a gizmo)... and practice coding it until you can rotate that single box +90 and -90 degrees on its Y axis. 

Don't worry about your other 27 boxes yet.  Just get that one box rotating.  It will be your "portable parent".  That parent gizmo box will be moved around to 6 different face-centered locations and orientations, and have 9 boxes parented to it... just before the user starts the "turn".  Those 9 boxes (a Rubik face) will keep their offset orientation and position FROM the gizmo box... because they are parented to it.

When the turn is done, maybe you will do mesh.bakeCurrentTransformIntoVertices() on all 9 boxes that turned, and then clear the .parent property on all 9 boxes.  (detach the gizmo).  If you are lucky, all 9 boxes will stay in-place, after the de-parenting.  I'm not an expert.

Also, there are non-Animation ways to rotate things 90 degrees.  Here we see the ground rotating in 90 degree steps... via putting a stepper in the render loop.... with some if/then checking.  http://www.babylonjs-playground.com/#1UETWM#16

Try to make a playground demo of your issues, save it, and then show us the URL.  It will be easier for everyone to assist you, then.  And, experiment... lots.  A Rubik's Cube is not a beginner-level challenge, in my opinion.  @dk... I hope I didn't go against your wishes, but I think you need to check your saddle for burs.

[GameMonetize]

No problem:) I'm just tired to ask 10 times the same thing every time I check the forum  (Not to mention the post done by Raanan: 

)

 

What the meaning of " you need to check your saddle for burs " ?

[Wingnut]

 

@Deltakosh - meet me in The Wingnut Chronicles, if you would. See ya there.

[aninja]

@Wingnut hear is the problem http://www.babylonjs-playground.com/#1EIE9G#0 try rotate X one then rotate Y you will notice chaning of box color

[jerome]

I can't see any color change... what box do you see the color change, from what color to what other one ?

I guess it's more a specular problem : the light reflection onto the surface when you set the cam in the same axis than the light direction

[adam]

30 minutes ago, aninja said:

@Wingnut hear is the problem http://www.babylonjs-playground.com/#1EIE9G#0 try rotate X one then rotate Y you will notice chaning of box color

We already dealt with this issue in another thread.  There is no color change.  The box is rotating.

 

[JohnK]

It is not very clear what the problem is. You asked about the color change in an earlier thread. Rotation about particular axes can be quite difficult at first. Perhaps it would be a good idea to simplify what you are trying to do to begin with. Drop the animation. Set up a corner cube with parent at the origin and check out the possible rotations. Also note that rotation is like position and sets a particular rotation. This means that rotation A followed by rotation B results in rotation B only NOT A followed by B. To do cumulative rotations other methods are needed. Perhaps this tutorial might help http://doc.babylonjs.com/tutorials/Position,_Rotate,_Translate_and_Spaces