結局動くのは、Google Chrome と Firefox です。
元データはこちらからお借りしました。
いろいろデータが複雑でしたので、メタセコイアでいらない部分を削除して最低限のオブジェクトにまとめてから腕を下へ曲げて Blender に読み込んで Three.js 用にエクスポートしています。
とりあえずでの実装なのでただ見るだけですし、ライトもいまいちうまく使えていませんが、まあ一度見てみて下さい。いずれ、キーボードでカメラ位置を移動する予定です。
Opera Next をインストールして WebGL 使えるようにして見てみたんですが・・・・。うまく表示されませんね。
時間があったので、もう一つ変換して表示できるようにしました。相当ポリゴン数多いですが、WebGL だと普通に動きますね。でも、ロードは不安になるくらい時間かかります。定義ファイルはなんと 11M もありますし。
こちらから
データはこちらからお借りしました。
これはポーズも付いてるし、すごくかっこいいです。データはちょっと手作業で変換しないと目が表示されずに怖〜い miku になってたのですが、なんとか修正しました。
ちなみに、Opera Next で表示したら顔がまったく表示されませんでした。そもそも、ライト効果が変なのですが、Three.js の問題では無いとは思うのです。Firefox は 全く問題無いですし。Safari は、Windows は対応していないようなので、確認できません。こうなると、IE が WebGL 使えないのにこの先やっていけるんでしょうかね・・・と、真剣に思います。
最後は、半透明 miku です。
このへんのパラメータをリアルタイムでオンラインで変更できるように調査中です。キーボードで操作は簡単なので近いうち・・・というか一週間以内予定です。
▼ キーボード操作を作成しました
WebGL 限定 miku( キーボードで移動・回転をフルサポート )
初音ミクのライセンス
■ 権利者 : クリプトン・フューチャー・メディア株式会社
■ ライセンス名 : ピアプロ・キャラクター・ライセンス
( ※ キャラクター利用のガイドライン )
|
【Three.jsの最新記事】
- Three.js で『画像を群れで飛ばす』- 背景画像を設定したら結構素敵になりました
- 『初音ミクを群れで飛ばす』-- Three.js の Canvas サンプルで『鳥が群れで飛ぶ』という凄いのがあるんですが、平面の画像をテクスチャとして差し替えてブログに貼れるようしました。
- Google Chrome または Firefox で( WebGL ) フリーフォントを 3D 化して表示して画像を取得
- まだ、遊べるほどではありませんが、Cube World + 3D モデル 空間をカメラ目線で移動
- WebGL Miku / ioqueさん
- 天使キャラ( 3D ローポリゴン ) を Three.js で、ブラウザが表示可能なら、WebGL で表示。そうでないなら Canvas で表示しています。ぜひ、キーでぐりぐり動かして下さい。
- WebGL 限定 miku( キーボードで移動・回転をフルサポート )
- 最新の Three.js でできる事。JavaScript+WebGLの凄さを体験してみましょう
- メタセコイアの素材からまわりまわってこんな画像に例えばなる訳ですが( Google+の クリエイティブキット )
- Canvas を使って 3D データを描画する JavaScript ライブラリ『Three.js』のバグ対応( Firefox、IE9、Opera で正しくテクスチャが適用されない )
- Three.js と言います。JavaScript だけでこんな事ができる時代になりました( IE8 はダメです )