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 Three.js 海 物理演算

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

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

記事を読む

blender 地球

Blender Three.js 地球 その2(ノード)

前回はNASAの地球のテクスチャを1つだけ使って、球へのテクスチャの貼り方を2パターンやってみました

記事を読む

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

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

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

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

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

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

brender Three.js WebGL

Message

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

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)
WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細

Wordpress 自作フォーム
WordPress 自作フォーム その1(サンプルと設置)

Wordpress でプラグインを使わずにフォームをやってみます。

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分か

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

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

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

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

→もっと見る

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