Blender Three.js エキスポート その2(3DのテキストのアニメーションやってみるⅡ)

公開日: : brender, Three.js, WebGL

Blender と Three.js で3Dのテキストのアニメーションやってみる その2

今回は、Three.js を使って、前回Blenderから書き出した JSONファイル を表示したりしようと思います。

Three.js のダウンロードと読み込み

Three.jsとは、JavaScriptで3DCGが簡単に動かせるライブラリです。

WebGL(ウェブブラウザで3DCGを表示させるための標準仕様)で、一番メジャーに使われているものです。

Three.js の読み込み

前回、Three.js のファイルは、Three.js 公式サイト”からダウンロードしてあると思います。
threejs.org

Three.js は、ダウンロードした以下の階層に入っています。
three.js-master/build/three.min.js

同じ階層にHTMLファイルを用意し、Three.js を読み込みます。
index.html

<html>
<head>
<meta charset="utf-8">
<title>Three.js サンプル</title>
</head>
<body>
 
<script src="three.min.js"></script>
<script>	
//ここにソースを書いていきます。
</script>

</body>
</html>

Three.js の基本コード

three.js

Three.js シーンの作成

Three.jsを読み込んだ後の<script>タグの中にコードを書いていきます。

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

Three.js レンダラの初期化

//シーンの大きさ
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);//最後に生成した要素を追加

背景色は薄い水色にしてみました。

Three.js カメラの設定

//カメラの設定
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, 0, 200 );//カメラ位置

Three.js ライトを追加する

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

Three.js 物体を追加

立方体を表示してみます。

