Align Cannon cylinder orientation with Three's cylinder

[codynova]

This issue is readily apparent when using a wireframe debugger for the physics bodies.

We may want to allow specifying the axis orientation in the cylinder constructor - since the most popular way to construct capsule physics bodies is with cylinder+sphere compound bodies, and the most popular capsule geometry primitives are aligned with the Cannon cylinder's current orientation (i.e. not aligned with Three's cylinder)

pmndrs/use-cannon#58

schteppe#58

(cool (or uncool?) coincidence that it's issue 58 in both repos...)

[sunwin123]

Hey @codynova , you may have a look at this issue Cylinder cannon.js vs cylinder three.js #58 #issuecomment-618207128.
It is a way to solve the problem, I've tested, it works very well.

[codynova]

@sunwin123 Thank you for taking a look. For performance reasons, rather than create the shape and then rotate, we should construct the geometry in the correct axes to start with.

[sunwin123]

@codynova Agree, if there’s a way to create the geometry with correct rotations, it would be nice. But do they have such APIs ?

[codynova]

The geometry vertices and faces are mathematically generated here. I haven't looked into it enough yet, but there should be a straightforward way to alter that class to get the desired result during geometry generation.

[sunwin123]

I've read the code, it hasn't parameters to alter transformations in geometry creation periods.

[ianpurvis]

@codynova @sunwin123 Hi guys. I gave this a try... what do you think of the approach in #28 ? Let me know if there is a better way to write the Typescript.

[codynova]

Hey @ianpurvis, sorry for the delayed response, I've been super busy lately - thanks for taking a look! I agree with Marco that I'd rather this not be configurable, although I can see why you thought that was my goal due to my comment about performance.

My concern was generating the geometry in the incorrect axes, then transforming to align with ThreeJS. Instead we want to construct the geometry in the correct axes according to ThreeJS alignment, then allow other transforms at runtime. There is also the option to use ConvexPolyhedron.

I'm closing #28 in favor of #30 and have released the updated Cylinder class in cannon-es@0.10.0. I've also updated and released use-cannon@0.4.5.