SQLの窓 イラストAC フリー素材

2014年10月18日

2012年04月21日 時点の Three.js の WebGL チェックと 2014年 7月17日(r68) のチェック

この結果を console.log で表示してみましたが、うまく動作している事を確認しました。この処理は一行にして実行文扱いで戻り値を true か false で返すので、if(){} の 条件式の部分に記述できます。
WebGLRenderingContext は canvas に WebGL の描画命令を発行するためのオブジェクトです。
コンテキスト名 "experimental-webgl" は、仕様書が策定中の間に使用する一時的な名称です。仕様書が確定した後は、"webgl" という名称が使われます。
なんですが、見事に IE11 だけ false になりました。。。。。
(function() {
    try {
        return !!window.WebGLRenderingContext && !!document.createElement('canvas').getContext('experimental-webgl');
    } catch(e) {
        return false;
    }
})()



▼ 最新
(function() {
    try {
        var canvas = document.createElement('canvas');
        return !! window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
    } catch(e) {
        return false;
    }
})()
どう意味あいかは解りませんが、とても念入りになっていました。webgl と experimental-webgl を両方チェックしているところが、何とも涙ぐましいような気もします。


posted by at 2014-10-18 23:24 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2014年08月08日

Three.js : マテリアルで設定される overdraw: true は、セグメントの境界である白い線を消す機能です

Material.js に、コメントで説明があります。

Overdrawn pixels (typically between 0 and 1) for fixing antialiasing gaps in CanvasRenderer

CanvasRenderer でアンチエイリアシングのギャップを修正するためのフラグだそうです。他のソフトでも同様のものがあったので、その内容は以下のように書かれています。

antialiasing gaps(アンチエイリアスによる隙間)を埋めるために立体表面を広げるか。広げる場合true。それ以外の場合false。
内容は『よりよい描画』のようですし、サンプルではだいたい true のようなので、セットしておくと良いと思います。 ▼ 以下をクリックするとセグメント(5x5)の境界である線を見る事ができます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://winofsql.jp/WinOfSql.ico" />
<style>
body {
	margin: 0;
	overflow: hidden;
}
</style>
</head>
<body>

<div id="container_three"></div>
<script src="three.min_68.js"></script>
<script>

	var v_offset = 0;
	var v_width = window.innerWidth;
	var v_height = window.innerHeight;
	var v_action = 0.05;
	var v_comera_v = 200;
	var v_iamge_url = "image/f1.jpg"
	var v_iamge_url2 = "image/b1.jpg";

	var container;
	var camera, scene, renderer;
	var mesh,mesh_r;
	var mouseX = 0, mouseY = 0;
	var material,texture;
	var material2,texture2;

	init();
	animate();

	// *****************************
	// 構成の設定
	// *****************************
	function init() {

		// *****************************
		// Three.js を実行するコンテナ
		// *****************************
		container = document.getElementById( 'container_three' );

		// *****************************
		// シーン
		// *****************************
		scene = new THREE.Scene();
		scene.position.y = v_offset;

		// *****************************
		// カメラ
		// *****************************
		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.set( 0, v_comera_v, 650 );
		scene.add( camera );

		// *****************************
		// 画像リソースの定義
		// *****************************
		var image = new Image()
		image.onload = function () {

			// 画像がロードされてから処理を行う

			// テクスチャとして画像を処理
			texture = new THREE.Texture( this );
			texture.needsUpdate = true;

			// 立体表面を広げ無い(overdraw: false)
			// テクスチャを使った標準材料
			material = new THREE.MeshBasicMaterial({map: texture, overdraw: false });

			// 平面の表 ( 300 x 300 / セグメントの数 5 x 5 )
			mesh = new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 5, 5), material);
			mesh.rotation.x = 0;
			mesh.rotation.y = 0;
			scene.add(mesh);
			
		};
		image.src = v_iamge_url;

		// *****************************
		// 画像リソースの定義
		// *****************************
		var image2 = new Image()
		image2.onload = function () {

			texture2 = new THREE.Texture( this );
			texture2.needsUpdate = true;

			// に立体表面を広げる
			material2 = new THREE.MeshBasicMaterial({map: texture2, overdraw: true});

			// 平面の裏 ( 300 x 300 / セグメントの数 5 x 5 )
			mesh_r = new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 5, 5), material2);
			mesh_r.rotation.x = 0;
			mesh_r.rotation.y = 180 * Math.PI / 180; // 180°( * Math.PI / 180 が固定 )
			scene.add(mesh_r);
			
		};
		image2.src = v_iamge_url2;


		// *****************************
		// 描画用オブジェクト
		// *****************************
		renderer = new THREE.CanvasRenderer();
		renderer.setSize( v_width, v_height );
		// 背景色
		renderer.setClearColor( 0x404040 );

		// コンテナに、描画オブジェクトの本体を登録
		container.appendChild( renderer.domElement );


		// *****************************
		// マウスイベントの登録
		// *****************************
		document.addEventListener( 'mousemove', onDocumentMouseMove, false );

	}

	// *****************************
	// マウス効果用
	// *****************************
	function onDocumentMouseMove( event ) {

		mouseX = event.clientX;
		mouseY = event.clientY;

	}

	// *****************************
	// 繰り返し
	// *****************************
	function animate() {

		requestAnimationFrame( animate );

		// 初回の呼び出し
		render();

	}

	// *****************************
	// 描画
	// *****************************
	function render() {

		camera.position.x += ( mouseX - camera.position.x - v_width / 2 ) * v_action;
		camera.position.y += ( - mouseY - camera.position.y + (v_offset + v_comera_v +(container.offsetTop-window.pageYOffset))  ) * v_action;
		camera.lookAt( scene.position );

		if ( mesh && mesh_r ) {
			mesh.rotation.y -= 0.005;
			mesh_r.rotation.y -= 0.005;
		}

		renderer.render( scene, camera );

	}


