【PlayCanvas】ボーンアニメーションにエンティティを追従させる

この記事は PlayCanvas Advent Calendar 2017 の14日目の記事です。
3Dモデルをアニメーションさせている際に、攻撃等の当たり判定を実装したいけど、モデルのメッシュでコライダーにしたら重いし、プリミティブで攻撃する範囲にだけコライダーを設定したい、、、みたいな需要がありますよね

そのやり方を書きます。
完成形はこんな感じ

薄緑色のボックスがコライダーです

##やり方
モデルにスクリプトをアタッチして以下コードを記載します。

hitcheck.js

var Hitcheck = pc.createScript('hitcheck');
var skins;
// initialize code called once per entity
Hitcheck.prototype.initialize = function() {
    bones = { };
    skins = this.entity.model.model.skinInstances;

    for(var s = 0; s < skins.length; s++) {
        for(var b = 0; b < skins[s].bones.length; b++) {
            bones[skins[s].bones[b].name] = skins[s].bones[b];
        }
    }
};

##ボーン一覧
bonesにbones.nameの連想配列で格納されます。
console.logで出力すると以下のように格納されています

##コライダーとボーンの同期
コライダー用のエンティティを用意し、スクリプトからボーンのtranslate情報を取得してsetします

hitmodel.js

var Hitmodel = pc.createScript('hitmodel');

// initialize code called once per entity
Hitmodel.prototype.initialize = function() {
};

// update code called every frame
Hitmodel.prototype.update = function(dt) {
    this.entity.setPosition(bones.Sword_joint.getPosition());
    this.entity.setEulerAngles(bones.Sword_joint.getEulerAngles());
};

ボーン情報にはbones.{ボーンの名前}でアクセスします。
これでモデルに追従するエンティティが実装できます。