1. sawa-zen

    Posted

    sawa-zen
Changes in title
+three.jsで使いたいモデルをBlenderからexportする時の注意点
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,48 @@
+この記事は、<a href="http://qiita.com/advent-calendar/2016/threejs" target="_blank">Three.js Advent Calendar 2016</a> 22日目の記事です。
+
+Blenderからモデルデータをthree.js用のjsonとしてエクスポートする際に躓いたのでメモとして残しておこうと思います。なので今日の記事は少し軽めです。
+
+three.js用のjson出力ができるようにBlenderが設定できていない場合は以下のサイトが参考になります。
+
+- [【WebGL特集】第4回:Blenderでモデル出力](http://mox-motion.com/blog/webgl04-2/)
+
+# 注意点
+
+ここからはBlenderのエクスポーターを使う場合の注意事項を列挙していきます。
+
+## 1. オブジェクトを選択する
+
+出力前にはオブジェクトを選択されていることを確認してください。
+
+<img width="290" alt="zensuke_blend.png" src="https://qiita-image-store.s3.amazonaws.com/0/42248/2364ca9d-8bb3-1a95-4f9a-0cd50bdb9170.png">
+
+これはダメ。この状態だと出力に失敗します。
+
+<img width="287" alt="zensuke_blend.png" src="https://qiita-image-store.s3.amazonaws.com/0/42248/704e8d4f-cb51-1b58-c86c-86f8c4ca897d.png">
+
+これはOK。
+
+## 2. レストポーズをとらせる
+
+出力前にはレストポーズをとっているかを確認してください。
+
+<img width="290" alt="zensuke_blend.png" src="https://qiita-image-store.s3.amazonaws.com/0/42248/478aa7db-ce36-69d9-a3d2-37c1a8184069.png">
+
+これはダメ。このまま出力すると頂点の初期位置がこの格好の位置になってしまうためおかしなアニメーションになります。
+
+<img width="247" alt="zensuke_blend.png" src="https://qiita-image-store.s3.amazonaws.com/0/42248/dd4c9a84-7385-5fd7-7679-12586d6969a8.png">
+
+これはOK。**レストポーズをとらせたアクションを予め用意しておき出力前にはレストポーズのアクションを選択する**と良いです。
+
+## 3. 出力設定
+
+出力設定が正しく設定されているかを確認します。下の画像のようになっていればOKです。
+
+<img width="402" alt="スクリーンショット 2016-12-22 2.43.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/42248/c75ffac9-423e-54bf-4322-241d08178ab8.png">
+<img width="402" alt="スクリーンショット 2016-12-22 2.44.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/42248/121fb40d-8ad8-d425-7fbe-14b8431d8b16.png">
+
+
+# 最後に
+
+Blenderにも使い慣れていないので意外とこれらを忘れて時間を食うことが多いです。面倒ですがかならず毎回チェックしましょう。今回はこんな感じで許してください。
+