Three.js(51) でPlane(平面)。IEWebGL をインストールすると IE でも動くサンプル : GINPRO / SQLの窓と銀プログラマ

<< 既存のスクリプトのシェーダーのパラメー… | TOP | また、DAZ で 100% OFF の出物。でも・・… >>

2012年10月16日

Three.js(51) でPlane(平面)。IEWebGL をインストールすると IE でも動くサンプル



いまんとこ、Firefox が一番問題が少ないです。Google Chrome はわりと何か起きます。ま、でも、基本的に開発している人(Three.js)が Google Chrome をターゲットにしてるぽいので、殆どは Chrome でテストしています。

Opera Next は結構悲惨な状態で、IE は IEWebGL をインストールすれば動きます。Firefox は、ローカルの file:///C: でも動くので凄いです。

でも、Canvas バージョンなら全てのブラウザで動きますし、Canvas なら Windows8 でビルドできます(動作というか信頼性はまだあまりアテにならないですけれど)。

WebGLバージョンはこちらから

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Plane / three / WebGL</title>

<style type="text/css">
* {
	font-size: 12px;
}
body {
	margin: 0;
	background-color: #ffffff;
}

a {
	color: navy;
}

#container_three {
	width: 1000px;
	height: 600px;
	border: solid 1px #ccc;
	margin-left: 50px;
	background-color: #eee;
}
#message {
	position: absolute;
	left: 0px;
	top: 0px;
	color: red;
	font-size: 20px;
}
</style>

<link rel="stylesheet" href="../jquery/jqcss/black-tie/jquery-ui-1.8.20.custom.css" type="text/css" />
<script type="text/javascript" src="../jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
// *********************************************************
// IE 用
// *********************************************************
if(!window["console"]){window["console"]={};window["console"]["log"]=function(){}}
if ((window.navigator.userAgent.toLowerCase()).indexOf("msie") > -1) {
	(function(){
		var str="";
		str+="<"+"script type=\"text/javascript\" src=\"../three/webglhelper.js\"></"+"script> ";
		document.write(str);
	})();
}
</script>

</head>
<body>

<div style='position:absolute;left:60px;top:34px;'>
<input id="dragToLook" type="checkbox" onclick='controls.dragToLookStop = !this.checked;'> チェックするとドラッグで FLY
</div>

<div style='position:absolute;left:280px;top:40px;'>Y軸回転</div>
<div id="slider-r-y" style='position:absolute;left:350px;top:40px;width:200px;'></div>

<div style='position:absolute;left:16px;top:225px;'>X軸</div>
<div id="slider-r-x" style='position:absolute;left:20px;top:250px;height:200px;'></div>
<br /><br />

<div id="container_three">
<script id="WebGLCanvasCreationScript" type="text/javascript">
var container = document.getElementById( 'container_three' );
var WebGL_chk;
if ((window.navigator.userAgent.toLowerCase()).indexOf("msie") > -1) {
	WebGLHelper.CreateGLCanvasInline('renderCanvas');
}
else {
	WebGL_chk = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )();
	if ( !WebGL_chk ) {
		container.innerHTML = "<div id='message' style='postion:absolute;left:100px;top:350px;color:#FF0000;font-size:50px;'>WebGL が使用できません</div>";
	}
}
</script></div>


<script type="text/javascript" src="../three/Three_51.js"></script>
<script type="text/javascript" src="../three/FlyControls_lightbox.js"></script>


<script type="text/javascript">
// *********************************************************
// 共通
// *********************************************************
var camera, scene, renderer;
var mesh,mesh2;
var w = 1000;
var h = 600;
var controls;
var clock;
var data_target  = '001.png';
var data_target2 = '002.png';

var parent;

// *********************************************************
// キーアクション呼び出し用
// *********************************************************
function control_update() {
	controls.updateMovementVector();
	controls.updateRotationVector();
}

// *********************************************************
// 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
}

// *********************************************************
// jQuery スライダー
// *********************************************************
$(function () {
	// スピン回転用スライダー
	$("#slider-r-y").slider({
		range: "min",
		step: 0.01,
		min: 0,
		max: Math.PI * 2,
		value: 0,
		slide: function (event, ui) {

			parent.rotation.y = ui.value;

//			mesh.rotation.y = ui.value;
//			mesh2.rotation.y = ui.value + 180 * Math.PI / 180;
		}
	});
	// 縦回転用スライダー
	$("#slider-r-x").slider({
		orientation: "vertical",
		range: "min",
		step: 0.01,
		min: 0,
		max: Math.PI * 2,
		value: Math.PI / 32,
		slide: function (event, ui) {
		
			parent.rotation.x = ui.value;

//			mesh.rotation.x = ui.value;
//			mesh2.rotation.x = ui.value;
		}
	});
});