</script>

</body>
</html>



posted by at 2014-08-08 22:08 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2013年03月30日

Three.js(r57) : THREE.Texture のプロパティの意味

THREE.ImageUtils.loadTexture

まず、画像を loadTexture で読み込むわけですが、この際指定するのは URL です。そして、実行後返されるのが THREE.Texture になります。
CanvasRenderer で別ドメインの画像を読み込む場合は、loadTexture 実行前に、THREE.ImageUtils.crossOrigin = null; を実行して下さい
この THREE.Texture のコンストラクタの引数は、以下のようになっています。
THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
これらは、loadTexture の中で、『var texture = new THREE.Texture( image, mapping );』として処理されているので wrapS 以降はデフォルト値となります。

wrapS, wrapT

この二つの値は、テクスチャの x座標(S) と y座標(T) 方向の処理方法をセットする事ができ、その値は以下の三種類です。
// Wrapping modes

THREE.RepeatWrapping = 1000;
THREE.ClampToEdgeWrapping = 1001;
THREE.MirroredRepeatWrapping = 1002;
デフォルトは、THREE.ClampToEdgeWrapping で、テクスチャを面に対して伸縮してセットする事を意味します。THREE.RepeatWrappingTHREE.MirroredRepeatWrapping は、それぞれテクスチャを繰り返してマッピングするもので、前者は境界毎に同じものが繰り返され、後者は境界毎に反転されたものが使用されます。 但し、繰り返し指定時には、プロパティの repeat に対して x 座標方向と y座標方向に繰り返す数を set メソッドで指示する必要があります。
例) map.repeat.set( 1, 3 );
※ (注意) CanvasRenderer では、THREE.MirroredRepeatWrapping は動作しません( WebGLRenderer は動作します ) CanvasRenderer ( これはバグっぽいですね ) 正常なソースコード WebGLRenderer anisotropy このプロパティは、デフォルトでは 1 ですが、大きくする事によってテクスチャのマッピングの品質を上げます。しかし、実際は目視してもほとんど変わらない事が多いと思います。 いずれのプロパティも、3D の処理における一般的な呼び名で、Three.js 内で説明を見つける事はできませんが、インターネットでは解説の中で当たり前のように表現されています。 その他のデフォルト値 mapping : new THREE.UVMapping() magFilter : THREE.LinearFilter minFilter : THREE.LinearMipMapLinearFilter format : THREE.RGBAFormat; type : THREE.UnsignedByteType;
タグ:Three.js
posted by at 2013-03-30 02:33 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2013年03月20日

