[Web Tool] POKE — VRM をクリックして押す。傾いて、起き上がりこぼしのように戻る
概要
POKE は、VRM をクリックして「押す」アプリです。押した場所と向きに合わせて、体が傾き、起き上がりこぼしのように揺れながら戻ります。表情も、押した場所に合わせて変わります。
VRMA(VRM のモーション)を読み込むと、再生しながら押せます。動いている VRM に、揺れが足されます。
- 操作: VRM をクリックすると、押します。何もない所をドラッグすると、視点が回ります
- 押す場所: 頭・首・胴・腕・脚で、反応が変わります
- 調整: POWER(押す力)、ROCK(揺れの速さ)、DAMPING(減衰)
- 表情: EXPRESSION で、表情を変えるかを切り替えます
- VRM: ファイルをドロップ(または
VRM …)で読み込み。ブラウザの中だけで動き、アップロードされません - モーション:
.vrmaをドロップ(またはVRMA …)で、読み込み。NONEで外します
開く
インストールは不要です。下のリンクから、そのまま開けます。
poke
lain-lab.com の POKE(three.js + three-vrm)の使い方ガイド。クリックで押す操作、POWER・ROCK・DAMPING の意味、表情の ON/OFF、VRM と VRMA の読み込み、モーションの切り替えと再生・一時停止、動かないときの見分け方、よくある質問を解説。
lain-lab.comスタートメニューから起動
トップページのスタートメニューからも起動できます。
動画
使い方
押す
VRM をクリック(動かさずに離す)します。クリックした場所に一番近い骨が反応して、体全体が、押した向きに傾きます。
- 頭を正面から押すと、後ろへ倒れます
- 胴を押すと、腕が遅れて揺れます
- 腕を押すと、その腕が振れます
- 高い所を押すほど、体全体が大きく傾きます
- 中心からずれた所を押すと、体が少しひねられます
押すのは、クリックのときだけです。ドラッグは、視点の回転です。
左のパネル
| 項目 | 内容 |
|---|---|
VRM … | VRM ファイルを選びます(ドロップでも読み込めます) |
RESET | 揺れを止めて、まっすぐに戻します(モーションは続きます) |
EXPRESSION ON / OFF | 押したときの表情と、モーションの表情を、出すか止めるか(まばたきは残ります) |
VRMA … | モーション(.vrma)を選びます(ドロップでも読み込めます) |
NONE | モーションを外して、元の姿勢(腕を下ろした姿勢)に戻します |
PLAYING / PAUSED | モーションの再生と一時停止 |
POWER | 押す力(0.1〜10、0.1 刻み) |
ROCK | 体全体の揺れの速さ(0.5〜4.0 Hz)。小さいほど、ゆっくり揺れます |
DAMPING | 減衰(3〜60%)。小さいほど、何度も揺れます |
左下の INFO に、読み込んだモデル、モーション、押した骨の名前、傾きの角度、FPS が出ます。設定は、ブラウザに保存されます。
モーションを重ねる
VRMA を読み込むと、繰り返し再生されます。再生中も、クリックで押せます。
- 別の VRMA を読み込むと、0.3 秒で混ぜながら切り替わります
- モーションが表情を動かすときは、押したときの表情と、大きい方が出ます
- VMD から変換した VRMA は、0 秒目に初期ポーズのコマが入っていることがあります。読み込み時に、自動で捨てます
VRM とモーションについて
- VRM 0.x と 1.0 に対応しています。Draco 圧縮の VRM も、読めます
- 表情: 頭・首は surprised(無ければ oh)、胴は angry、腕は happy、脚は sad です。VRM がその表情を持っていなければ、変わりません
- 体型: 標準的な体型の VRM を想定しています。極端なデフォルメ体型は、未確認です
- VRMA: VRM Animation 形式です。VMD(MMD のモーション)は、先に VRMA へ変換してください(VMD → VRMA 変換 があります)
動かないとき
| 症状 | 確認すること |
|---|---|
| VRM が出ない | ファイルが .vrm か。壊れたファイルや、読み込めない形式でないか。画面の中央にエラーが出ていないか |
| 押しても反応しない | 何もない所ではなく、VRM の体の上をクリックしているか。クリックの間に、マウスが動いていないか |
| 揺れが小さい | POWER を上げる。腕は、上限があるので、大きく振れません |
| 揺れが止まらない・すぐ止まる | DAMPING で調整する(小さいほど、止まりにくい) |
| 重い | 画面を小さくする。高解像度の画面では、描画が重くなります |
| モーションが動かない | PAUSED になっていないか。VRMA が、この VRM に合う人体ボーンを持っているか |
よくある質問
Q. 押すと、皮膚がへこみますか。 へこみません。骨の回転と表情だけで、反応を作っています。
Q. 物理エンジンを使っていますか。 使っていません。回転の減衰ばねだけです。軽いので、スマートフォンでも動く見込みですが、未確認です。
Q. VR で触れますか。 今は、できません。
Q. 読み込んだ VRM やモーションは、送信されますか。 されません。ブラウザの中だけで動きます。
関連
POKE
VRM をクリックして押す、lain-lab.com のブラウザアプリ。
lain-lab.com実装は、技術記事にまとめています。
▼ [Astro] #195 POKE — VRM をクリックすると傾いて戻る
[Astro] #195 POKE — VRM をクリックすると傾いて戻る(回転ばね・起き上がりこぼし・VRMA の上に重ねる) // PROTOCOL.LAIN
lain-lab.com の POKE(VRM をクリックして反応させるアプリ)の実装ガイド。減衰ばねの式と積分、足元を支点にした体の傾き、骨ごとの力の配り方、クリック判定、表情の重ね方、three-vrm-animation で VRMA を再生して揺れを足す順序、T ポーズの原因と対処、DRACOLoader の設定を解説。
lain-lab.com