踊るJavaScriptがPerfume
http://mohayonao.herokuapp.com/perfume1
http://mohayonao.herokuapp.com/perfume2 (Web Audio API / Audio Data API連携バージョン)
http://www.perfume-global.com で、Perfumeのモーションデータが配られているので、とりあえずJavaScriptで踊らせてみた。
3Dの処理は Three.js でやっているし、GitHubのFLASHのやつをベースにJavaScriptにするだけなので、よく分かっていなくてもできる。
Three.js -> https://github.com/mrdoob/three.js/
perfume-dev -> https://github.com/perfume-dev
ただ、Flashの Matrix3D.appendRotaion に該当するメソッドが無かったので、以下のページを参考にメソッドを追加した。
http://www.mztm.jp/2009/08/04/matrix3d-appendrotation/
サンプルのやつそのままな感じなので、もうちょっと凝った感じのやつも作ってみたい。
追記
ソースコードはGitHubで公開しています。
https://github.com/mohayonao/mohayonao.herokuapp.com
public/javascripts/以下
- bvh.js BVH形式のデータを読み込むやつ
- ext.Three.js FlashのMatrix3Dっぽいメソッドを追加するやつ（必要な分だけ）
- motionman.js 人が動くやつ
- perfume1.js メインの処理
- perfume2.js メインの処理（Web Audio API連携バージョン）
motionman.js の createObjects と draw あたりをオーバーライドすれば違うのも作りやすい（はず）