できる限りだれでも Three.js を楽しめるように、Three.js の基本コードをできる限り簡単にして、オブジェクトやアニメーション部分をホスティングしてみました

表示したいオブジェクトのコードと、アニメーションの方法(この場合はカメラが周回する)を、Three.js の名前空間である THREE に定義して外部 JavaScript として参照して実行しています。また、ここはブログなので IFRAME にその内容を書き込んでいます。

THREE.UserCubes1 
THREE.UserPlay1 
Three.js のサンプルコードには、ピンからキリまであって、相当のプログラマでもさっぱり解らないものもあります。しかし、構成としては二つのパターンがあり、一つはその場でアニメーションや入力インターフェイスのイベントコードを全部書くものと、そのへんはコントロールクラスに任せてオブジェクトのみを書くものです。

他人が使うアプリならば、前者である必要がありますが、単にテストするだけならば後者が簡単です。ですが、後者もまだ外部のユーティリティレベルでおまけみたいなものなので、内容は中を読む必要があります。

ここでは、前者のほうを自前で切り取って、本体の部分の構成を明確にしています。結局は、カメラとシーンとレンダラーが基本で、表示するオブジェクトがあってはじめて静止画が可能になり、アニメーションループによって動きだします。

その、それぞれの役割が以下のソースでは明確になっているはずです。
<script type="text/javascript">
if ( window['loadThree'] !== true ) {
	window['loadThree'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/three.min56.js\"></"+"script>");
}
</script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/user_cubes1.js" charset="utf-8"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/user_play1.js" charset="utf-8"></script>

<input type="text" id="radius" value="800" /><input type="button" value="半径変更" onclick='user_play.radius = eval(document.getElementById("radius").value);console.dir(user_play)' />
<script type="text/javascript">

var w = 600;
var h = 500;
document.write("<div id=\"three_area\" style='width:"+w+"px;height:"+h+"px;'></div>");

var camera, scene, renderer;
var user_play;

build_3d_world();

function build_3d_world() {

	// カメラ
	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	// シーン
	scene = new THREE.Scene();
	// 表示対象
	var UserCubes = new THREE.UserCubes1( scene );
	// レンダラー
	renderer = new THREE.CanvasRenderer();
	renderer.setSize( w, h );
	document.getElementById("three_area").appendChild( renderer.domElement );

	// アニメーション
	user_play = new THREE.UserPlay1( scene, camera, renderer, animate );
	user_play.start();

}
function animate() {

	requestAnimationFrame( animate );
	user_play.render();

}

</script>

ここで、THREE.UserCubes1 は、表示対象のオブジェクトの集合です。THREE.UserPlay1 は、アニメーションの方法をクラスで定義して、インスタンスで処理するようにしており、中の render メソッドに具体的な処理が書かれています。

その render メソッド内で使う変数が、THREE.UserPlay1 でインスタンスのプロパティとして定義されています。ループ処理は『仕様』上どうしてもグローバルに書く必要があるので外に出していますが、必要な処理は常に 2行です。
requestAnimationFrame( animate );
user_play.render();
render メソッドの中にバリエーションを作れば、アニメーション方法をプロパティやメソッドで変更できるように改造する事もできます。 それ以外はカメラは作るだけ。シーンも表示対象も作るだけです。レンダラーのみ、コンストラクタでサイズ指定できないので、メソッドを呼んでいます。そして、レンダラーだけでは表示できないので、表示可能なブラウザのエリアに登録します。
renderer.domElement を div へ追加
アニメーションの開始は、外部に定義した animate を呼び出せばいいのですが、整理上 UserPlay1 のメソッドして呼び出しています。 ボタンをクリックするとプロパティが変更されて、実行中のインスタンスの中でカメラと被写体との距離が変更されるようになっています。
半径 0 は、仕様で動作しません。半径 1 でシーンの中心にカメラが移動します。

