SQLの窓

2013年11月22日


Windows7 用の IE11 がリリースされて、めでたく『WebGL』が使えるようになりました。

Windows7 用 IE11

Google Chrome と比べて完全というわけには行きませんでしたが、ほぼ Three.js のサンプルはなんとか動くようではあります。

リンク先は、少し大きめの幅で動かしています


以下は IFRAME です。テクスチャ画像を自サイトに置く都合でこのようになっています。
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min57.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/OrbitControls.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/user_three.js"></script><div id="three_area" style='width:600px;height:400px;border: solid #000000 1px;'></div>

<script>

	var cameraCube, sceneCube;

	var w = 600;
	var h = 400;

	try {	

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

	USER.camera2 = new THREE.PerspectiveCamera( 50, w / h, 1, 500 );
	USER.camera2.position.z = 0;

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

	// テクスチャの準備
	var path = "../threeimg/SwedishRoyalCastle/";
	var format = '.jpg';
	var urls = [
			path + 'px' + format, path + 'nx' + format,
			path + 'py' + format, path + 'ny' + format,
			path + 'pz' + format, path + 'nz' + format
		];

	// テクスチャの実装
	mesh = USER.meshPanorama(urls);
	USER.scene2.add( mesh );

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

	// 表示エリア設定
	document.getElementById("three_area").appendChild( USER.renderer.domElement );

	// コントロール作成
	USER.orbit();
	USER.controls.autoRotate = true;
	USER.controls.autoRotateSpeed = 0.5; //default 2.0

	// アニメーション開始
	USER.animate();

	}
	catch(e) {
		document.getElementById("three_area").innerHTML = "WebGL が使用できません";
		document.getElementById("three_area").style.height = "80px";
	}

// オーバーライド
USER.animate = function () {

	requestAnimationFrame( USER.animate );

	USER.camera2.rotation.copy( USER.camera.rotation );
	USER.camera2.position.copy( USER.camera.position );
	USER.controls.update();
	USER.renderer.render( USER.scene2, USER.camera2 );

}


</script>

やっとこれで、Three.js のコンテンツを作成する事ができます。( IE11 への移行はまだまだでしょうけれど )



インストールでは再起動が必要になります









F12 の開発者ツールの UI が大きく変わっています



特に、IE のバージョン違いの動作確認をする場所は画像の位置となります


関連する他のデモページ

Three.js : WebGL Cube テクスチャパノラマ背景の画像配置が解る表示

Three.js : Creative Commons の equirectangular パノラマ画像( WebGL )

Three.js : webgl_materials_cubemap_dynamic2(球テクスチャでパノラマ背景) の簡易化




【IEの最新記事】
posted by lightbox at 2013-11-22 17:18 | IE | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり