TOP

Blender Three.js エキスポートその２（３ＤのテキストのアニメーションやってみるⅡ）

公開日： 2015/10/27 : brender, Three.js, WebGL

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

今回は、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

同じ階層にＨＴＭＬファイルを用意し、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を読み込んだ後の<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 );

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 );
} )();

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

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

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

//Blenderのオブジェクトを読み込む
loader = new THREE.JSONLoader();
loader.load( 'text.json', function ( geometry, materials ) { //第１引数はジオメトリー、第２引数はマテリアルが自動的に取得）
    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 );
} );

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

カメラの調整

カメラ位置が近すぎるので、少し遠くにして、アニメーションを付けてみます。
30行目辺りのposition.set(x, y, 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 ) { //第１引数はジオメトリー、第２引数はマテリアルが自動的に取得）
    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 );
	} )();
} );

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 を見る

Tweet

関連記事

Blender Three.js 地球その３（ベイクと星）

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

記事を読む

Blender Three.js エクスポートその３（テクスチャなどがエクスポート出来ない場合）

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

記事を読む

Blender Three.js ガラスその２（環境マップ）

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

記事を読む

Blender Three.js ガラスその1（Cyclesレンダー）

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

記事を読む

Blender Three.js エキスポートその１（３ＤのテキストのアニメーションやってみるⅠ）

Blender インストール３Ｄを作るのに、Blender（ブレンダー）という、ソフトを使ってみ

記事を読む

Blender Three.js 地球その１（テクスチャ）

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

記事を読む

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

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

記事を読む

Blender Three.js 地球その２（ノード）

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

記事を読む

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

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

記事を読む

Blender Three.js エクスポートその４（モーフアニメーション）

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

記事を読む

brender Three.js WebGL

Message コメントをキャンセル

PREV: Blender Three.js エキスポートその１（３ＤのテキストのアニメーションやってみるⅠ）
NEXT: Blender Three.js エクスポートその３（テクスチャなどがエクスポート出来ない場合）

NEW ENTRY

: WordPress エラー：Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラーの状態 WordPress 管理画面のテキ

: WordPress タイトルの変更
テンプレートタグ the_title(); get_the_title

: 「All-in-One WP Migration」プラグインで簡単に WordPress のサーバー移行する手順メモ
1.移行元サイトでのデータエクスポート「All-in-One WP

: ドメインとは？DNSサーバーとは？
ドメインとは？ドメインとは？ドメインとは、インターネット上のネ

: javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined
Javascript で value の値を取得するこのようなHT

→もっと見る

最近の投稿

最近のコメント

アーカイブ

カテゴリー
- android
- brender
- Codeigniter
- CSS
- html5
- javascript
- JQuery
- magento
- PHP
- PWA
- SEO
- server
- SVG
- Three.js
- WebGL
- WEBフォント
- WordPress
- wordpress テンプレート

メタ情報

202404

Mon Tue Wed Thu Fri Sat Sun

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 ★ ★ ★ ★ ★

«

タグ
@font-face add_action add_filter CGI版 FastCGI GetText Googleロゴ GUSH Noto Sans CJK Poedit STINGER3 めんまフォントアイコンフォントカレンダーデスノートフォントフォントコンバーターフックメモリーエラーメンテナンスモジュール版自由の翼フォント銀魂フォント

にほんブログ村 FC2 Blog Ranking

Tweet