Windows7 用 IE11 Google Chrome と比べて完全というわけには行きませんでしたが、ほぼ Three.js のサンプルはなんとか動くようではあります。 リンク先は、少し大きめの幅で動かしています以下は IFRAME です。テクスチャ画像を自サイトに置く都合でこのようになっています。
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min57.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/OrbitControls.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/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の最新記事】
- IE11 を アプリケーションのプラットホームとして使う為の3つの設定
- IE11 : 実行済みのページのソースをクリップボードにコピーする
- VBScript : IE11のソースエディタの変更
- IE11 で VBScript のクラスを使用して Excel(Excel.Application) の処理を検証
- IE 専用 : 「信頼済みサイト」でのみ行う、WEBページのデータの Excel への転送
- VBScript のコードを書いた HTML を IEのツールメニューにアドオンする
- IE11 から VBScript で ODBCで使用されるデータベース(例えばSQLServer) より Excel でデータをエクスポートする
- IE11 で『安全だとマークされていないActiveX』を使用可能にして実行可能な Windows 処理のサンプル
- IE11 で VBScript を使う場合の注意事項 ( 古い社内アプリ移行時必見 )
- IE11 でドキュメントモードを変更して IE8 として VBscript から jQuery にアクセスする
- IEによる JavaScriptのセキュリティ上の制限とその解除
- IEの設定 : 信頼済みサイトに移動する時にダイアログを表示しないようにする
- IE8 までは、ブロック要素でなくても『page-break-after』は動作してました。というか、正式ドキュメントにそう書いてあります。
- IE11 : 画像のフルスクリーン API
- HTTP ヘッダや META 要素に指定する、X-UA-Compatible による IEのドキュメントモードの変更
- IE 専用 : 「信頼済みサイト」でのみ行う、InternetExplorer.Application オブジェクト
- IE9 では動かない WEBアプリケーションの為に、IE8 のドキュメントモードで強制的に動かす為の META 記述
- IEのセキュリティゾーン関連のレジストリエントリ
