# Aligning a set of planes to another objects path/sides

## Recommended Posts

So, making a card game. Im trying to spread the cards in the players hand out, essentially along an upside down, elongated U pattern (basically, the reverse of how you would hold playing cards in real life. - But reverse or not, the task is pretty much the same, fanning the cards and rotating, evenly distributing amongst a finite amount of space. - originally I tried solving it via a super janky function. Then I realized: if I draw the shape I am trying to align the objects around, in theory I could get the coordinates of various points of the shape and then essentially assign each card in hand the distributed coordinates. - So I guess I'm wondering, is there an easy way to do this?

I've finally set up a playground to replicate the basic structure of my scene. Sidenote: I am trying to replicate as close as I can to what I actually have, because what I actually have is less than ideal (im having various issues with text rendering, positioning, and other things, that I think may be a scene structure type of issue. (So if you see something stupid that I am doing or that could be improved I'm all ears.) - Anyways here's scene 1, with what I am currently doing with the hand (the rotation is causing the middle cards to appear higher than the cards on the ends, which is the opposite of what I want).

Instead I would rather align the bottoms of the cards to the bottom of the half ovalish shape seen here (the player hand shape object)

But I have been struggling to figure out how to do so. Is there a technique to do this easily? Or anyone have any suggestions? Any help much appreciated as always.

P.S.

I read https://doc.babylonjs.com/overviews/how_rotations_and_translations_work which sounded like it might lead me to what I am trying to do, but it's still a little advanced for me, and ultimately, the starting point would be knowing how to split up the path of the oval shape into positions, which I am failing to figure out. (and IDK if there is a built in, easier way to align the planes to the bottom of the oval).

##### Share on other sites

You could get a range of curves using curve3. Then use curve3.getPoints() and use these to create a path3D object and then not only can you get positions but also normals, tangents and binormals to the curve. You could then align the cards to the normals using RotationFromAxis to get the rotation values.

##### Share on other sites

That extension seems pretty awesome. Although I couldn't get it to work with my use case. (cards were always standing up no matter how I rotated the cylinder, and doesn't handle the direction of the rotation as far as I can tell)

##### Share on other sites

2 hours ago, JohnK said:

You could get a range of curves using curve3. Then use curve3.getPoints() and use these to create a path3D object and then not only can you get positions but also normals, tangents and binormals to the curve. You could then align the cards to the normals using RotationFromAxis to get the rotation values.

Cool, I will take a stab at that, thanks

##### Share on other sites

@thrice check this out, click on the plane to make paths where you want the card to be positioned, you can make a "U" path by clicking at different point, wait for sometime the card will appear:   http://www.babylonjs-playground.com/#Z7YI2T#2

##### Share on other sites

This will be a good place to start off:

##### Share on other sites

I didn't follow this thread until now, but to answer your question : yes, the code of RotationFromAxis() changed in an improved way (I hope) https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/what's new.md

it's weird that the behavior changes though

Actually the former algo was more tolerant to not well designed 3 axis system (left handed) passed as a parameter (in other terms, it could compute something even with not a real LH orthogonal system and the result often looked like it were right)

Does this one run a bit better ? http://www.babylonjs-playground.com/index.html#D3UFQ2#1

I just shift the parameters

or this one (+ addRotation) : http://www.babylonjs-playground.com/index.html#D3UFQ2#2

Maybe did I do something wrong with the quaternion and matrices used in this new version .?I need to check this with @adam

##### Share on other sites

1 hour ago, JohnK said:

Couldn't give a suggestion without trying it out to check it works

It does in version 2.5 http://www.babylonjs-playground.com/index2_5.html#D3UFQ2

Exactly what I was trying to do, thanks so much!

##### Share on other sites

@jerome   It works if you flip the x axis:

##### Share on other sites

but it used to behave differently in 2.5 http://www.babylonjs-playground.com/index2_5.html#D3UFQ2#4     I'm showing here the default axes (nothing flipped)

That's what I don't really get.

##### Share on other sites

The functions that RotationFromAxis is now using expects the axes to be left handed.

There probably needs to be some code to check for that if we want to maintain the behavior of 2.5.

##### Share on other sites

Actually the old behavior tolerance was just a side-effect ...

It MUST be passed a LH orthogonal system like it's written in the API doc.

##### Share on other sites

On 5/18/2017 at 2:20 PM, jerome said:

I didn't follow this thread until now, but to answer your question : yes, the code of RotationFromAxis() changed in an improved way (I hope) https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/what's new.md

it's weird that the behavior changes though

Actually the former algo was more tolerant to not well designed 3 axis system (left handed) passed as a parameter (in other terms, it could compute something even with not a real LH orthogonal system and the result often looked like it were right)

Does this one run a bit better ? http://www.babylonjs-playground.com/index.html#D3UFQ2#1

I just shift the parameters

or this one (+ addRotation) : http://www.babylonjs-playground.com/index.html#D3UFQ2#2

Maybe did I do something wrong with the quaternion and matrices used in this new version .?I need to check this with @adam

So I am close to getting this working in my project, but realized there is still one more issue, which may or may not be related to what you guys were talking about the axis system (I am stuck on 2.5 version as I am using Canvas2d text library in project), but, once I got it implemented in my project, I realize that the cards were facing the wrong direction (like they were flipped over facing away), and rotated 180 degrees (flat), from where I expected them to be. - I can reproduce if I use FRONTSIDE instead of DOUBLESIDE in the playground.

The only playground where I can get FRONTSIDE working as expected, is in a 3.0 playground, using the addRotation method as shown in I believe one of Jeromes examples.

When I try to replicate the behavior in 2.5 by manually adding, it falls apart

Any idea what's going on, or what I am doing wrong, or if this is related to issue mentioned above?

##### Share on other sites

2 hours ago, thrice said:

So I am close to getting this working in my project, but realized there is still one more issue, which may or may not be related to what you guys were talking about the axis system (I am stuck on 2.5 version as I am using Canvas2d text library in project), but, once I got it implemented in my project, I realize that the cards were facing the wrong direction (like they were flipped over facing away), and rotated 180 degrees (flat), from where I expected them to be. - I can reproduce if I use FRONTSIDE instead of DOUBLESIDE in the playground.

The only playground where I can get FRONTSIDE working as expected, is in a 3.0 playground, using the addRotation method as shown in I believe one of Jeromes examples.

When I try to replicate the behavior in 2.5 by manually adding, it falls apart

Any idea what's going on, or what I am doing wrong, or if this is related to issue mentioned above?

I THINK, I may have finally figured out a working solution by backporting the addRotation method in master.

Still, I had to rotate Y by -Math.PI (not -Math.PI /2 as in master version), so the discrepancy seems a bit strange

##### Share on other sites

Looks like that did it, except still suffering from upside down behavior (which ended up being easy fixed after backporting addRotation, as just needed to rotate z by Math.PI) https://playground.babylonjs.com/index2_5.html#KGPGAV#2 - coolio

## 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.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.