if ( !WebGL_chk ) {
	var usePlugin;
	try {
		usePlugin = WebGLRenderingContext.hasOwnProperty('iewebgl');
	} catch (e) {
		usePlugin = true;
	}
	if ( usePlugin ) {
		init();
		animate();
	}
	else {
		container.innerHTML = "<div id='message' style='postion:absolute;left:100px;top:350px;color:#FF0000;font-size:50px;'>WebGL が使用できません</div>";
	}
}
else {
	init();
	animate();
}

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

	clock = new THREE.Clock();

	// *************************************************
	// シーン
	// *************************************************
	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 );

	// *************************************************
	// キーボードコントロール
	// *************************************************
	controls = new THREE.FlyControls( camera );
	controls.movementSpeed = 120;
	controls.domElement = container;
	controls.rollSpeed = Math.PI / 48 * 2;
	controls.dragToLook = true;
	controls.object.useQuaternion = true;

	parent = new THREE.Object3D();
		
	// *************************************************
	// データの読み込み
	// *************************************************
	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);
		parent.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);
		parent.add( mesh2 );
		
	};
	image2.src = data_target2;

	// *************************************************
	// 照明
	// *************************************************
	var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 1 );
	directionalLight1.position.set( 0, 0, 300 ).normalize();
	scene.add( directionalLight1 );

	var directionalLight2 = new THREE.DirectionalLight( 0xffffff, 1 );
	directionalLight2.position.set( 0, 0, -500 ).normalize();
	scene.add( directionalLight2 );

	scene.add(parent);

	// *************************************************
	// 描画
	// *************************************************
	if ((window.navigator.userAgent.toLowerCase()).indexOf("msie") > -1) {
		container.getElementsByTagName("div")[0].style.display = "none";
		var externalCanvas = document.getElementById('renderCanvas');
		renderer = new THREE.WebGLRenderer({ 'canvas': externalCanvas, antialias: true });
	}
	else {
		renderer = new THREE.WebGLRenderer( { antialias: true } );
	}	
	renderer.setSize( w, h );

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

}


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

	requestAnimationFrame( animate );
	render();

}

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

	var delta = clock.getDelta();
	controls.update( delta );
	renderer.render( scene, camera );

}
</script>
<style>
.desc {
	margin-left: 60px;
	margin-top: -10px;
}
.cont {
	cursor: pointer;
	background-color: orange;
}
#control_desc td {
	padding:4px;
	border: 1px solid;#888;
}
</style>
<div class="desc">
<br />
</div>

<pre>

<table id="control_desc" class="desc">
<tr>
<td 
	class="cont"
	onmousedown='controls.moveState.forward=1;control_update();'
	onmouseup='controls.moveState.forward=0;control_update();'
	onmouseout='controls.moveState.forward=0;control_update();'
	>W</td><td>前進</td>
<td 
	class="cont"
	onmousedown='controls.moveState.back=1;control_update();'
	onmouseup='controls.moveState.back=0;control_update();'
	onmouseout='controls.moveState.back=0;control_update();'
	>S</td><td>後退</td>
<td
	class="cont"
	onmousedown='controls.moveState.left=1;control_update();'
	onmouseup='controls.moveState.left=0;control_update();'
	onmouseout='controls.moveState.left=0;control_update();'
	>A</td><td>左移動</td>
<td
	class="cont"
	onmousedown='controls.moveState.right=1;control_update();'
	onmouseup='controls.moveState.right=0;control_update();'
	onmouseout='controls.moveState.right=0;control_update();'
	>D</td><td>右移動</td>
</tr><tr>
<td
	class="cont"
	onmousedown='controls.moveState.up=1;control_update();'
	onmouseup='controls.moveState.up=0;control_update();'
	onmouseout='controls.moveState.up=0;control_update();'
	>R</td><td>上移動</td>
<td
	class="cont"
	onmousedown='controls.moveState.down=1;control_update();'
	onmouseup='controls.moveState.down=0;control_update();'
	onmouseout='controls.moveState.down=0;control_update();'
	>F</td><td>下移動</td>
<td
	class="cont"
	onmousedown='controls.moveState.rollLeft=1;control_update();'
	onmouseup='controls.moveState.rollLeft=0;control_update();'
	onmouseout='controls.moveState.rollLeft=0;control_update();'
	>Q</td><td>左回転</td>
<td
	class="cont"
	onmousedown='controls.moveState.rollRight=1;control_update();'
	onmouseup='controls.moveState.rollRight=0;control_update();'
	onmouseout='controls.moveState.rollRight=0;control_update();'
	>E</td><td>右回転</td>
</tr><tr>
<td
	class="cont"
	onmousedown='controls.moveState.pitchUp=1;control_update();'
	onmouseup='controls.moveState.pitchUp=0;control_update();'
	onmouseout='controls.moveState.pitchUp=0;control_update();'
	>Y</td><td>同一視点上移動</td>
