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

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

## 物理エンジン Cannon.js 

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/0f883fb2-8fdc-a3c9-231c-f512a5d10071.png)

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

ここのコードでは、棒状の Box に立方体や球を追加して、アイスキャンディーのような形をいろいろ作りたいのです。
コードでは、3 x 4 = 12 種類の物体を作っているつもりですが、
左の３つは期待通りですが、それ以外は、、、伸びてます。食い込んでいます。で、めっちゃ跳ねています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/38b3a458-d0c7-a778-cc49-85b9350e1f75.png)
なぜ？？ちょっと傾けて登録したくて角度を指定しただけなのに、、、

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="yamazaki3104" data-slug-hash="wVJEyK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Cannon.js addShape() test">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/wVJEyK/">
  Cannon.js addShape() test</a> by yamazaki.3104 (<a href="https://codepen.io/yamazaki3104">@yamazaki3104</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

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

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

```JS
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の座標軸を変えても、同様の現象が発生します。

```JS
    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の引数を勘違いでした。

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

↓

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

```


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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="yamazaki3104" data-slug-hash="aboLoeO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Cannon.js addShape NG -&amp;gt; OK">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/aboLoeO/">
  Cannon.js addShape NG -&gt; OK</a> by yamazaki.3104 (<a href="https://codepen.io/yamazaki3104">@yamazaki3104</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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