はじめての Blender!【圧縮版】- dots girls Advent Calendar 2015 #dotsgirls

Blender

この記事はdots girls Advent Calendar 2015 – Qiitaの21日目の記事です。

こんにちは。ひかる@hico00です。
dots.女子部のアドカレに参戦しました!なんとか21日中にだせてホッとしております。ホッ。

さて。本題。

レポもあげましたが、先日 Milkcocoa Meetup vol5 というイベントでLTをしてきました。
Milkcocoa Meetup vol5 に参加してきました。 #mlkcca

こういうものをつくって発表してみました。
でも、おばけのかわいさを表現しきれていない。まだかわいさを引き出せるはず。そう感じていました。

そうだ!3Dにしよう!

3Dでわきょわきょと動いてるおばけ見たい!ちょーみたい!マジかわいい!
モデルデータさえあれば、3Dプリンターでフィギュア化も!?社員全員のデスクに飾ってあげたい!(強制)

 

つくりました。

http://hico00.github.io/obake3d/

 

Three_js_サンプル

 

非常に愛らしいですね。

3D未経験のわたくし、はじめての3Dモデリングでした。
備忘録として、ブログにしておきつつ、おばけの愛くるしさをアピールしていきたいとおもいます。
ただ、すべて手順まとめていると1記事じゃまとまらないので、圧縮版とさせていただきます。

3Dはじめての私が初挑戦…ということで、お手柔らかに。。

 

もくじ

1. Blenderのインストール
2. モデリングについて
3. つまづきポイント
4. Three.js用に書き出して表示する

 

1. Blenderのインストール

Blender
https://blender.jp/

Blender は3DCGアニメーションを作成するための統合環境アプリケーションです。オープンソースのフリーウェアであり、本格的かつ商用アプリにも負けない機能を持ち、世界中のユーザに利用されています。

公式サイトからの引用です。

こちらから各々の環境にあったものをダウンロードしましょう。わたしはMac用の2.76をダウンロードしました。
zipを解凍してインストール完了後、Blenderを開きます。

初期画面

 

開いてすぐのビュー画面です。
ユーザー設定から日本語化もできるそうですが、デフォルトの英語がドキュメントとかとも見比べやすいかなと思い、特に設定はしません。

それでは、さっそくおばけの形をつくっていきましょう。

 

2. モデリングについて

今回わたしが作る形は、幸い、丸にちょっと手やしっぽがはえているだけなので、作りやすそうです。

で、圧縮版ということで、今回は参考にさせていただいたURLを紹介させてください。
私がここで説明するまでもなく、URL先のとおりにすすめると、ぽんっと完成しました。とっても親切ていねいに紹介されています。

URL先を参考にしていただきつつ、私がつまづいたポイントを紹介していきたいとおもいます。
(圧縮版とはべつに、シリーズものとかでブログにまとめていきたいなーとかおもいつつ。)

◆参考URL
・初心者のための!作って学ぶBlenderの基礎:http://nvtrlab.jp/column/2-1

※ちなみに、私はキャラクターを作っただけで、背景や床などは省略させていただきました。

 

3. つまづきポイント

◆下絵を置いて表示する

Background Images という設定で下絵を表示できるのですが、作業中の私がうまく表示できずそのまま放置していました。
後から調べて解決したので、手順をのせてみます。

1. キーボードのNキーを押して、プロパティを開く。
2. Background Images にチェックをいれ、Image を設定する。
3. Axis を Front にして、左下の View を Front に変える。
4. テンキーの 5 を押すと、下絵が表示される。

BackgroundImage

4の部分がわからなくて、手こずりました。。何かのショートカットキーなのですよね?どういう意味なのだろう。

しかも、私は MacBookPro をつかっているので、テンキーなどございません。
そんな方のために、しらべてきました。

numpad

File > User Preferences > Input のなかの、Emulate Numpad をチェックしてあげます。
そして、5 をおしてあげると、下絵が表示されました。

これでより作業しやすくなるかとおもいます。
作業中の私は放置したため、イメージ力を鍛えていました。
それはそれで、ほんとうにねんどから作り上げてる感がしてたのしいですけどね!

Mac で作業される方は、ぜひこちらのブログさまもおすすめです。
Mac Book Pro で使う簡単blender:http://blendstudy.readthedocs.org/en/latest/ap_appendix/blender_in_MBP.html

◆辺を分割したりしたい!

またしても参考URLをあげることになってしまうのですが、とっても詳しくわかりやすくまとめてくださってる方がいました!

【blenderモデリング基礎】造形するにあたって序盤で知っておきたかったコマンドなど
http://riotoqll.hatenablog.com/entry/2014/02/10/162604

GIFで実際の動きがわかりやすくて、やりたいことがすぐわかりました。うれしいです。

手足(おばけの場合はしっぽですが)や、頂点など、細かくなってくるとこういう使い方も必要かもですね。

 

つまづきポイントといっても、これぐらいでしたかね。
Y軸Z軸がなんか他のソフトとは違ったり、右クリックで選択したりと、操作に慣れるまでは確かに手こずりますが、
初心者のわたしでもぽちぽちするだけで簡単にモデリングできちゃいました。

ちなみに、モデリング後のおばけちゃんはこんな様子です。

完成

 

こんな体なんで、ボーンの数も少なくしてみました。ちゃんとしたヒト形とかも作ってみたい。

顔のパーツはベタッとテクスチャで書いているだけです。
なので、腕とか動かすとびよーーんって顔がのびて、おばけ形の布をかぶっている感がだせたかとおもいます。
(中に誰もいませんよ)

 

4. Three.js用に書き出して表示する

さて、モデリングもできてアニメーションとかの設定もできた頃ではないでしょうか。

