moving mesh with mouse

[CodeIain]

Hi All,

 

Am working on a project and could do with some help.

 

Basically I would like to create a plane with a sphere on top of it and when the user moves the mouse the plane tilts and the sphere rolls around.

 

I have managed to create my plane and stuff but I cant work out how to tilt the plane using the mouse.

 

any help would be great.

 

 

[RaananW]

A good start can be found in the playground - http://www.babylonjs-playground.com/?18

 

There are many ways to implement this, they all come down to the pointer-down and pointer-up JS events :-)

[Wingnut]

Hi guys!

 

   Ok, I ran-with this a bit...  http://www.babylonjs-playground.com/#8KNKC#2

 

Dragging on the red plane tilts it nicely... but I am not able to turn-on the physics in line 12.

 

Line 107 does the plane-tilting fine when scene physics is OFF... but when scene physics is ON, we need to orient/rotate the physicsBody.body  (pBody.body).    The Euler-based rotation in line 107 ... does not do that.

 

Visit here for a moment...  OimoPhysics source code comments...  http://urbanproductions.com/wingy/babylon/misc/j2h02.htm  (basic Oimo docs)

 

Search for com.element.oimo.physics.dynamics.  That namespace has a class called RigidBody (our pBody.body is one of those).  Item 9 is a quaternion called "orientation"... and item 14 is a 3x3 matrix called 'rotation'.   Both might be useful for us.

 

Enable line 12... and that will activate lines 124 and 125... and you will then see these two values printed to console (while attempting failed plane tilting). 

 

Line 107... the Euler tiltplane rotater... needs to be adjusted so that it rotates that quaternion or matrix.  In other words, once scene.physics is activated, then you/we must SOMEHOW set pBody.body.orientation or pBody.body.rotation.  As you can see, they are not changing when we drag the tilt plane... because line 107 is not doing the correct activity.

 

And, I don't know how to fix that, but there are experts here who probably do... or maybe you know how, Codelain. 

 

Sorry I couldn't be more help.  This is an interesting project, though.  Remember those "roll the balls around until they all fall into the indentations" games of old?  I had plenty of them in my childhood, and it's all good memories.  Wow, that was a long time ago.

 

Addenda:  Keep in mind that those quaternion and matrix are probably Oimo objects and not Babylon objects, so... go to that same big fat Oimo doc and search for com.element.oimo.math ... to learn about the methods and properties of Oimo 'quat' and 'mat33'.

[CodeIain]

I just have to say thank you so much Wingnut that's a great help and you have pointed me on the right direction.

 

 

I have never used O​imo before. so if anyone could help with this it would be great.

[RaananW]

Why is physics needed actually?

[CodeIain]

i thought about just applying gravity thus it would cause the ball to roll but i couldnt get that to work

 

if there is another whay to do it without physics then I am open to anything.

[RaananW]

Oh! sorry, Now I get it. Yep, the physics engine is the right choice. You will probably need to update the plane's body position constantly, let me try making a simple playground to show you what I mean.

[RaananW]

Using eingnut's example, I extended the rotate part:

 

http://www.babylonjs-playground.com/#8KNKC#3

 

Can serve as a nice prototype!

 

The Oimo plugin doesn't work for some reason, I need to check why. But cannon works fine, use it :-)

[RaananW]

With an interesting hack, Oimo plugin works as well - just don't move the mouse too quick. This can be of course fixed, but it is Oimo.js' design, not a bug.

 

http://www.babylonjs-playground.com/#8KNKC#4

[CodeIain]

Hi RaanaW you cannon example works really well!

 

am having a issue with cannon tho everytime I try ur code in my project I get

 

cannon.js:10958 Uncaught TypeError: Cannot use 'in' operator to search for 'friction' in 0.04000000000000001

 

and I cant see why as my code is the same as yours.

 

regards,

Iain

[RaananW]

Make sure you are using the latest cannon (0.6.2) and not the old one delivered with babylon under 2.3. You can find it in the dist/preview on github or download it from cannonjs.org

[CodeIain]

i have 0.6.2 from there github site via bower.

 

could this be a issue with the version od Babylon as am using 2.2

[RaananW]

oh yes :-)

 

use 2.3 , physics were totally revamped.

[CodeIain]

