こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。
※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1
前回の記事では、WebVRを開発するためにWeb上で3Dコンテンツを扱うためのthree.jsをご紹介しました。どうやって3Dコンテンツをブラウザで表示するか、ざっくり理解していただけたと思います。
今回は3Dコンテンツを作成する方法として、”blender”というソフトをご紹介します。
blenderは機能が多く操作が独特なため、慣れるまでになかなか時間がかかります。
基本の動作から、jsonファイルにエクスポートするところまでじっくりご紹介いたします！
blenderとは
blenderは無料で使える3DCGソフトです。
ざっくりと以下のような特徴があります。
- 無料で使える
- 日本語対応可能
- 機能が多い
- 頻繁にアップグレードされている
“機能が多い”と書きましたが、正直機能が多すぎてマスターするのは相当大変です。。
また、普段からAdobe製品を使っているデザイナーさんにとって、blenderの動作はかなり独特と言えます。
直感で使えるようなソフトではないので、しっかりと勉強する必要があります。
前準備
blenderのインストール
まずはblenderのインストールを行います。
以下のページからダウンロードしてインストールしましょう。
https://www.blender.org/download/
blenderの日本語化
ダウンロードとインストールが完了したら、早速blenderをたちあげてみます。
機能が多く、デフォルトでは言語の設定が英語になっているため、なんのことやらさっぱりわからない状態です。
まずは言語設定を日本語にしましょう。
右上のメニューから、”File”>”User Preferences”を選択して、設定画面を開きます。
“International Fonts”にチェックを入れ、”Language”の項目を日本語にします。
これで設定は完了です。
ちなみに言語設定を日本語にせずに、デフォルトのままで使用されている方も結構いらっしゃるようです。
不要なオブジェクトの削除
blenderを新規で立ち上げると、最初に立方体が表示されていると思います。
今回はこのオブジェクトは使用しないので、削除しましょう。
と言っても、初見ではオブジェクトを削除するだけできっと悩むはずです。
まずオブジェクトが選択された状態で”X”キーを押してください。
すると、プルダウンメニューが出てきますので”削除”をクリックします。
これでオブジェクトがちゃんと削除されたかと思います。
オブジェクトの作成
テキストの入力
いよいよオブジェクトを新しく作っていきましょう。
今回はテキストのオブジェクトを3Dにしていきます。
左下の”追加”、または”shift”と”A”のキーを押してください。
メニューの中に”テキスト”という項目がありますので選択します。
すると、画面内にテキストが出現しました。
が、この状態ではまだテキストの編集ができないんです。
オブジェクトを追加したりする”オブジェクトモード”から、
編集ができる”編集モード”に切り替える必要があります。
下の方にあるバーの”オブジェクトモード”を”編集モードに”切り替えてください。
こうすることで文字の入力が可能になりました。
テキストを起こす
この状態だとテキストが地面に寝そべっている形になるので、テキストを起こしてあげる必要があります。
”R”、”X”、”90”のキーを順番に押すと、テキストがX軸を基準に90度起き上がりました。
これも初見では絶対にわからない操作です！
テキストの3D化
ここまでくればいよいよテキストを立体にしていく工程です。
右側のメニューから、”F”のマークを選択してください。
“ジオメトリ”の”変形”の項目の2番目の数値を変更してみてください。
テキストに奥行きがつきました。
jsonファイルの書き出し
ここまでの設定をthree.js用にエクスポートして、ブラウザに表示してみましょう。
blenderにはデフォルトでthree.js用の書き出し設定がありません。
なので、three.jsが提供するアドオンという形で機能を追加する必要があります。
まずは以下のURLからアドオンファイルをダウンロードしましょう。
https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender
次がなかなかややこしいです。
blenderのアドオンフォルダにダウンロードしてきたデータを放り込みます。
ですが、アドオンのフォルダがかなり深い階層にあり、探すのも一苦労です。
今回はmacユーザー向けに説明します。
アプリケーションフォルダのblenderのフォルダを開きます。
その中に”blender.app”というアイコンがありますので、右クリックで”パッケージの内容を表示”を選択してください。
その中の以下の”addons”フォルダが保存場所になります。
その中に、先ほどダウンロードしてきた”io_three”フォルダをそのままフォルダごと移動します。
次にアドオンを有効化します。
“ファイル”から”ユーザー設定”を選択し、”アドオン”のタブを選択してください。
数多くのアドオンが表示されるかと思います。目視で探すのはとても大変なので、右側の検索窓に”three”と入力すると候補が絞られます。
“Import-Export: Three.js Format”にチェックをつけて左下の”ユーザー設定の保存”ボタンを押しましょう。
これでアドオンが有効になりました。
それではいよいよthree.jsに対応したjsonファイルをエクスポートしましょう。
“ファイル”から”エクスポート”を選択し、”Three.js(json)”を選択します。
書き出し先を選択して、エクスポートしたらjsonファイルの完成です！
いかがだったでしょうか。
冒頭でもお伝えした通り、blenderの扱い方は非常に難しく、慣れるまでに時間がかかります。
ですが、マスターしてしまえば創作の幅がグッと広がるのは間違えないでしょう。
