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（ブレンダー）という、ソフトを使ってみ

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Blender Three.js エクスポートその５（目のボーンとウェイトペイントとか）

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

記事を読む

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

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

記事を読む

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 テンプレート

メタ情報

202410

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 31 ★ ★ ★

«

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

にほんブログ村 FC2 Blog Ranking

Tweet