Rotate and move a cube around it's edges.

[gaelbeltran]

I was trying to make my a cube move while rotating, but I'm having a few problems. Any idea how to approach this?

 

Here is a image demonstrating the idea.

 

The idea is to rotate the cube to move.

[Temechon]

Hello, 

 

You have to use quaternions to do this (code not tested): 

    block.rotationQuaternion = new BABYLON.Quaternion();    // The quaternion corresponding to this rotaton    var rotationQuaternion = BABYLON.Quaternion.RotationAxis(axis, angle);    // The final value    var end = rotationQuaternion.multiply(block.rotationQuaternion);    block.rotationQuaternion = end;

Axis are Math.Pi/2 or -Math.Pi/2, and axis are BABYLON.Axis.Z and BABYLON.Axis.X, depending on where you want to go.

 

Hope that helps

Happy coding!

[gaelbeltran]

Hello, 

 

You have to use quaternions to do this (code not tested): 

    block.rotationQuaternion = new BABYLON.Quaternion();    // The quaternion corresponding to this rotaton    var rotationQuaternion = BABYLON.Quaternion.RotationAxis(axis, angle);    // The final value    var end = rotationQuaternion.multiply(block.rotationQuaternion);    block.rotationQuaternion = end;

Axis are Math.Pi/2 or -Math.Pi/2, and axis are BABYLON.Axis.Z and BABYLON.Axis.X, depending on where you want to go.

 

Hope that helps

Happy coding!

Hello, Actually I got the idea from the 3d puzzle game you published some time ago. Thanks for your help.

 

I tried this, but it's not working for me.

Here's the scene in the BABYLON Playground http://www.babylonjs-playground.com/#YMUNB#7

 

If you comment the line 28, block.rotationQuaternion = end; it shows the cube. I think that line's at fault.

 

Any idea why? I'll keep testing.

[Temechon]

Math.Pi does not exist, it's Math.PI  

 

http://www.babylonjs-playground.com/#YMUNB#8

 

Javascript errors <3

[Wingnut]

Hi guys.  There's two other ways to do this.  One is with a physics engine... and applyImpulse to the block at the right place, with very high ground friction and 0 restitution (bounce), and the block will tip-over in a certain direction (opposite direction of the impulse).  Hopefully, it won't skid, thanks to the high friction, nor will it bounce, thanks to the zero restitution.

 

Another way, gryff taught me, where you build a hinge.  Let's pretend that you ALWAYS know where your forward-left-bottom and your rear-right-bottom block corners are positioned.  We need to put a temporary gizmo at those two locations (one at a time), and temporarily parent the block to the gizmo.

 

Pretend we're looking +z... and pretend the block's 'forward' is +z, as well.  Forward = away from cam, rear = toward cam.

 

Now, if a user wants to tip the block forward (+x rot) or left (+z rot), you place a small invisible box (a gizmo) at the forward-left-bottom corner of the block, and then parent the block to the invisible gizmo (adjust child-parent position offset as needed).  Now rotate the gizmo +x or +z 90 degrees, and your block will have done its tumble.  Now un-parent.  The block will likely de-rotate and de-position at that time.  Instantly, force the block back to the new position. In other words, if the tumble was forward +x, and the block is size=1, then immediately set block.position.z += 1;  If the tumble was instead left +z, immediately set block.position.x -= 1... after the un-parenting.

 

The same goes for -x and -z rotations, but place the gizmo on the rear(near cam)-right-bottom, and rotate the gizmo 90 degrees -z for a right tumble, or 90 degrees -x for backwards tumble.  Same as before, after the rotation, un-parent the gizmo, and immediately adjust the position of the block.  If it was a right roll -z, un-parent the gizmo and set block.position.x += 1;  If it was a back roll -x, block.position.z -= 1.

 

Of course, you'll want to animate the gizmo rotations so it looks cool. 

 

I don't know if it will work, but it sounded good in my mind. 

[iiceman]

I got a question about the quaternion thingy: I tried to animate it so see what is happening http://www.babylonjs-playground.com/#YMUNB#10 ... it just rotates around the x-axis but not around the lower left corner or something like that. How do we define a pivot point to make it "roll over its edge"? You know what I mean?

 

