物理エンジン cannon.js の使い方（コードの書き方）で悩んでます。どなたか、お助けくださいませ。（->解決しました）

どなたか、お助けください。👉解決しました！！お騒がせしました。ありがとうございました。

物理エンジン Cannon.js

物理エンジン Cannon.js でゲームを作ってみたくて、コードを書いているのですが、
addShape()の動作がわたしの解釈と異なるのです。うまくいかない。うーむ。

body.addShape() の第三引数は Quaternion() じゃないの？？

ここに body.addShape() のドキュメントがあるのですが。第三引数は Quaternion って書いてますよねー。
https://schteppe.github.io/cannon.js/docs/classes/Body.html

問題のソースコードと実行結果は CodePen で。

ここのコードでは、棒状の Box に立方体や球を追加して、アイスキャンディーのような形をいろいろ作りたいのです。
コードでは、3 x 4 = 12 種類の物体を作っているつもりですが、
左の３つは期待通りですが、それ以外は、、、伸びてます。食い込んでいます。で、めっちゃ跳ねています。

なぜ？？ちょっと傾けて登録したくて角度を指定しただけなのに、、、

See the Pen Cannon.js addShape() test by yamazaki.3104 (@yamazaki3104) on CodePen.

悩んでいるは CANNON.Quaternion() の角度指定

new CANNON.Quaternion()の角度指定、、、0なら希望通りに動くが、それ以外の角度だと、、、、伸びてます。食い込みます。めっちゃ跳ねています。

呼び側は、位置と角度を変えているだけなんです。

add_shape_quaternion( { x:-15, y: 10, z:-10 }, { x:0, y:1, z:0, w: Math.PI/8 * 0 } )
add_shape_quaternion( { x: -5, y: 10, z:-10 }, { x:0, y:1, z:0, w: Math.PI/8 * 1 } )
add_shape_quaternion( { x:  5, y: 10, z:-10 }, { x:0, y:1, z:0, w: Math.PI/8 * 2 } )
add_shape_quaternion( { x: 15, y: 10, z:-10 }, { x:0, y:1, z:0, w: Math.PI/8 * 3 } )

ちなみに、Quaternionの座標軸を変えても、同様の現象が発生します。

    test_cylinder.addShape(
        new CANNON.Cylinder( 1.9, 1.2, 1.0, 5 ), // radiusTop  radiusBottom  height  numSegments
        new CANNON.Vec3( 0, 0, -0.5 ),
        new CANNON.Quaternion( _q.x, _q.y, _q.z, _q.w ) // ★最終的にはこの角度指定 _q.w
    )

どなたか、迷えるおっさんに愛の手を、、、間違いをご指摘くださいませー。

よろしくお願いいたします。

追記： 解決しました

おかげさまで、解決できました。

問題の原因は、Quaternionの引数を勘違いでした。

    // コンストラクタの引数はこういう使い方ではない
    new CANNON.Quaternion( _q.x, _q.y, _q.z, _q.w )

↓

    // こうすればおっけー
    let qut = new CANNON.Quaternion()
    qut.setFromAxisAngle( new CANNON.Vec3( _q.x, _q.y, _q.z ), _q.w )

Quaternionの生成後に setFromAxisAngle() することで、うまくいきました。

See the Pen Cannon.js addShape NG -> OK by yamazaki.3104 (@yamazaki3104) on CodePen.

ありがとうございました。