人生ゲーム漬けなダメ人間のBlog


ここなのプロフィールページ
過去展示物はこちら
昔の日記:fUteiKi_niKKi(old)
最近の日記一覧
つづきをみる
【htree.js】テストができたー

Away陣営が割とドキュメントも少なくてアレなので
three.jsにも手を出してみました

無事にスマホ、PCのどちらでも3Dモデルが
表示できる環境が整いましたよー

ハマりどころとか諸々を
つらつら書いていきたいと思いまする〜

最初に成果物から





こんな感じでスマホでも再生できます。
やったね!


主な手順は割とどこで見ても同じです。

ただthree.jsは更新が早かったり、個々の環境差とかで
微妙にデータの持ち方やコード表現が違います。

幾つか凡例を眺めて自分の環境にあうものを探してみてください。

▽データの出力確認

https://threejs.org/editor/

本家直伝、超定番。
些細なデータの良し悪しを見極めるときに活用しましょう。

▽mqoからの書き出し

https://nullorempry.jimdo.com/work-list/blender2-5-2-7/mqo/#link2

ノートメインだとすっかり手に馴染んでしまったメタセコ。
おうち作業の定番になってます。

が、アニメーションjson出力は今のところblenderが一番ノウハウが多く見えます。
モデリング以降の作業をB3d環境で行うための第一歩がこれです。

▽Blenderの使い方からコードへの適用まで

http://yomotsu.net/blog/2013/12/27/bone-for-threejs.html

このページ自体の情報は古いんですが、動画もあってわかりやすいです。
別のエントリで新しいバージョンにも触れていて一番情報量が揃っています。

▽BlenderのDoopSheetまわりの使い方

http://nvtrlab.jp/column/2-5

ある程度触るとフレーム調整をしたくなる。
でもBlenderは他のアプリと違って困ったら右クリックでは解決しないことが多い。
そんな細かい操作について書いてある親切なエントリです。

▽新バージョンのAnimationMixer使用例

http://www.knockknock.jp/archives/703

動くサンプルが確認できるほか、複数アニメーション作成の際の
Blender側の追加方法にも触れていて実践的なエントリとなっています。

▽複数アニメーション取扱いの更に新しい情報

https://tfeserver.be/blog/game-creation-threejs-infinite-maze.html

THREE.AnimationMixerで自分が唯一動かせたコード例です。
ゲームサンプルも公開されていて、かなり濃い内容になっています。


ハマりどころとか


最後に自分が作業中にハマったポイントをまとめておきます。

 ・コードの書き方の正解を見つけるまでが辛い(とはいえドキュメントは多いのでAway3Dほどではない)
 ・Blenderの操作が特殊すぎる(キーボードがないと殆ど作業ができないし)
 ・MaterialのTransparentオプションがデフォルトtrueで、尚且つValueが0なので表示されない(勘が働かないと死亡案件)
 ・BindPoseとアニメーションの初期フレームが異なっているとモデルが崩壊する
 ・json でのシーンロードではカメラ、ライトをそのまま扱えない(座標変換すればかろうじて使えそう)

やっててシンドイなあ…って思ったのは
ブラウザの検証モードだけでは不具合の切り分けが
極めて困難だったりするんですよね(´・ω・`)

単にjsの書き方にエラーがあるとかならわかるんですが、
データなのか、或いはthree.js側の記述エラーなのかを
厳密に切り分けようと思うとシンドイケースがあります。

現状だと勘で乗り切る以外に良い方法を思つかないんですが、
現状はオフィシャルで検証用のツールを用意してくれているものを
うまく活用して乗り切るのがベターなんだろうなあ…って思います。

最後にこれだけは解決が難しそうに思うので、
もう少しだけ触れておこうと思います。


【BindPoseとアニメーションの初期フレームが異なっている場合】

このケースは複数アニメーションを持たせる際に
多く起きてくると思います。

ってか、最近のコンテンツだと
そういうモデルを扱うケースの方が多いと思います。

エクスポート時に Amature 内の pose オプションを
Pose Position ではなく Reset Position に変えると
とりあえず BindPose に戻ると思います。

ですが、このまま出力するとアニメーションは継承されません。

そこでこれを回避するためには、
ポーズをとった状態でエクスポートできるようにする必要があります。


手順としては以下のとおりです。

 ・BindPoseだけのキーフレームが打たれた Animation Action(ここでは befult_pose と呼びます) を用意します
 ・エクスポートする際に defult_pose を指定してから geometry を選択する
 ・この状態で json Export を実施する


この辺りを抑えておけば比較的ハマることなく
スムーズに出力することができると思います。

Unity ほど UI は優れていませんが、
アニメーションの幅もAway3Dよりも高く
使い勝手のよい3Dライブラリだと思います。

ライセンス形式はよく見ていませんが、
企業での利用実績もあるので導入もしやすいですし
コードの更新も早いのでまだまだ伸びる余地もありそうです。

(´・ω・) 次はモデル作り変えたいなあ…(時間ない


|д゚)ノシ オワリダヨ


| ここな | 制作 | comments(0) | trackbacks(0) |


<< 【デュエルリンクス】ブラックメタルドラゴン召喚成功 | main | 【js css】こんなテストをしている >>



Comment











Trackback
url: http://kurobee.kokona.lomo.jp/trackback/1038069
累計 本日 昨日

無料ブログ作成サービス JUGEM
(C) 2017 ブログ JUGEM Some Rights Reserved.
▲PageTopへ