Three.js搭配Cannon.js时圆柱体旋转异常，如何调整Cannon.body？

我正在尝试将CANNON.js与three.js结合使用，立方体、球体和平面的物理效果均正常，但使用圆柱体时出现了异常旋转的问题。我不想通过旋转three.js对象来匹配CANNON.js对象，请问是否有方法可以调整cannon.body？

问题表现：物理模拟的圆柱体轴向与three.js渲染模型的轴向垂直，运动时出现旋转错位（如演示效果所示）

相关代码：

let body = new PHYSICS.Body({shape: new PHYSICS.Cylinder(radiusTop, radiusBottom, height, segments), mass: 1});

body.linearDamping = 0.31;

问题根源是CANNON.js与three.js的圆柱体默认轴向不一致：CANNON的圆柱体默认轴向为Y轴，而three.js的圆柱体默认轴向为Z轴，导致两者朝向错位。可以通过调整CANNON的Body或形状来对齐，无需修改three.js对象，具体有两种方式：

方法1：旋转Cylinder形状 #

在创建Cylinder形状后，直接旋转形状的四元数，将其轴向从Y轴转为Z轴：

const cylinderShape = new PHYSICS.Cylinder(radiusTop, radiusBottom, height, segments);
// 绕X轴旋转90度（π/2弧度），对齐three.js的圆柱体轴向
cylinderShape.quaternion.setFromAxisAngle(new PHYSICS.Vec3(1, 0, 0), Math.PI / 2);
const body = new PHYSICS.Body({shape: cylinderShape, mass: 1});
body.linearDamping = 0.31;

方法2：旋转Body的初始朝向 #

直接给创建好的Body设置旋转四元数，调整其整体朝向：

const body = new PHYSICS.Body({shape: new PHYSICS.Cylinder(radiusTop, radiusBottom, height, segments), mass: 1});
// 绕X轴旋转90度，让物理体的轴向与three.js模型对齐
body.quaternion.setFromAxisAngle(new PHYSICS.Vec3(1, 0, 0), Math.PI / 2);
body.linearDamping = 0.31;

这两种方式都能让CANNON的物理圆柱体朝向与three.js的渲染模型保持一致，解决异常旋转问题。

内容的提问来源于stack exchange，提问作者TheHaloDeveloper