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

2012年10月15日

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

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

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

▼ 左ドラッグで回転、右ドラッグで移動、マウスホイールで拡大・縮小
こいつは、Canvas バージョンなんで、別ドメインの画像を使っても動作しています。WebGL バージョンはそうはいかないので、まあ、とにかくいろいろ面倒です。

1) 単純ページで見てみる

2) 違うコントロールで使ってみる
<style type="text/css">
#container_three {
	width: 600px;
	border: solid 1px #ccc;
	background-color: #eee;
}
</style>

<script type="text/javascript" src="http://winofsql.jp/three/Three_51.js"></script>

<div id="container_three"></div>
<script type="text/javascript">
// *********************************************************
// 共通
// *********************************************************
var container, stats;
var camera, scene, renderer;
var mesh,mesh2;
var w = 600;
var h = 700;
var controls;
var clock;
var data_target  = 'http://winofsql.jp/three/image/001.png';
var data_target2 = 'http://winofsql.jp/three/image/002.png';

// *********************************************************
// IE 用
// *********************************************************
if(!window["console"]){window["console"]={};window["console"]["log"]=function(){}}

// *********************************************************
// Opera 用
// *********************************************************
if( !XMLHttpRequest.DONE ) {
	console.log("setting");
	XMLHttpRequest.prototype.DONE = 4
	XMLHttpRequest.prototype.HEADERS_RECEIVED = 2
	XMLHttpRequest.prototype.LOADING = 3
	XMLHttpRequest.prototype.OPENED = 1
	XMLHttpRequest.prototype.UNSENT = 0
}

// *********************************************************
// WebGL 利用判定
// *********************************************************
var WebGL_chk = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )();

// *********************************************************
// 全体構成
// *********************************************************
container = document.getElementById( 'container_three' );
init();
animate();

// *********************************************************
// 初期処理
// *********************************************************
function init() {

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

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

	// *************************************************
	// Trackball コントロール
	// *************************************************
	controls = new THREE.TrackballControls( camera );

	// *************************************************
	// データの読み込み
	// *************************************************
	var image = new Image()
	image.onload = function () {

		var texture = new THREE.Texture( this );
		texture.needsUpdate = true;
		var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});

		// 平面表
		mesh = new THREE.Mesh(new THREE.PlaneGeometry(350, 400, 5, 5), material);
		mesh.rotation.x = 0;
		mesh.rotation.y = 0;
		scene.add(mesh);
		
	};
	image.src = data_target;

	var image2 = new Image()
	image2.onload = function () {

		var texture2 = new THREE.Texture( this );
		texture2.needsUpdate = true;
		var material2 = new THREE.MeshBasicMaterial({map: texture2, overdraw: true});

	        // 平面裏
		mesh2 = new THREE.Mesh(new THREE.PlaneGeometry(350, 400, 5, 5), material2);
		mesh2.rotation.x = 0;
		mesh2.rotation.y = 180 * Math.PI / 180; // 180°( * Math.PI / 180 が固定 )
		scene.add(mesh2);
		
	};
	image2.src = data_target2;

	// *************************************************
	// 描画
	// *************************************************
	renderer = new THREE.CanvasRenderer( );
	renderer.setSize( w, h );

	// *************************************************
	// DIV に適用
	// *************************************************
	container.appendChild( renderer.domElement );

}


// *********************************************************
// アニメーションループ
// *********************************************************
function animate() {

	requestAnimationFrame( animate );
	render();

}

// *********************************************************
// 表示
// *********************************************************
function render() {

	controls.update( );
	renderer.render( scene, camera );

}
</script>




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