x と z 軸の平面に対して、y 軸にも移動しているので、カメラの Far(10000) より少ない値で見えなくなります。
アニメーションは常に描画の繰り返しなので、変数の内容を変更するとたいていの状態変更が可能です( 中には、Three.js の内部にしか無いものがありますが、それは Three.js がまだまだ、ライブラリとして発展途上だからです )
posted by at 2013-03-20 23:23 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2013年03月08日

Three.js では、複数のオブジェクトを一つの Object3D に追加して一括管理します。


実行ページと全体ソース

Object3D は、3Dオブジェクトの基本

Scene オブジェクトも Object3D を継承しており、オブジェクト全体を管理する上で特殊なプロパティを持っています。
THREE.Scene = function () {

	THREE.Object3D.call( this );

	this.fog = null;
	this.overrideMaterial = null;

	this.matrixAutoUpdate = false;

	this.__objects = [];
	this.__lights = [];

	this.__objectsAdded = [];
	this.__objectsRemoved = [];

};

THREE.Scene.prototype = Object.create( THREE.Object3D.prototype );

Three.js では、本体の Function に プロパティが定義されており、prototype にメソッドが定義されるので、以上のような記述でクラスの継承が行われます。追加のメソッドが必要な場合は、prototype に直接定義します。

ここで、__objects には、シーンに追加されるオブジェクトが設定され、add やら remove を使った時に自動的に処理されます。ですから、直接オブシェクトを操作したい場合は、極端な話で言うと、この配列内のオブジェクトら必要なオブジェクトをなんらかの条件によって選択して、そのオブジェクトの持つプロパティやメソッドを操作すばいい事になります。( あくまで一般的に話で、仕様が変わる可能性のある内部部分の話です )

※ 各 Object3D には children という配列があり、階層で管理されています。
( チェーン情報として parent も持っています )

また、__objectsAdded __objectsRemoved は、何故か、__objects とは別に追加したオブジェクトや削除したオブジェクトがここにセットされる事になります。さらに、WebGLRenderer と CanvasRenderer では扱いが違っていました。

Three.js の開発は WebGLRenderer 中心

WebGLRenderer では、あるタイミングで __objectsAdded や、__objectsRemoved の内部はクリアされていました。しかし、CanvasRenderer では削除しても放置状態なので、おそらく 削除しても GC の対象にはならないと思います( いずれ対応されるかもしれません )。ですが、Canvas で実行するような内容ですと、そもそも複雑なオブジェクトはレスポンス的に無理があるので、GC するまでも無いというのが実際かもしれません。

UserCube1 を Three.js の記述様式で定義する

まず、プロパティだけを Function で定義します。
THREE.UserCubes1 = function ( scene, cubeSize, cubeNum, displaySpan ) {

	// キューブの基本サイズ( 見た目は後でスケールで変化する )
	this.cubeSize = ( cubeSize !== undefined ) ? cubeSize : 20;
	// キューブの数
	this.cubeNum = ( cubeNum !== undefined ) ? cubeNum : 100;
	// 表示幅( 発生させる座標の範囲の長さ )
	this.displaySpan = ( displaySpan !== undefined ) ? displaySpan : 800;

	this.geometry = new THREE.CubeGeometry( this.cubeSize, this.cubeSize, this.cubeSize );
	this.group = null
	this.scene = scene;

	this.renew();

};
引数のデフォルト値の扱い

( cubeSize !== undefined ) ? cubeSize : 20; のような書き方は、Three.js 全体で使われている引数に対するデフォルト値の設定方法です。引数を省略すると、undefined になるので、一番右端が省略時の値になります

複数のキューブを統括する、this.group