Edit: With the gizmo it looks like this: http://www.babylonjs-playground.com/#YMUNB#11 - how can I do that with quaternion?

[gaelbeltran]

Wow, thank you guys! This is exactly what I was trying to do.

[Wingnut]

Whelp, gaelbeltran didn't mark his thread as solved, so you know what THAT means.  MORE FUN!!

http://playground.babylonjs.com/#23PDP1   W-A-S-D keys.

This uses the gizmo-parent method (as I described earlier and Iceman quick-demo'd).  The gizmo is currently invisible... turn it on for fun (speed of 1 for ease of watching).  Gizmo has a parking spot off-box.... when he/she is not being used as a box parent.  I tried a little earth quaking when the box finishes a rotation.  Fun!  At first, I was quaking document.body.marginTop... but the playground didn't want me doing that, so I changed to canvas.marginTop.  I could have jiggled the ground mesh or camera up and down, too. 

Lots of tweak-ables, such as speed. (a speed <5... makes the block "feel" heavy)  

If you wireframe the block, you'll see that it never tumbles past 90 degrees (check its diagonals, they're the same before/after rotation).  That's cuz I'm a phoney... a big fat phoney!   (family guy ref).    I bet you pivotMatrix transformCoordinate gods... would have finished this demo in 10 minutes, eh?  The diagonals would be rotated too, I bet.  I'll get there... maybe.  Meantime, don't just sit there.  Improve it.  Please. 

Other than that... just drive it around with WASD keys... and don't look at my code... cuz it's hell.    I got about 30 hours into this.  erf.

I don't JUST un-parent.  I dispose of block and gizmo... after every animation.  (I had problems with "sticky" transforms).  This thing needs a major cleanup, it's just a mess of kludge juice, guys.  Sorry.  But, it's still fun to drive the box around.    Party on!

[iiceman]

Very cool! Its surprisingly enjoyable to just roll that cube around with no actual goal. I don't know why, but it's pure fun

[Wingnut]

Thanks!  Yeah, it's sort of like Temechon's game, but without all the embarrassing losing.  It proves that T's game ideas are good and fun, even when we badly copy/re-code them.    Who's doing the physics version?  It will be easy... 4 applyImpulse "jets" mounted high on the box.  Mass counts, thrust levels/duration counts, and forget keeping the box aligned to the grid.  We should be able to get the box rocking back and forth by thrusting back, then forward, especially for high-mass boxes.  Change the friction to ice, and then jet the box around flat, if wanted.  Particle emitters would be spraying thrust in the opposite direction of the impulse pushings, of course.  (pro version)

 

http://urbanproductions.com/wingy/babylon/polygun/yerzhik/polygun04_yer.htm

 

(You can, and NEED-to repeatedly click buttons quickly in that demo, especially for 'slide', which is similar to what our physics block-roller would be doing.)

 

It's pretty fun, too.  If you've ever tried to launch a frog into low Earth orbit with a bean-can and bottle-rocket space program... you know what I mean.    And extra credit for launching the frog with a Fireball XL-5 launching ramp and a model rocket engine.  The people who wrote Kerbal Space Program...  they know about strapping cute things to dangerous rocketry.  They just fleshed-out our early frog-torturing adventures... and spearheaded a new, more-aware frog civil rights cause.  hehe.  The Ellie Mae Clampett law. 

[Temechon]

Falling is part of the fun !

[Wingnut]

I think my childhood frog astronauts... would disagree. 

[Wingnut]

Whelp, I've been thinking (oh no).  In order to do a "proper" physics version of our tumbling block, we are going to need a proper wireframe grid.  Who is REALLY good with nested FOR loops? 

Ok, are you ready for my latest lame idea?  The grid is made of Babylon Line segments... each index line of this 15 x 15 grid (like in the previous demo)... has a box imposter on it, and is "linked" to the other box imposters of the other Line segments.  In other words... this is a REAL fake physics "mesh"... a genuine chain link fence!  WOW!

We must use physics links.  Any other method of putting one physics object... against another... causes that "Brownian jitter" thing... where a physics mesh won't sit still.  But LINKED physics mesh don't have that problem. http://playground.babylonjs.com/#K3KZB