ではWeb屋さんらしく、ブラウザで作った3Dモデルを動かしてみたいと思います。

そしてここでもでてくる参考URLぅ!ありがとうございました!

Blender Three.js エキスポート
http://ara-web.net/blog/webgl/post-1596/

まずは、Three.jsの公式サイトからThree.jsをまるっとダウンロードしましょう。

three.js
http://threejs.org/

解凍したあとに、three.js の io_three というフォルダを blender にコピーしてあげます。
three.js/utils/exporters/blender/io_three にあるかとおもいます。

blender の addons というフォルダの中に io_three をコピーしてあげてください。
/Applications/blender.app/Contents/Resources/2.76/scripts/addons

コマンドで cp ってしてあげてもよいですし、macユーザーさんは、blender.app を右クリックすると、その中身のフォルダを見る事ができますよ。

スクリーンショット_2015-12-21_15_42_32

 

あとは、参考URLにあるよう設定からThreejsを有効にし、エクスポートしてあげましょう!
(Textureなどにチェックをいれるのを忘れずに!)

JSONファイルと、テクスチャがあれば画像ファイルが書き出されたかとおもいます。

あとは、JSを書いていくだけです!

githubにソースコードもあげていますが、スクリプト部分をまるっとのせてみます。参考さまのコピペまんまで恐縮ですが。。
(多少カメラやライトを調節しています。各々のモデルにあわせて調整してみましょう〜)

 github:https://github.com/hico00/hico00.github.io/blob/master/obake3d

<html>
<head>
<meta charset="utf-8">
<title>Three.js サンプル</title>
</head>
<body>
 
<script src="three.min.js"></script>
<script src="TrackballControls.js"></script>
<script src="js/MorphAnimMesh.js"></script>
<script src="js/loaders/collada/Animation.js"></script>
<script src="js/loaders/collada/AnimationHandler.js"></script>
<script src="js/loaders/collada/KeyFrameAnimation.js"></script>
<script>

//シーンの作成
var scene = new THREE.Scene();

//シーンの大きさ
var scene_w = 600;//横
var scene_h = 400;//縦
 
//レンダラの初期化
var renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize( scene_w, scene_h );
renderer.setClearColor(0xCCffff, 1);//背景色
document.body.appendChild(renderer.domElement);//最後に生成した要素を追加

//カメラの設定
var fov = 60; //画角
var aspect = scene_w / scene_h; //撮影の縦横比
var near = 1; //nearより近い領域は表示されない
var far = 1000; //farより遠い領域は表示されない
 
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set( 0, 150, 1000 );//カメラ位置

// ライトを追加
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.1 );
directionalLight.position.set( 0, 150,1000 );
scene.add( directionalLight );

// AmbientLightライトを追加
light = new THREE.AmbientLight(0xFFFFFF);
scene.add(light);

trackball = new THREE.TrackballControls( camera );//トラックボール
// アニメーションの設定
var total_frame = 180;//トータルフレーム
var last_frame = null;
var current_frame = 1;
 
//Blenderのオブジェクトを読み込む
loader = new THREE.JSONLoader();
loader.load( 'json/obake3d.json', function ( geometry, materials ) { //第1引数はジオメトリー、第2引数はマテリアルが自動的に取得)
 
 //全てのマテリアルのモーフターゲットの値をtrueにする
 for (var i = 0, l = materials.length; i < l; i++) {
 materials[i].morphTargets = true;
 }
 //モーフアニメーションメッシュ生成
 mesh = new THREE.MorphAnimMesh(geometry, new THREE.MeshFaceMaterial(materials));
 
 mesh.position.set( 0,0,0);
 mesh.scale.set( 100, 100, 100 );
 scene.add( mesh );
 
 //アニメーション
 ( function renderLoop () {
 requestAnimationFrame( renderLoop );
 
 //トータルフレームに来たらカレントフレームを0にする
 last_frame = current_frame;
 current_frame ++;
 if (30 <= current_frame) {
 current_frame = 0;
 }
 mesh.morphTargetInfluences[last_frame] = 0;
 mesh.morphTargetInfluences[current_frame] = 1;
 
 // 表示する
 renderer.render( scene, camera );
 trackball.update();
 } )(); 
} );
</script>
 
</body>
</html>

※ three.jsのバージョンなのか何なのか、「MorphAnimMesh なんて関数ねーよ!」とエラーが出続けていたので、MorphAnimMesh.js などを指定してあげてます。

さて、表示されましたでしょうか??
ローカルファイルをそのまま表示すると、ChromeだとエラーがでてしまうとおもうのでFirefoxなど他のブラウザでみてましょう。

 

さいごに

さてさてさて。

URLをお借りしてものすごく圧縮してまとめてみました。最後に参考にさせていただいたURLをまとめます。

・初心者のための!作って学ぶBlenderの基礎
 http://nvtrlab.jp/column/2-1

・【blenderモデリング基礎】造形するにあたって序盤で知っておきたかったコマンドなど
 http://riotoqll.hatenablog.com/entry/2014/02/10/162604

・Mac Book Pro で使う簡単blender
 http://blendstudy.readthedocs.org/en/latest/ap_appendix/blender_in_MBP.html

・Blender Three.js エキスポート
 http://ara-web.net/blog/webgl/post-1596/

とってもたすかりました!ありがとうございます!

とりあえずやりたかったことがぱぱっと出来て超満足ほくほくです。
休日の会社でだらだらと過ごしていたら、yossy先生に Blender やってみればと言われてはじめた今回の Blender 
まだまだ理解できていないところばかりなので、もう少しいじいじ遊んでみたいと思います。

そして、次回は自分でつくった3Dモデルを実際に3Dプリンターでプリントしてみた!とかやりたいですね。

それでは!またどこかでおあいしましょう〜。

HJPjjObUEb