このプロパティは、後で Object3D が設定されます。Object3D は、階層構造が可能に設計されており、その最上位が Scene であるようになっています。ここでは、変数の準備だけを行って、処理は以下のように prototype への設定となります。
THREE.UserCubes1.prototype = {
	constructor: THREE.UserCubes1,
	remove: function() {
		this.scene.remove( this.group )
		this.group = null;
	},
	renew: function() {
		if ( this.group == null ) {
			this.group = new THREE.Object3D();
			this.scene.add( this.group );
		}
		for ( var i = 0; i < this.cubeNum; i ++ ) {

			var object = new THREE.Mesh(
				this.geometry,
				new THREE.MeshBasicMaterial( {
					color: Math.random() * 0xffffff,
					transparent: true,
					opacity: 0.5 }
				)
			);

			// 正座標に発生させて、原点に半分戻す
			object.position.x = Math.random() * this.displaySpan - this.displaySpan/2;
			object.position.y = Math.random() * this.displaySpan - this.displaySpan/2;
			object.position.z = Math.random() * this.displaySpan - this.displaySpan/2;

			object.scale.x = Math.random() * 2 + 1;
			object.scale.y = Math.random() * 2 + 1;
			object.scale.z = Math.random() * 2 + 1;

			// 向きを360度ランダム
			object.rotation.x = Math.random() * 2 * Math.PI;
			object.rotation.y = Math.random() * 2 * Math.PI;
			object.rotation.z = Math.random() * 2 * Math.PI;

			this.group.add( object )

		}
	
	}
}

constructor は、常に事前に定義した Function であり、ここで実装しているメソッドは、removerenew です。renew は、UserCubes1 の持つ情報でキューブ情報を追加し続けます。remove すれば、一からですが、追加し続けた結果、記事先頭のような画像になって画面をキューブが満たして行きます。

scene から見た位置や回転は group に対して行う

個別のオブジェクトの属性を変更するメソッドは結構複雑な実装になると思いますが、全体に対して行う処理は、group が Object3D なので、普通に position や rotation や scale を group に対して実行するだけです。

※ 以下は、Chrome のコンソールで効果をテストしているところです。





posted by at 2013-03-08 00:04 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2013年03月04日

Three.js の名前空間でユーザオブジェクトを作って、Three.js の基本を再確認する


実行ページ

THREE.UserCubes1

ここで、ユーザオブジェクトとしているのは、複数のキューブをシーンに追加しているだけなので、それぞれのキューブの削除や操作は実装していません。極端に言えば単に記述場所を別にしただけですが、それでも本体はとても見やすくなっているはずです。

Three.js サンプルの一般的な構成

サンプルには、ステータス等動作に関係のないものがありますが、必要な基本部品は以下の4つになります。

❶ カメラ
❷ シーン
❸ レンダラー( 描画 )
❹ オブジェクト

オブジェクトは、実際目に見えるものでいろいろなパターンがありますが、それ以外は必ずカメラとシーンとレンダラーの三点セットとなっています。

init 関数で環境作成

この部分で、❶ 〜 ❹ を作成しますが、ここで描画が行われるわけではありません。この後、ループ処理に入って初めてアニメーションとして実装されます。

init 関数は名前はなんでもいいのですが、まずカメラを作成し、シーンを作成します。この二つのオブジェクトは単独で存在し、お互いの関係を計算して描画するのがレンダラーです。

そのレンダラーがレンダラーとしての役目を実行するのはループ処理の中であって、init 関数の中ではありません。ここでは、レンダラーは作成された後に、ブラウザの描画エリアへ登録されます。
document.getElementById("three_area").appendChild( renderer.domElement );
登録されただけでは描画はされず、この後アニメーションが必要無いのであれば、静止画として以下の二行を実行する事になります。
camera.lookAt( scene.position );
renderer.render( scene, camera );
実際表示されるのは、シーンに追加されたオブジェクトなので、第❹番目の要素として、init 関数では、シーンに対して追加して行く事になります。
requestAnimationFrame でループ処理 このメソッドは、Three.js では無く、DOM のメソッドです。このメソッドによって、次の描画時に呼ばれるメソッドを登録するのですが、一回描画する毎に自分自身を登録するので結果的にループ処理を実行する事になります ( IE9 にこのメソッドが無いので、Three.js は setTimeout で代用した関数を定義してくれています ) Microsoft と Mozilla のドキュメント requestAnimationFrame メソッド (Windows) window.requestAnimationFrame - DOM | MDN
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min56.js"></script>
<div id="three_area" style='width:600px;height:500px;'></div>

