Jump to content

(SOLVED) Constraint Moving


Recommended Posts


I am developing a system with BJS in which I want to implement an action in which the user click to select an rectangled object and click a button to create another object on top of it. In sequence it could change the position of the second object, but just following the center line of the first one and respecting its border limits, that is, keeping then aligned each other. 

Like the "Slider Physics Joint" works, but without using physics. 

Somebody has an idea to do this in a simple way?



Link to comment
Share on other sites

Hi NRA.  Here's a basic box-stacker... using an actionManager on the bottom box.


It uses boundingBox info... to know where to stack the next stacked box.  Keep clicking the bottom box, instead of a button.  I was too lazy to make a GUI-based  button.   :)  Saturday morning cartoons make me be lazy... wearing my pajamas until after-noon.  heh

How about a little random Y rotation on each stacked box... https://www.babylonjs-playground.com/#14Z1CI#2

Anyway, that's a good testing playground to start-with.  Maybe this is enough help, or maybe you could describe your wishes... in more detail.

3 hours ago, NRA said:

In sequence it could change the position of the second object, but just following the center line of the first one and respecting its border limits, that is, keeping them aligned each other. 

Does that mean... you would like to "mouse-drag" the newly-stacked box... upward and downward along Y axis?  I think that can be done, too.  There are some BRAND NEW pointer-drag tools laying around here somewhere... might be fun to try-out... if I can find them again.  :)

Link to comment
Share on other sites

Hi @Wingnut ,

I am back!

I am sure that you sample is a good starting point, but may main issue is to move the newly created object on top of the starter object, in fact an rectangular one not a box, following an imaginary line which divides it on middle. And to complicated a little more the bottom rectangle could be rotated and when we will move the top object, it need to follow the new center line. Is like the second object being child but with the constraint on its movement to the center line of the first one.

Do you understand?

Link to comment
Share on other sites

Hi NRA... thx for the details.

   I was just building a new playground with some tests, and I accidentally killed it.  (with control - left-cursor keys - removed all changes to unsaved playground without any warnings... like an instant 50 control-z's? - errrrf!)  (anger grumble anger -> playground app)

ANYway, I'll tell you things...

You now know how to get half-heights for base box and stackbox... to stack things properly.

After proper stacking... set stackbox.parent = box;

After that, you can still rotate and slide stackbox ONLY... like this:

stackbox.translate(BABYLON.Axis.Y, 2.5, BABYLON.Space.LOCAL)

stackbox.rotate(BABYLON.Axis.Y, 1.57, BABYLON.Space.LOCAL)

You can also rotate the base box... in any way you wish, and stackbox will still slide up/down base box Y axis, and rotate-around it, too.

You can also experiment using WORLD instead of LOCAL... in your stackbox translate and rotate calls.

I THINK this is the solution.  Try some experiments.  Maybe I will try a better playground... later today, after my anger for my lost playground... mellows-out.  :)

Update:  I re-made the lost playground:  https://www.babylonjs-playground.com/#14Z1CI#4  Click basebox to create a stackbox.  Stackbox is parented to basebox.  You can see that the stackbox (rectangular)... is slowly sliding-up the basebox Y axis... and spinning around it, too.  Meantime, basebox is wobbling-around with orbital rotation.

Are we getting closer to success?  I hope so.

Link to comment
Share on other sites

Hi @Wingnut ,

Yeah, I see your point, but my need is like you can see in the attached image, in what I represent the base object and the stacked one, which I move according to the center line of the base and beside its limits, and I need to maintain this option even if the base is rotated.



Link to comment
Share on other sites

I'm confused, but thx for the drawing.

When base rotates (around Y only?)... do you want all the stacked boxes to stay in same place, with same axes orientations?  (no parenting)

The base can rotate UNDER the stacked boxes, but not "carry them with it"?  errr.  ??  (sorry)

Link to comment
Share on other sites


I know that when the object is parented with the base if its, the base, is rotated (y axis) the object stay with it! What I need is to move it constraint on top of the base, even if the base has been rotated! In the image when the base is like in horizontal I could move the box from left to right, constraint to base limits and according to its center line. When I rotate the base, the object could be moved from top to bottom, constraint to base limits and according to its center line. That what I try to explain in image.

PS: Excuse my english

Link to comment
Share on other sites

Ahh, ok, thx.  Yeah, I think you need to keep all stacked boxes... always parented to base.

I don't think there is an "automatic" way to stop stacked box when it moves-to end of base.

After stackbox is created and parented to base, then use ALL translate commands to put it where it needs to go... instantly.

Or if slow-translating (maybe using +/- buttons), or mouse-drag-translating, move a little, check if at-limit.  Again, move a little, check if at-limit.  YOU must keep checking to make sure the stacked box hasn't reached end of base.  Mouse dragging is always done in little steps, repeated fast.  Keyboad keys can go into repeat mode, if held.  GUI buttons have methods of held-down, too... all doing little tiny steps over and over.  (You know all this already, I bet).  (sorry) 

While moving, if (stackbox.position.x + stackHalfWidth => basebox.bbox.extends.x) then... DON'T MOVE ANY MORE.  :)  (pseudo code - not real)

Stacked box will be constrained in ANY way you tell it to be so.  Tell it to translate +x in LOCAL space... then it will only move along X axis.  Same with +/- Z axis.  You tell it what to do, and continuously test to see if limits are reached.

I think you want a more-automated way to do it, but, I can't think of any.

Are you mouse-drag-moving the stack boxes along axes?  Or keyboard arrow keys?  GUI/HTML button clicks?

You also said that you sometimes need to rotate stacked boxes?  Will that ALWAYS be rotation around THEIR (local) Y axis?  Will rotations always be 90-degree steps?

I have SO many questions, huh?  Sorry.  :)

Link to comment
Share on other sites

By the way, IF you are already mouse-dragging stacked boxes...  and IF, after rotating base 90 degrees (change for horizontal to vertical)... dragging gets "stupid" and acts wrongly...

... then we have a DIFFERENT issue.  We would need to build an updater for the drag system... that acts correctly in EITHER vertical or horizontal "mode".  (I think)


Link to comment
Share on other sites

Lookin' good, NRA.  Nice work!

There's a demo of linesMesh path-updating...   https://www.babylonjs-playground.com/#1EBCJY#3

(for redrawing lines)

Anyway, I modified your demo... returned to parenting stackbox to base.

Removed path stuff... and used direct mesh moving in the keypress thing.


Weird.  :)  Works, though.

Are you noticing that keypress repeats go slower and slower... the longer the key is held?  I am.  I think that might be a bug in keyboard observer.  Not sure.

Good progress, NRA, you're doing super!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...