DogooBaco Loading

2016.03.18

3DCG版たぬきを作った(3)
〜three.jsをつかう〜

3DCGweb

おひさしぶりですもう3月!!3日間だけ風邪をひきました。嵐のように去っていったそいつは一体なんであったのだろうか。

どうかお気をつけください。

 

大分間が空いてしまいましたが、これまでblenderを使って3DCG版たぬきを作ったことを書いてきました!

3DCG版たぬき制作の〆の記事として、最後に「three.js」を使ってwebブラウザ上にたぬきモデルを配置したことを書いてみます^^^

three.jsとは?

img_blender3_1

そもそもwebブラウザ上に3DCGモデルを配置するにはどうすればよいのか。

 

「いい感じにblenderでcanvasか何かで書きだしてそのコードをhtmlにペタッと貼ればうまいこと表示してくれるんでしょふっふ〜〜」と思っていた私をぶん殴りたい。

どうやらwebGLというものを使用するらしく、こちらの記事を拝読しましたが「初心者でも絶対わかる、WebGLプログラミング<基礎知識編>」、「無理だww私にできるわけがないwwww」と一瞬で一泡吹きました。

 

しかし安心してください。

 

three.js」というjsライブラリはWebGL界のjQueryのような存在ということで、これを導入することで比較的容易に(javascriptを書くだけで)webGLを扱うことができるようです。webGLのプロジェクトでthree.jsを使用することは、今やデファクトスタンダードです。デファクトスタンダード。

 

ということで、three.jsを使ってwebブラウザ上に3Dモデルを配置することにしました!

blenderからthree.jsへ

blenderで作成したモデルをthree.js上で扱うようにするには、まずはblenderで作成したモデルをjson形式で書き出しをする必要があります。

 

そしてblenderのモデルをjson形式で書き出しをするにはblenderにプラグインを入れる必要があります。

下記の記事を参考にさせていただきました!

 

入れるプラグインは「Three.js Blender Export」ということで早速インストール。

Three.jsプラグインが無事入ってます!これをクリックすると、書き出しの際の細かい設定・保存先等が表示される画面が出ます。ここで作成したモデルにあった(ボーンが入っていてアニメーションが設定されていればその辺りのチェックボックスも)設定をしていきます。

 

 

ちなみに私の作ったたぬきですが、前回アニメーションをさせるまでできたのでボーン、アニメーションの設定を一緒に書きだそうと思ったのですが、そのモデルで書き出しをしてみると、たぬきの色がおかしくなったり、モデルに穴が空いたりでなかなかうまく行かなかったので、一旦静止したたぬきを書き出すことにしました。

あとあと原因がわかったのですが、どうやらオブジェクトの「法線(オブジェクトを作る面の向き・裏表のこと)」がところどころ裏返ったりしていたからのようでした…!これを正しい方向に修正をしてあげたところ、モデルの穴空きは解消されました!

もう一つ、オブジェクトの色がおかしくなってしまう、という現象が起きていました…!(黒いはずのたぬきが真っ青で、口の中が緑だったり。グロです)

これは、最初の段階でたぬきの色付けをマテリアル自体に行っていたのが原因のようでした。

たぬきの体の色付け・眼や鼻などの絵をすべて一つのテクスチャにしてみたところ、色が変になる現象も解消されました。

 

という四苦八苦があってモデルの書き出しを行ったため、今回は一旦歩かないをブラウザ上に配置する運びとなりました^^^

次回はボーン・アニメーションごと書き出して、歩くたぬきをブラウザに産み落としたいと思います…!

three.jsで書く…?

さて、jsonでたぬきのモデルを書き出すことができました!

 

一応この「tanuki_texture.json」の中身を見てみると

 

 

こんな感じです。大量の数字の羅列です。

blenderで作られたオブジェクトがこういった形式に変換されているわけですね〜深くは触れません。

 

ではではhtmlに上記のjsonを読み込ませて、ブラウザ上にたぬきを配置したいと思います!!