Thanks your help has been amazing, just need to work out how to stop it bouncing and going if the edge but am sure I can work that out.

 

Thanks

[Wingnut]

Hi guys!  Good advancing going on here! 

 

http://www.babylonjs-playground.com/#8KNKC#5

 

Nothing much new in that demo.  I made the tilt plane a big bigger, set line 12 scene gravity to -100 (10 times Earth norm), and set line 43 sphere mass to 100.  The ball still hops-off the plane... even with all that mass and gravity.  I'm not sure why.  Higher settings for mass and gravity will cause the sphere to fall through the tilt plane, sometimes.

 

I'm not sure WHAT the solution would be, here.

 

This COULD be done without a physics engine.  It would take some serious work...  especially true if the sphere needs to "roll" (where it has a texture and sphere roll can be seen).  The sphere would also need to accelerate and decelerate properly.  Not easy, and it would likely be just as "slow motion" as the current JS-based physics engines.

 

http://www.babylonjs-playground.com/#8KNKC#6  (Still uses the physics plugin. I added texture to the sphere so we can see it roll, and I set some tilt plane material transparency.)

 

Raanan... I could not get the #4 Oimo example to work for me.  No ball roll.  Thoughts?  (thx)

 

Maybe we should try Raanan's physics engine.  I heard he wrote his own!   Genius!  (drool)  I want to be like him when I grow up.

[CodeIain]

I don't mind the bouncing to much but what I cant work out is how to limit the tilt.

 

I have tried to getHeightAtCoordinates(50,0,50) no matter when on the tilt plane I try I only get 0 as its being moved by the physics and I cant find how to get the current tilt.

[RaananW]

Raanan... I could not get the #4 Oimo example to work for me.  No ball roll.  Thoughts?  (thx)

 

Maybe we should try Raanan's physics engine.  I heard he wrote his own!   Genius!  (drool)  I want to be like him when I grow up.

About Oimo - no idea, it is working for me. Is the ball "falling" ? Try this - http://www.babylonjs-playground.com/#8KNKC#7 , the ball should be falling the minute the scene starts (very slowly)

 

About about my physics engine - working hard on starting! :-) first thing - looking for a name! But I am a huge procrastinator. It might be finished in summer 2017 or something like that.

[Wingnut]

  Been there.  Slept through it.  (I love sleeping!)  And yes, that Oimo version works... rough... but it works.  Thanks for the attention.

 

Codelain... let's see... http://www.babylonjs-playground.com/#8KNKC#8  See Raanan's lines 112 and 113?  Line 112 is a different kind of 'rotate', I think.  It is quaternion... yaw, pitch and roll (not to be confused with ya'll duck and cover).  (I got bad comedy writers)

 

See my old line 111 sitting there?  We were still in Euler values back then, but the physics "rigidBody" doesn't like Euler... and thus... line 113 wasn't working.   I was changing the Euler rotation in 111, but 113 isn't concerned with Euler.  It wants Quat.

 

See my console.log in Line 102?  Open the console and do some tilting.  You will see the FOUR-value quaternion displayed every tilt.  I think the general explanation of quaternions... is... the x, y, and z values aim an invisible arrow, and the 'w' value is the amount of rotation around that arrow shaft.  Quaternions avoid an undesired Euler-rotation problem... called "gimbal lock'.  Don't mark my words, I'm not very intelligent. 

 

Want it more sane?  Change 102 to...  console.log(currentMesh.rotationQuaternion.toEulerAngles());

 

Now you might have some abilities... at the line 102 area... to do...

 

if (currentMesh.rotationQuaternion.toEulerAngles().x > foo || currentMesh.rotationQuaternion.toEulerAngles().x < bar) {

    return;

}

else if (currentMesh.rotationQuaternion.toEulerAngles().z > foo || currentMesh.rotationQuaternion.toEulerAngles().z < bar) {

    return;

}

// else it continues with the tilt move.

 

(replace occurrences of 'foo' and 'bar' with some numeric values, of course)

 

But... toEulerAngles() sucks... I hear.  Inconsistent or something (worldwide).    Watch the Euler numbers as you do the tilting.  They might be inconsistent and unusable for IF/THEN checking.

 

If you figure out how to "constrain" the tilt... based-upon the quaternion value itself (no toEulerAngles() call), then testing would work better, I think.  Maybe.  This is WAY over my head.    Fun, though.

[RaananW]

But... toEulerAngles() sucks... I hear.  Inconsistent or something (worldwide).    Watch the Euler numbers as you do the tilting.  They might be inconsistent and unusable for IF/THEN checking.

Yep, it's an international thing :-)

 

If you figure out how to "constrain" the tilt... based-upon the quaternion value itself (no toEulerAngles() call), then testing would work better, I think.  Maybe.  This is WAY over my head.    Fun, though.

This hack I build (the rotate 0.01 thing) is simply because I am lazy and the fact that it works. This can (and should) be implemented better. Unless it is fine the way it is :-)

 

