読者です 読者をやめる 読者になる 読者になる

音の鳴るブログ

鳴らないこともある

踊るJavaScriptがPerfume

http://mohayonao.herokuapp.com/perfume1
http://mohayonao.herokuapp.com/perfume2 (Web Audio API / Audio Data API連携バージョン)

f:id:mohayonao:20120331172856p:plain

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 あたりをオーバーライドすれば違うのも作りやすい(はず)