Ok, ok, there's a LITTLE jitter at the beginning of that demo, but it's not Brownian... it's Newtonian.  (ie. It's Wingy abusing the physics engine, and it's normal and expected).  When things settle down, you can see that "linked" physics objects... live quite nicely with one another, and so we can do things like fulcrums, balances, and pendulums.   We would use the seemingly-neglected physics "link" feature (requires one of our physics plugins).  yay!

Let's see... how many little line segments in this grid?  1, 2, 3, 4, umm... lots.    Nested FOR loop from hell... Physics-Linked Grid-Maker... v1.0

"So you THOUGHT is was a standard BJS CreateGround, huh?  Then someone draped it over a torus knot, and it acted like cloth, huh?  Can you say HOLY CRAP, BATMAN!"

Who among you... is MAN enough?  Who can answer this calling?  Who... will tame the dragon?  I'll go get beer.    And yes, I can hear you guys yelling that Lines won't work and it needs to be toothpick-like boxes instead.  It COULD be planes... but no.  If the corner of our block falls into a hole in our new physics grid, a plane won't be oriented correctly to impulse any sideways force into the block. The corner of the block won't act correctly, because there will be no restitution coming from the SIDE of a grid line that is a plane, or has a plane imposter.  Each line segment (toothpick segment) must use a box imposter. 

Babylon Cloth... v 0.0001  sigh.  Wow!

[jerome]

waaowww wonderful PG

[Wingnut]

They're children.  Notice how each one throws a little hissy fit when it doesn't get its "way"?    Kind of addictive.  I take no credit... mister physics engine is giving us the smiles, today.   Here's another, proving that a physics-active "anchor" box CAN be moved without using applyImpulse.  But oh, it's a painful kludge.  Check the animation loop.   (move anchor, and RE-setPhysicsState, every frame, QUICK, before the chain falls-off!) 

[jerome]

I really need to learn this stuff !

[Wingnut]

You just did.  There's only about 4 commands to drive the physics engine.  But be careful... it's pretty addictive. 

 

If you want to be SUPER hero... check out the raycast car demo(s) at the CannonJS homepage... and notice that the car does jumps off of the mounds of a physics active heightMap.  THAT feature... might be a bear to implement in BJS, and that is likely the reason that we have not adopted the newest Cannon.js.  We cannot "honor" its #1 most powerful new feature... the physics-active heightMap.

 

(Click on 'car' to reset the car.  Mousewheel back, cursors to drive.  A poorly lit scene with insufficient driving area, huh?)

 

Sniffing code, you'll quickly notice that Stefan uses ThreeJS in various places.  Your hero job, should you decide to accept it... is to coordinate Stefan's heightMap... with BJS heightmaps... and not break backward compat... so that we may drive the CannonJS raycast car... thru the hills of a BJS heightMap (and roll balls around in the mountains).   Just maybe, though, it will be impossible... due to needing per-face normals, when we use per-vertex.  (Like I know any of that stuff).

 

Wha-da-ya-think, Jerome?  A forum chap named AltReality would love you.  Train/truck/car sim nut Wingnut... would love you, too.   Everyone... would be eternally grateful... for a lonnnng time.... maybe. 

 

If you can pull that off...  you will definitely get a statue somewhere on the lawn of BJS HQ.    I'm sure that DeltaK would "include" the newest cannon.js in playgrounds... if you asked him... esp if dev was happening around it.

[jerome]

only 24 hours per day

and so much to learn, so much to do

 

ok, I'll take a look... after SPS, after computeNormals() re-optimization and after the BJS article I promised to write, arg

 

 

so before april 2045 

[Wingnut]

Ohhh, that wikipedia article?  *nod*

 

Let me take care of that for you...

 

"Babylon.js is a WebGL programming framework written in Javascript.  Please visit http://www.babylonjs.com/ to learn all about it."

 

How's that?  Fairly easy to update, year to year.  You know how it is.  Keep your stories at home, but erect huge neon arrows pointing at them.    That way, DeltaKosh and team can control their own levels of "naked", right?  (Wingy offers everyone a 16-ounce bottle of delicious Parade Rain) 

[jerome]

No, the wikipedia article wasn't even in that to-do list ! (I'm waiting for the DB's one to be accepted, so the acceptation in other languages will be easier and faster then)

it was about an article for a french professional IT magazine