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 UVのマテリアル複数 エクスポート

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

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

記事を読む

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

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

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の

記事を読む

blender 地球

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

brender Three.js WebGL

Message

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

リビジョンを削除し、テーブルを最適化してDBの容量を削減
WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョン機能 リビジョンは過去の記事を保存して

Javascript let const アロー関数 クラス
Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関

Strict モード JavaScript
Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECM

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

→もっと見る

    • 202010
      Mon Tue Wed Thu Fri Sat Sun
      1234
      567891011
      12131415161718
      19202122232425
      262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