A-FRAME: 物理演算でボーリングっぽい動きを実現してみる９（ピンに複合シェイプの基本形状を適用する）

A-Frameをつかって物理演算ができるようにしてみます。
今回は複合シェイプの基本形状をみていきます。

(2019/12/07 offsetの理解に誤りがあったので打ち消し線で訂正しました。)

## boxの例

### 例１）default
複合シェイプのboxを設定してみます。
![box.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/31242384-a224-46ed-897b-081de50625fe.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box.html)
形状だけ指定すると、デフォルト値を持った物理的な形状が作成されました。
ピンの周囲にサイズが2の立方体の領域ができています。
サイズがよくわからないので、1辺が1mの立方体を横に並べています。

元々ピンのscaleを2に設定していたので、1に変更してみます。
![box-scale_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/053cc330-4235-d13e-1a4c-79ced2605d21.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_scale_1.html)
物理的な形状の範囲も1になりました。
複合シェイプの範囲はエンティティのscaleの影響を受けるようです。

### 例２）harfExtends
scaleが2のピンに対して、複合シェイプのharfExtendsに `0.25 0.25 0.25` を設定します。
![box-halfExtents.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/2aa81713-b41d-34f1-4789-00f5f14d6856.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_halfExtents.html)
ピンの周囲にサイズが１の立方体の領域ができました。

harfExtendsという表現がよくわからなかったのですが、
`1辺の長さ ＝ エンティティのscale × harfExtents × 2`
という関係のようです。
半分の範囲という事ですね、そのままの意味でした。

### 例３）offset
offsetに `0 0.5 0` を設定し、y軸方向に移動させます。
harfExtent=default(0.5)、ピンはscale=2なので、
~~1辺が2mの立方体に対して、1m下がりました。~~
ピンに対して、物理的な形状がy軸の正方向に1m移動しました。
![box-offset.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/807889d1-ac36-4676-fe9a-1de49a5a6dbe.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_offset_y.html)
~~scale=1だと0.5m下がります。~~
scale=1だと、ピンに対して物理的な形状がy軸の正方向に0.5m移動しました。
![box-offset-scale1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/d887ecb1-3f62-c0b1-3dcf-36b7e019199a.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_offset_scale_1.html)
offsetの単位はmではなく比率のようです。

~~A-Frameの座標系とY軸の正負が逆転しているように見えます。~~
offsetに `0.5 0 0` を設定し、x軸方向に移動させてみます。
ピンに対して物理的な形状がx軸の正方向に1m移動しました。
![box-offset-x.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/e0816f52-535d-bb4f-9cbd-7efa2344ca64.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_offset_x.html)

offsetに `0 0 0.5` を設定し、z軸方向に移動させてみます。
ピンに対して物理的な形状がz軸の正方向に1m移動しました。
![box-offset-z.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/bd512ca6-beaf-083f-2ca3-f7e94affd515.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_offset_z.html)
~~やはり、全ての軸がA-Frameの座標とは正負が逆転していそうです。~~

### 例４）orientation
おそらく四元数を与えるのだと思います。
orientationに `0 0.1 0 1` を設定すると
![box-orientation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/61a00052-0511-103e-dc7c-6e07f24d6880.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_orientation_01.html)
こんな感じになります。
orientationが `0 0.6 0 1` だとこんな感じです。
![box-offset-06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/b19ec8e0-068a-2d3d-ed10-897f8783761c.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_orientation_02.html)
一見、y軸で回転しているように見えますが、形が歪んでいます。

残念ながら20年前に勉学をサボっていた為に理解できず、、、

### 例５）複数のプロパティを設定してピンに近づける
これまでみたプロパティを利用して、ピンに近い形状のboxを作成してみます。
harfExtentに `0.06 0.165 0.06`
offsetに `0 0.165 0`
を設定しました。
![box-props.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/46cc2fbf-59f8-0728-f8de-db0a5543ff9e.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_props.html)
試しにボールを転がしてみましょう。
![box-bowl.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/16540164-2f7f-e15d-e57b-dde1a6395f99.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_box_props_1.html)
複合シェイプではない、通常のboxと同様の結果になりました。

## cylinderの例

### 例１）default
複合シェイプのcylinderを設定してみます。
![cylinder.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/4b3234c6-e6ac-c34d-ef12-7080917f8d06.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_cylinder.html)
デフォルトだとこのようになります。

### 例２）複数のプロパティを設定してピンに近づける
複数のプロパティを設定し、ピンに近い形状のcylinderを作成してみます。
radiusTopに `0.08`
radiusBottomに `0.04`
heightに `0.34`
numSegmentsに `20`
を設定しました。
![cylinder-props.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/f20cf7fb-d84b-dcd9-b58d-c327e6b3a860.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_cylinder_props.html)
ボールを転がして見ましょう。
![cylinder-bowl.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/1c230c66-a3e1-8e04-1d2d-59f4ff1c00ed.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_cylinder_props_1.html)
ピンの下端の方が広い円筒だから、安定感が増しました。
設定上、topの方が直径が長いのですが、直径が長い方が下になっています。
~~box同様、こちらも~~bottomとtopが逆転しています。

### 例３）上下同じ直径
上下同じ直径の円筒にして、ボールを転がしてみましょう。
![cylinder-bowl2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/be988218-1cfa-dcdb-3302-2896a6f0ce1c.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_sphere.html)
ピンとしては芳しくありません。

## sphereの例

### 例１）default
複合シェイプのsphereを設定してみます。
![sphere.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/073cc2bf-8731-6f68-b8ab-bd1266b56ef7.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_sphere.html)

### 例２）複数のプロパティを設定してピンに近づける
複数のプロパティを設定し、ピンに近い形状のsphereを作成してみます。
radiusに `0.17`
offsetに `0 0.17 0`
を設定しました。
![sphere-radius.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/a4b583e2-7ed2-df87-1f6f-3187d9730e9f.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_sphere_radius.html)
sphereなのでピンとは程遠い動きでしょうが、とりあえずボールを転がしてみましょう。
![sphere-bowl.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/36f4c4c9-d04a-2090-7a00-0a1573e0a8dc.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_sphere_radius_1.html)
ピンのような動きではないです。

## まとめ
今回は1つのエンティティに対して、複合シェイプを1つ設定してみました。
いずれもピンらしい動きにはならなかったです。
複合シェイプは1つのエンティティに対して複数の形状を組み合わせて利用できるので、次回試してみます。
四元数はまた追々、、、