// 物体を追加
var geometry = new THREE.CubeGeometry( 30, 30, 30 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// 表示する
renderer.render( scene, camera );

DEMO を見る

Three.js のアニメーション

three.js アニメーション

Three.js アニメーションを追加する

以下のコードを足して、立方体をアニメーションしてみます。

//アニメーション
( function renderLoop () {
    requestAnimationFrame( renderLoop );
	//物体を回す
	mesh.rotation.set(0,mesh.rotation.y + 0.01,mesh.rotation.z + 0.01)
		
	// 表示する
	renderer.render( scene, camera );
} )();

DEMO を見る

Three.js で Blender のオブジェクトを読み込む

Three.js Blender サンプル
前回Blenderで書き出した、text.json を同じ階層に設置し、立方体の表示部分を消して、以下に書き変えます。

Three.js でBlenderで作ったオブジェクトを表示する

//Blenderのオブジェクトを読み込む
loader = new THREE.JSONLoader();
loader.load( 'text.json', function ( geometry, materials ) { //第1引数はジオメトリー、第2引数はマテリアルが自動的に取得)
    var faceMaterial = new THREE.MeshFaceMaterial( materials );
    mesh = new THREE.Mesh( geometry, faceMaterial );
    mesh.position.set( 0,0,0);
    mesh.scale.set( 100, 100, 100 );
    scene.add( mesh );
// 表示する
renderer.render( scene, camera );
} );

DEMO を見る

Three.js で Blender のオブジェクトをアニメーション

Three.js で Blender のオブジェクトをアニメーション

カメラの調整

カメラ位置が近すぎるので、少し遠くにして、アニメーションを付けてみます。
30行目辺りのposition.set(x, y, z)のZを200→500に変更します。

camera.position.set( 0, 0, 200 );//カメラ位置

camera.position.set( 0, 0, 500 );//カメラ位置

Blenderのオブジェクトを読み込んでアニメーションさせる

立方体の時と同じアニメーションを追加します。

//Blenderのオブジェクトを読み込む
loader = new THREE.JSONLoader();
loader.load( 'text.json', function ( geometry, materials ) { //第1引数はジオメトリー、第2引数はマテリアルが自動的に取得)
    var faceMaterial = new THREE.MeshFaceMaterial( materials );
    mesh = new THREE.Mesh( geometry, faceMaterial );
    mesh.position.set( 0,0,0);
    mesh.scale.set( 100, 100, 100 );
    scene.add( mesh );

	//アニメーション
	( function renderLoop () {
    	requestAnimationFrame( renderLoop );
		//物体を回す
		mesh.rotation.set(0,mesh.rotation.y + 0.01,mesh.rotation.z + 0.01)
		// 表示する
		renderer.render( scene, camera );
	} )();
} );

DEMO を見る

TrackballControls.js でマウスでグリグリしたい

現状だと動画と同じなので、TrackballControl.js を使って、物体をマウスでグリグリ出来るようにしてみようと思います。
(実際にはカメラをグリグリさせて物体をグリグリしてる感じです。)

TrackballControl.js は ダウンロードした Three.js のファイル中に含まれています。

examples/js/controls/TrackballControls.js
このファイルをコピーして配置し、HTMLから読み込んで使います。

TrackballControls.js の読み込み

<script src="TrackballControls.js"></script>

TrackballControls.js トラックボールの作成

trackball = new THREE.TrackballControls( camera );//トラックボール

TrackballControls.js トラックボールでカメラプロパティを更新する

trackball.update();

マウスでグリグリ出来るようになりました。
DEMO を見る

Three.js で Blender のオブジェクトが暗い

最後に、TrackballControls.js を使うと、カメラを回すことになるので、物体の裏になった時が暗すぎるし、全体的にも暗いので、ライトを調整しようと思います。

ライトの調整

33行目辺りのライトを追加しているところを調整します。
ライトの強さの設定を0.5と柔らかく設定して、ライトのポジションも遠くに変更します。

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

AmbientLight の追加

さらに、AmbientLight という、自然光のような全体的に光を当てるライトを追加します。

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

明るくなりました。(もう一つライトを追加してもいいかなとも思います。)
DEMO を見る

関連記事

blender 球 テクスチャ

Blender Three.js 地球 その1(テクスチャ)

Blender 地球 テクスチャ Blenderで地球を作ってみようと思います。 最終的にはエク

記事を読む

blender 環境テクスチャ

Blender Three.js ガラス その1(Cyclesレンダー)

Blenderでガラスの靴をモデリングしてみました。 最終的にはthree.jsで表示しようと思い

記事を読む

Blender ボーンの追加

Blender Three.js エクスポート その4( モーフアニメーション)

前回作った亀に歩くモーフアニメーションを付けて、それを Three.js で表示するまでをやってみよ

記事を読む

Blender と Three.js UVのマテリアル複数 エクスポート

Blender Three.js エクスポート その3( テクスチャなどがエクスポート出来ない場合)

Blender ではちゃんと表示しているのに、Three.js でエクスポートしたら、オブジェクトや

記事を読む

Blender と Three.js で3Dのテキストのアニメーションやってみる

Blender Three.js エキスポート その1(3DのテキストのアニメーションやってみるⅠ)

Blender インストール 3Dを作るのに、Blender(ブレンダー)という、ソフトを使ってみ

記事を読む

blender three.js 地球

Blender Three.js 地球 その3(ベイクと星)

今回はベイクを試してみようと思います。 あと、参考サイトの英語の動画解説では、blenderの

記事を読む

three.js 環境マッピング

Blender Three.js ガラス その2(環境マップ)

前回Cyclesレンダーを試してみました。 Cyclesレンダーはノードを使用しているので、ガ

記事を読む

Blender Three.js 海 物理演算

Blender Three.js エクスポート その5(目のボーンとウェイトペイントとか)

前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったの

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

brender Three.js WebGL

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

マウスドラッグ
マウスドラッグ で ボール投げたい

アイキャッチ画像がマウスドラッグを描いたつもりが、子供の好きなあのボー

Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るの

Wordpress VR Test
WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる Word

画像加工 cropbox.js
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来

画像の拡大・縮小 タッチイベント
画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