<td
	class="cont"
	onmousedown='controls.moveState.pitchDown=1;control_update();'
	onmouseup='controls.moveState.pitchDown=0;control_update();'
	onmouseout='controls.moveState.pitchDown=0;control_update();'
	>H</td><td>同一視点下移動</td>
<td
	class="cont"
	onmousedown='controls.moveState.yawLeft=1;control_update();'
	onmouseup='controls.moveState.yawLeft=0;control_update();'
	onmouseout='controls.moveState.yawLeft=0;control_update();'
	>G</td><td>同一視点左移動</td>
<td
	class="cont"
	onmousedown='controls.moveState.yawRight=1;control_update();'
	onmouseup='controls.moveState.yawRight=0;control_update();'
	onmouseout='controls.moveState.yawRight=0;control_update();'
	>J</td><td>同一視点右移動</td>
</tr><tr>
<td
	class="cont"
	onmousedown='controls.moveState.pitchUp=1;controls.moveState.down=1;control_update();'
	onmouseup='controls.moveState.pitchUp=0;controls.moveState.down=0;control_update();'
	onmouseout='controls.moveState.pitchUp=0;controls.moveState.down=0;control_update();'
	>O</td><td>対象物縦回転</td>
<td
	class="cont"
	onmousedown='controls.moveState.pitchDown=1;controls.moveState.up=1;control_update();'
	onmouseup='controls.moveState.pitchDown=0;controls.moveState.up=0;control_update();'
	onmouseout='controls.moveState.pitchDown=0;controls.moveState.up=0;control_update();'
	>L</td><td>対象物縦回転</td>
<td
	class="cont"
	onmousedown='controls.moveState.yawLeft=1;controls.moveState.right=1;control_update();'
	onmouseup='controls.moveState.yawLeft=0;controls.moveState.right=0;control_update();'
	onmouseout='controls.moveState.yawLeft=0;controls.moveState.right=0;control_update();'
	>K</td><td>対象物横回転</td>
<td
	class="cont"
	onmousedown='controls.moveState.yawRight=1;controls.moveState.left=1;control_update();'
	onmouseup='controls.moveState.yawRight=0;controls.moveState.left=0;control_update();'
	onmouseout='controls.moveState.yawRight=0;controls.moveState.left=0;control_update();'
	>;</td><td>対象物横回転</td>
</tr>
</table>
<div class="desc">
<b>▲ カメラの移動キーです</b>

<b style='font-size:14px;'>日本語入力状態になっているとキーが効かないので注意して下さい
( 上のオレンジのキーをマウスで長押しても動作します )</b>

※ 移動してからの回転は、回転の中心が変化します
※ キーの同時押しは有効です
</div>
</pre>

</div>


</body>
</html>

※ WEB上のコードは、一般 WEB 用に多少手を入れてあります

【Three.js : その他の最新記事】

posted by at 2012-10-16 01:11 | Three.js : その他 |

Seesaa ブログ

	写真素材足成
	ぱくたそ
	Image * After
	空フリー写真素材
	WEBデザイナーが作った超シンプル素材集
	無料イラスト/春夏秋冬/イラストわんパグ

	切絵字・モフ字・水面字・三次元切絵字・イバラ字
	武蔵システム無料フォント
	Gray Graphics
	梅フォント
	ホリデイMDJP03（Holiday-MDJP03）
	Fontopo
	たぬきフォント
	Font Foundry iAi-jp
	ALT-DESIGN@clip
	Gutenberg Labo
	:::STUDIO twoG:::
	フォーマット変換

	JavaScript : 文字列で表現された日付を論理チェック
	複数行のグループデータを1行にまとめるSQL
	jQuery プラグイン jquery.balloon.js の外部からのコントロール
	C# の delegate : メソッドの引数にメソッドを渡して使用する方法と、JavaScript の function(){} と同じ使用方法( 匿名 )
	Windows 標準の CDO.Message で(GmailまたはYahoo!メールを使って)簡単にバッチ処理からメールを送る
	VBScript : 3種のMDB(または accdb)内のテーブル一覧取得方法
	jQuery/JavaScript : 新しく開かれたウインドウのウインドウコントロール
	【VBS + Excel】シンプルな詳細設計書のフォーマットをExcelがインストールされている環境で簡単に作成する

	GIMP で星空の作り方
	GIMP で誰でも炎を簡単に作ったり使ったりする方法
	炎の画像から GIMP の炎ブラシを作成する方法
	爆炎画像作成(ブラシ)
	Imageafter の画像を加工してイラスト調背景に ( Landscape Painter )
	GIMP 効果の Landscape Illustrator
	Scripts that work in GIMP-2.8+
	GIMP FX Foundry
	GIMP 2.8にて、ステンドグラスロゴ。