(01/01)2019年もそろそろ、です。00:26Away陣営が割とドキュメントも少なくてアレなのでthree.jsにも手を出してみました無事にスマホ、PCのどちらでも3Dモデルが表示できる環境が整いましたよーハマりどころとか諸々をつらつら書いていきたいと思いまする〜最初に成果物からこんな感じでスマホでも再生できます。やったね!主な手順は割とどこで見ても同じです。three.jsは更新が早かったり、個々の環境差とかで微妙にデータの持ち方やコード表現が違います。幾つか凡例を眺めて自分の環境にあうものを探してみてください。データの良し悪しを見極めるときに活用しましょう。▽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.htmlTHREE.AnimationMixerで自分が唯一動かせたコード例です。ゲームサンプルも公開されていて、かなり濃い内容になっています。ハマりどころとか最後に自分が作業中にハマったポイントをまとめておきます。́・ω・`)単にjsの書き方にエラーがあるとかならわかるんですが、データなのか、或いはthree.js側の記述エラーなのかを厳密に切り分けようと思うとシンドイケースがあります。現状はオフィシャルで検証用のツールを用意してくれているものをうまく活用して乗り切るのがベターなんだろうなあ...って思います。最後にこれだけは解決が難しそうに思うので、もう少しだけ触れておこうと思います。【BindPoseとアニメーションの初期フレームが異なっている場合】このケースは複数アニメーションを持たせる際に多く起きてくると思います。最近のコンテンツだとそういうモデルを扱うケースの方が多いと思います。このまま出力するとアニメーションは継承されません。そこでこれを回避するためには、ポーズをとった状態でエクスポートできるようにする必要があります。手順としては以下のとおりです。実施するこの辺りを抑えておけば比較的ハマることなくスムーズに出力することができると思います。優れていませんが、アニメーションの幅もAway3Dよりも高く使い勝手のよい3Dライブラリだと思います。企業での利用実績もあるので導入もしやすいですしコードの更新も早いのでまだまだ伸びる余地もありそうです。Reserved.▲PageTopへ。