<script type="text/javascript">
// WebGL チェック
//if( !( function () { try { return !! window.WebGLRenderingContext && !! //document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
//	document.write("<span style='font-weight:bold;font-size:30px;'>WebGLが使用できません</span>");
//	document.getElementById("three_area").style.display = 'none';
//}

// Three.js の名前空間でオブジェクト作成
THREE.UserCubes1 = function ( scene, cubeSize, cubeNum, displaySpan ) {

	// キューブの基本サイズ( 見た目は後でスケールで変化する )
	this.cubeSize = ( cubeSize !== undefined ) ? cubeSize : 20;
	// キューブの数
	this.cubeNum = ( cubeNum !== undefined ) ? cubeNum : 100;
	// 表示幅( 発生させる座標の範囲の長さ )
	this.displaySpan = ( displaySpan !== undefined ) ? displaySpan : 800;

	this.geometry = new THREE.CubeGeometry( this.cubeSize, this.cubeSize, this.cubeSize );
	this.objects = [];

	for ( var i = 0; i < this.cubeNum; i ++ ) {

		var object = new THREE.Mesh(
			this.geometry,
			new THREE.MeshBasicMaterial( {
				color: Math.random() * 0xffffff,
				transparent: true,
				opacity: 0.5 }
			)
		);

		// 正座標に発生させて、原点に半分戻す
		object.position.x = Math.random() * this.displaySpan - this.displaySpan/2;
		object.position.y = Math.random() * this.displaySpan - this.displaySpan/2;
		object.position.z = Math.random() * this.displaySpan - this.displaySpan/2;

		object.scale.x = Math.random() * 2 + 1;
		object.scale.y = Math.random() * 2 + 1;
		object.scale.z = Math.random() * 2 + 1;

		// 向きを360度ランダム
		object.rotation.x = Math.random() * 2 * Math.PI;
		object.rotation.y = Math.random() * 2 * Math.PI;
		object.rotation.z = Math.random() * 2 * Math.PI;

		this.objects.push( object );
		scene.add( object );

	}

};


var w = 600;
var h = 500;

var camera, scene, renderer;

init();
animate();

function init() {

	// カメラ作成
	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	camera.position.set( 0, 300, 500 );

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

	// メインオブジェクト作成
	var UserCubes = new THREE.UserCubes1( scene );

	// レンダラー作成
	renderer = new THREE.CanvasRenderer();
	renderer.setSize( w, h );

	// 配置
	document.getElementById("three_area").appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );
	render();

}

var radius = 600;
var theta = 0;

function render() {

	theta += 0.1;

	camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
	camera.lookAt( scene.position );

	renderer.render( scene, camera );

}

</script>

コメントの WebGL チェックは、レンダラーを WebGL に変更した時に使用します。


タグ:jquery javascript
posted by at 2013-03-04 19:55 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2012年10月15日

Three.js(51) でPlane(平面)。但し、ブログで動作するのは Canvas のみ(画像が別ドメインでも動く)。★ Google Chrome ではスクロールバーが効かなくなるのでキーボードで。。。

Three.js の TrackballControls というのを使うと、簡単にドラッグで対象がグルグルするのですが( トラックボールで拡大・縮小 )、Google Chrome ではスクロールバーをマウスで動かせなくなりますし、そもそもマウスホイールが処理用になるので、スクロールはキーボードのみとなってしまいます。他のブラウザでは、スクロールバーをマウスで使えるようですが・・・・本当はブログ等のスクロールが必要なページに貼って処理するのは、使い方間違っているので仕方ありません。

ですが、他との比較がいろいろ必要で、 Three.js はバージョンによって注意すべき事が突然変わるので記録用でもあります。特に 49 と 50 の間で酷い仕様変更あったんですよ。まだまだ実用では無理のあるライブラリですが、使い勝手は解ってさえおればとても素敵なんです。