And yes, you are totally right - the physics engine requires quaternions, and this is the reason your rotation didn't work.

[Wingnut]

http://thebiggamehunter.com/wp-content/uploads/2013/02/Hop-Scotch-Game-handheld-ball-puzzle.jpg

 

Surface dimples by Uncle Raanan's physics-active displaceMaps?  You bet! 

[Wingnut]

  Ya'll know what CodeIain is going to ask next, right? 

"Does anyone know how to test tiltplane.rotationQuaternion... to limit the tilt of the plane?" 

Codelain, I heard a rumor, once.  The rumor said "You don't EDIT quaternions, you replace them."

Let's look at the Babylon quaternion class... http://doc.babylonjs.com/classes/2.2/Quaternion

It has a few cool properties and methods on it.  One of the more interesting...

Quote

 

static RotationYawPitchRoll(yaw, pitch, roll) → Quaternion

 

Creates a quaternion from yaw, pitch and roll values

Ok, we now know we can MAKE a quaternion from some airplane-like yaw, pitch, and roll Euler values.  Cool!

Back to our demo... http://www.babylonjs-playground.com/#8KNKC#8 

Quote

 

// This does a on-the-mesh-itself quaternion rotation
111.  currentMesh.rotate(new BABYLON.Vector3(forback, 0, leftright * -1).normalize(), 0.01);

 

// This tells the physics imposter (currentMesh.body.body) to copy the mesh quaternion.
112.  currentMesh.updatePhysicsBodyPosition();

Not sure about those comments, but I THINK that's what is happening.

Now, let's look at something different...

http://playground.babylonjs.com/#1VNAYW#7

Here we have some yaw/pitch/roll work happening (in the render loop).  This time, there is no updatePhysicsBodyPosition() because we are actually installing a new Babylon quaternion... onto the mesh.body.body... with Oimo's .setQuaternion() method... located on its imposter class. (line 38).  Cannon's imposter classes probably have a .setQuaternion() method as well.

target.body.body is not a BabylonJS object, it is an Oimo/Cannon object.  And the Oimo/Cannon object "calls the shots".  It is the boss over Babylon.Mesh.rotationQuaternion (only when mesh is set physics-active and scene.physicsEnabled=true)

So... no need for .updatePhysicsBodyPosition().  When you set the quaternion on the physics imposter, the mesh will adjust itself to match, automatically.  We can see our box spinning without using updatePhysicsBodyPosition() (and without any applyImpulse), because we are forcing a new quaternion onto the imposter... every rendering.  Isn't that just the cooooooolest?  (it's not MY code... Temechon showed it to me)

So, the theory here, is...  somewhere in your project... YOU store currentYaw, currentPitch, and currentRoll.  When the user tries to tilt the plane... you go check your stored yaw/pitch/roll values... and if they are OK, you allow change to your stored values a bit, then make a new quaternion (line 36)... and then poke it into currentMesh.body.body... just like line 38 (target/currentMesh... change names, of course).

The render loop is always... constantly... "poking" a new quaternion into currentMesh.body.body... but if the user doesn't change the tilt... it will be the same values poked over and over, and no tilting change will happen. 

IF a user tries to do a tilt... you first check your stored currentYaw, currentPitch, and currentRoll values, and only change the values inside your quaternion poker... IF they are within your tilt limits.

One of the local boys will code-up a nice example for you... using the #8KNKC demo series. I know they will.    Everyone is climbing aboard Codelain's campfire project, eh?  Gotta love it.    Others might have better ideas than this, too (let's hope).  heh