どうやって…^q^

そもそもどういう形でthree.jsを読み込ませて、どういった形でhtmlに記述するのかわかりませんでしたorz

 

そこで、「ドットインストール」さんで勉強をさせていただくことにしました。

下記がThree.jsに関する講義です。

なるほどなるほど、とてもわかりやすい!!

html内に「three.js」(と、後述しますがOrbitControls.jsも)を読み込ませて、html内のscriptタグ内に(もちろん外部jsファイルでも可)javascriptの形式でオブジェクトやその配置したい環境・光源の設定を書いていくようです!

ではドットインストールさんに習ってその通りに書いていきます〜

three.jsを使って書く!

詳しい書き方についての説明は割愛させていただきます(ドットインストールさんが本当にわかりやすい)が、簡単にまとめると以下の様な手順で書きました。

 

  • 1.オブジェクトを配置したいエリアに、空の任意id付きdiv(block要素なら基本なんでもよいです)を設置します。
  • 2.blenderで書きだしたjsonファイルを同ディレクトリ内に設置。
  • 3.「three.js」の公式サイトでthree.jsをDLし、ローカルの任意のディレクトリに設置、1で用意したhtmlのソース内で読み込みをさせます。
  • 4.three.jsのmethod等を使用して、シーン・モデル設置・光源・カメラ・レンダリングの設定をjsで書いていきます。

1.html内に空の任意id付きdivを設置

これはそのままです。下図のようにbodyの中にdivを設置します。今回は#canvasとしました。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>たぬき</title>
</head>

<body style="margin: 0px; padding: 0px;">

	<div id="canvas"></div>

</body>
</html>

2.jsonファイルをディレクトリに設置

前章で行った、blenderプラグインを使用して書きだされたjsonファイルを、htmlを設置したディレクトリに設置します。もちろん階層は自由ですが、今回は全体でも使用するファイル数が少ないので、すべて同階層に設置していきます。

モデルにテクスチャを使用している場合は、テクスチャの元素材(jpg/png/gif)を同じディレクトリに設置をしましょう。

3.three.jsをDL・ディレクトリに設置

これもそのままですが、three.js公式サイトの左側のメニューバーの中の「download」をクリックでthrre.jsに関するファイル一式がDLできます。

これを自分のローカルフォルダの中に設置します。私はhtmlがおいてあるフォルダと同階層に、とりあえずthree.jsとOrbitControls.jsを抜き出して設置しました。

 

 

フォルダ内に設置が済んだら、htmlの中にscriptタグで上記2jsファイルを読み込ませます。

4.three.jsを使用してwebGLで3D設置をする

いよいよjsを書きます!用意したhtmlの中にthree.jsで用意されているmethodなどを使用してjsを記述していきます。

three.jsのドキュメントは こちら

細かい説明は省略します!ドットインストールさんをみたらすぐにわかりますw

 

まずは表示したい画面の領域の横幅・高さの変数を作ります。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>たぬき</title>
</head>

<body style="margin: 0px; padding: 0px;">

	<div id="canvas"></div>

	<script src="three.js"></script>
	<script src="OrbitControls.js"></script>
	<script>
	  (function () {

		var width = window.innerWidth;
		var height = window.innerHeight;

    })();

	</script>

</body>
</html>
[/html]

次にモデルを設置する空間(「シーン」と呼ばれます)の変数を作ります。


<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>たぬき</title>
</head>

<body style="margin: 0px; padding: 0px;">

	<div id="canvas"></div>

	<script src="three.js"></script>
	<script src="OrbitControls.js"></script>
	<script>
	  (function () {

		var width = window.innerWidth;
		var height = window.innerHeight;

	  	// scene
	  	var scene = new THREE.Scene();

    })();

	</script>

</body>
</html>

three.jsで用意されているmethodは「new THREE.●●●●」(●部分は各methodが入ります)という形になっています!

 

さてこれで「任意で指定した幅・高さの画面内に、シーンという舞台を用意してそこにモデル設置・光源設定などをしていきますよ〜」というところまでできました!

 