▼ 左ドラッグで回転、右ドラッグで移動、マウスホイールで拡大・縮小
続きを読む
posted by at 2012-10-15 01:56 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2012年05月26日

THREE.PerspectiveCamera ( 透視法射影カメラ ) の引数

THREE.PerspectiveCamera => THREE.Camera => THREE.Object3D
( THREE.Camera の持つメソッドは、lookAt のみ ) 

fov垂直方向の視野角(45〜50くらい)
aspect描画範囲の縦横比
near視点からどれだけ離れた位置から表示するか
far視点からどれだけ離れた位置まで表示するか
THREE.PerspectiveCamera = function ( fov, aspect, near, far ) {

	THREE.Camera.call( this );

	this.fov = fov !== undefined ? fov : 50;
	this.aspect = aspect !== undefined ? aspect : 1;
	this.near = near !== undefined ? near : 0.1;
	this.far = far !== undefined ? far : 2000;

	this.updateProjectionMatrix();

};

参考ページ

メソッド

setLens( focalLength, frameHeight ) 
焦点距離とフレーム高さ

setViewOffset( fullWidth, fullHeight, x, y, width, height )
( このモードを抜けるには、fullWidth に undefined をセットすると良いみたいです )

+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+

var w = 1920;
var h = 1080;
var fullWidth = w * 3;
var fullHeight = h * 2;

--A--
camera.setOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
--B--
camera.setOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
--C--
camera.setOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
--D--
camera.setOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
--E--
camera.setOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
--F--
camera.setOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );


※ メソッドは未テストです


タグ:Three.js 3D
posted by at 2012-05-26 13:57 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2012年03月10日

Three.js : 平面、球面、フォントと来て、次はキューブですね

嘘です、先に出来てました。キューブが一番解りやすいと言うか、世の中で
ポピュラーなんで最初にやりました。

・・・・これも嘘です。

最初にやったのは、メタセコイアデータのロードです。これが出来ないと面
白くもなんとも無いので最初にいろいろテストしています。でも、だからこ
そ他のオブジェクトの特性も知っておかないといけないので、いろいろやっ
ています。

デモページを開くには、以下の画像をクリックして下さい。



関連する記事

Canvas を使って 3D データを描画する JavaScript ライブラリ『Three.js』の
バグ対応( Firefox、IE9、Opera で正しくテクスチャが適用されない )

作者の mrdoob さんはバグだとは思っていないらしいですけれど、WebKit 以外
の人間で、Canvas を使ってテクスチャしようと思ったら結構致命的です。その
わりに簡単に誰でも修正できてしまうし・・・・でも普通は解らないですよね。

そう思って書き込んだんですが、軽くスルーされてしまったのでした。

>It's not supposed to work. 
>I'm considering removing that code altogether as it only works on WebKit.

サポート云々では無く、テクスチャが実際に貼れないんですけど、つたない英語
では説明もできないので、こちらもスルーしました。

どちらにしても、WebGL 使えばどうってこと無いんですが、Win8 でビルドを予定
しているので、Canvas ベースで無いと困るのであります・・・


posted by at 2012-03-10 01:28 | Comment(0) | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

2012年03月09日

Three.js : 日本語フォントの立体表示

typeface.js で TrueType フォントを Three.js でも使える .js データに変換
してくれます。『みかちゃんフォント』をコンバートしてみましたが、ひらがな
とカタカナと通常漢字で 8.7 M ぐらいですから、まあなんとかなるとは思います
が、普通は全部いらないので自分でフォントデザインして必要なぶんだけのフォン
トファイル作ったほうがいいとは思います。




canvas_geometry_text.html でそのままテストできますが、ワイヤーフレーム
のほうがデザインチックなので、以下のように。

var textMaterial = 
   new THREE.MeshBasicMaterial( {
      color: 0x000000,
      overdraw: true,
      wireframe: true,
      wireframeLinewidth: 1
   } );


日本語フォントでもかなり上質なコンバートしてくれますので( つぶれる事もある )
世のフリーなデザインフォントは皆素敵な素材として使えると言う事ですね。


posted by at 2012-03-09 03:23 | Comment(0) | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します