ここにモデルを設置します!

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>たぬき</title>
</head>

<body style="margin: 0px; padding: 0px;">

	<div id="canvas"></div>

	<script src="three.js"></script>
	<script src="OrbitControls.js"></script>
	<script>
	  (function () {

		var width = window.innerWidth;
		var height = window.innerHeight;

	  	// scene
	  	var scene = new THREE.Scene();

	  	// blenderModel
		var loader = new THREE.JSONLoader();
		loader.load( './tanuki_texture.json', function(geometry, materials){
			console.log(geometry);
			var faceMaterial = new THREE.MeshFaceMaterial(materials);
			mesh = new THREE.Mesh(geometry, faceMaterial);
			mesh.position.set(0, 0, 0);
			mesh.scale.set(10, 10, 10);
			scene.add(mesh);
		});

	  	// light
	  	var light = new THREE.DirectionalLight(0xffffff, 1);
	  	light.position.set(100, 300, 50);
	  	light.castShadow = true;
	  	scene.add(light);
        var ambient = new THREE.AmbientLight(0x3d3d3d);
        scene.add(ambient);

	  	// camera
	  	var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
	  	camera.position.set(100, 50, 200);
	  	// camera.lookAt(ground.position);

		//helper
		// var axis = new THREE.AxisHelper(1000);
		// axis.position.set(0, 0, 0);
		// scene.add(axis);

	  	// rendering
	  	var renderer = new THREE.WebGLRenderer();
	  	renderer.setSize(width, height);
	  	renderer.setClearColor(0xededed, 1);
	  	renderer.shadowMap.enabled = true;
	  	document.getElementById('canvas').appendChild(renderer.domElement);
	  	renderer.render(scene, camera);

      // control
      var controls = new THREE.OrbitControls(camera, renderer.domElement)

      function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
        controls.update();

      }
      render();

    })();

	</script>

</body>
</html>

23〜33行目でblenderで書きだしたjsonファイルを読み込ませています。その下でこのjsonファイルに書きだされているものを「メッシュ」としてシーンに設置しますよ〜ということを宣言します。

そしてそして、この下でも同様に「光源(light)」「カメラ(camera)」「レンダリング(renderer)」の設定をし、最後にレンダリングをするようにしています!
長くなるのでここは割愛します!詳しくはドットインス…(略

そしていよいよ…

img_blender3_6

できたーーー!!ちなみにマウスやトラックパッド、スマホでは指で好きなようにたぬきを360°ビューしたり、拡大縮小できます!

実はこれは手順の中に含んでいないのですが、「OrbitControls.js」を利用して可能になった操作です。

そのため、上記コードもOrbitControls.jsに適応した書き方になっているので、普通にモデルを配置するよりは複雑になってます…!ここではOrbitControls.jsについては割愛させていただきますが(割愛だらけになってきた)、使い方はやはりドットインストールさんの最後の方の小にあるので、そちら御覧ください…!通常のモデル設置からの流れでOrbitControls.jsの使い方を知ることができるのでわかりやすいです!

感想

初めての3DCGモデリングから、初めてのwebブラウザへの配置までやってみたのですが、「私2Dばかりしかやってないし…webGLとかjs書くの嫌だな…(js得意でないw)」と思っていた自分はどこへやら。

「3DCG楽しい!!自分で描いたものが360°から見られてしかもマウスで動かせなんかしちゃったりして最高だ!!!」

と、すでに3DCGの虜です^^^

jsはあまり得意ではないのですが、three.jsはなんだか書いていて場面が頭にそのまま浮かんでくるようで、書いていて分かりやすかったです!

 

やはりインタラクティブ性は紙ものとはひと味違ったwebの特権ですね!

これを応用していけばwebサイトにかぎらずアプリやら何やら色んな楽しいことができそうでワクワクします^^

今後とも3DCGの知識をより深めていきたい!とモチベーションアップになる学習でした!